fix(CQ-WEB-11+12): Fix accessibility labels + SSR window check
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
CQ-WEB-11: Add aria-label attributes to search input, date inputs, and id/htmlFor associations for status and priority filter checkboxes in FilterBar component to improve screen reader accessibility. CQ-WEB-12: Guard all browser-specific API usage in ReactFlowEditor behind typeof window checks. Move isDark detection into useState + useEffect to prevent SSR/hydration mismatches. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -222,7 +222,9 @@ export function ReactFlowEditor({
|
||||
}, [readOnly, selectedNode, onNodeDelete, setNodes, setEdges]);
|
||||
|
||||
// Keyboard shortcuts
|
||||
useEffect((): (() => void) => {
|
||||
useEffect((): (() => void) | undefined => {
|
||||
if (typeof window === "undefined") return undefined;
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent): void => {
|
||||
if (readOnly) return;
|
||||
|
||||
@@ -240,8 +242,13 @@ export function ReactFlowEditor({
|
||||
};
|
||||
}, [readOnly, selectedNode, handleDeleteSelected]);
|
||||
|
||||
const isDark =
|
||||
typeof window !== "undefined" && document.documentElement.classList.contains("dark");
|
||||
// Dark mode detection - must be in state+effect to avoid SSR/hydration mismatch
|
||||
const [isDark, setIsDark] = useState(false);
|
||||
useEffect((): void => {
|
||||
if (typeof window !== "undefined") {
|
||||
setIsDark(document.documentElement.classList.contains("dark"));
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={`w-full h-full ${className}`} style={{ minHeight: "500px" }}>
|
||||
|
||||
Reference in New Issue
Block a user