fix(CQ-WEB-11+12): Fix accessibility labels + SSR window check
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:
Jason Woltje
2026-02-06 18:45:56 -06:00
parent bfeea743f7
commit 3d9edf4141
3 changed files with 85 additions and 3 deletions

View File

@@ -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" }}>