diff --git a/app/globals.css b/app/globals.css index 67778bf..fc8ca05 100644 --- a/app/globals.css +++ b/app/globals.css @@ -156,6 +156,21 @@ font-feature-settings: "rlig" 1, "calt" 1; } + /* Enhanced focus indicators for accessibility */ + *:focus-visible { + outline: 2px solid var(--ring); + outline-offset: 2px; + } + + button:focus-visible, + input:focus-visible, + select:focus-visible, + textarea:focus-visible, + [role="button"]:focus-visible { + outline: 2px solid var(--ring); + outline-offset: 2px; + } + /* Apply custom scrollbar globally with primary color accent */ * { scrollbar-width: thin; diff --git a/components/editor/file-menu.tsx b/components/editor/file-menu.tsx index d06004c..07fe20e 100644 --- a/components/editor/file-menu.tsx +++ b/components/editor/file-menu.tsx @@ -52,10 +52,13 @@ export function FileMenu() {
{isMenuOpen && ( @@ -63,34 +66,42 @@ export function FileMenu() {
setIsMenuOpen(false)} + aria-hidden="true" /> -
+
-
+
@@ -99,9 +110,10 @@ export function FileMenu() { setIsExportDialogOpen(true); setIsMenuOpen(false); }} - className="flex items-center gap-3 w-full px-4 py-2 text-sm hover:bg-accent transition-colors" + className="flex items-center gap-3 w-full px-4 py-2 text-sm hover:bg-accent transition-colors focus:outline-none focus:bg-accent text-left" + role="menuitem" > - +
diff --git a/components/editor/theme-toggle.tsx b/components/editor/theme-toggle.tsx index e119677..24dbd68 100644 --- a/components/editor/theme-toggle.tsx +++ b/components/editor/theme-toggle.tsx @@ -33,6 +33,7 @@ export function ThemeToggle() { @@ -42,13 +43,15 @@ export function ThemeToggle() { return ( ); diff --git a/components/tools/tool-palette.tsx b/components/tools/tool-palette.tsx index e3cbe4a..b658fe3 100644 --- a/components/tools/tool-palette.tsx +++ b/components/tools/tool-palette.tsx @@ -27,7 +27,11 @@ export function ToolPalette() { const { activeTool, setActiveTool } = useToolStore(); return ( -
+
+ ); }