Full document, spreadsheet, slideshow, and diagram tooling
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Merge pull request 'fix: make keyboard focus rings visible by default (a11y)' (#269) from fix/css-focus-styles into main

scott 6b535d04 1594dec5

+43 -22
+43 -22
src/css/app.css
··· 1892 1892 transform: rotate(45deg); 1893 1893 } 1894 1894 .tiptap ul[data-type="taskList"] li > label input[type="checkbox"]:focus-visible { 1895 - outline: none; 1895 + outline: 2px solid var(--color-focus); 1896 + outline-offset: 1px; 1896 1897 } 1897 1898 /* Checked task items: muted text */ 1898 1899 .tiptap ul[data-type="taskList"] li[data-checked="true"] > div { ··· 4989 4990 4990 4991 .skip-link:focus { 4991 4992 top: 0; 4992 - outline: none; 4993 4993 } 4994 4994 4995 4995 /* ======================================================== ··· 4997 4997 Only show on keyboard navigation, not mouse clicks. 4998 4998 ======================================================== */ 4999 4999 5000 - /* Suppress all focus outlines by default — clean UI for mouse users. 5001 - !important overrides higher-specificity rules from individual components. */ 5002 - *:focus, *:focus-visible { 5003 - outline: none !important; 5000 + /* Suppress focus outlines for mouse/touch — preserve :focus-visible for keyboard */ 5001 + *:focus:not(:focus-visible) { 5002 + outline: none; 5004 5003 } 5005 - /* Allow specific non-focus outlines (cell selection, validation) to work */ 5006 - .sheet-grid td.selected { outline: 2px solid var(--color-teal) !important; outline-offset: -1px; } 5007 - .sheet-grid td.validation-invalid { outline: 2px solid var(--color-danger) !important; outline-offset: -2px; } 5008 5004 5009 - /* Opt-in accessibility focus rings via data attribute on html element */ 5010 - [data-a11y-focus] *:focus-visible { 5011 - outline: 2px solid var(--color-teal); 5005 + /* Global keyboard focus ring — visible on Tab navigation */ 5006 + *:focus-visible { 5007 + outline: 2px solid var(--color-focus); 5012 5008 outline-offset: 2px; 5013 5009 border-radius: var(--radius-sm); 5014 5010 } 5015 - [data-a11y-focus] .tb-btn:focus-visible, 5016 - [data-a11y-focus] .toolbar-dropdown-toggle:focus-visible, 5017 - [data-a11y-focus] .toolbar-overflow-toggle:focus-visible, 5018 - [data-a11y-focus] button:focus-visible { 5019 - outline: 2px solid var(--color-teal); 5011 + 5012 + /* Tighter offset for buttons and toolbar controls */ 5013 + button:focus-visible, 5014 + .tb-btn:focus-visible, 5015 + .toolbar-dropdown-toggle:focus-visible, 5016 + .toolbar-overflow-toggle:focus-visible { 5020 5017 outline-offset: 1px; 5021 5018 } 5022 - [data-a11y-focus] input:focus-visible, 5023 - [data-a11y-focus] select:focus-visible { 5024 - outline: 2px solid var(--color-teal); 5025 - outline-offset: 0px; 5019 + 5020 + /* Flush offset for form elements */ 5021 + input:focus-visible, 5022 + select:focus-visible, 5023 + textarea:focus-visible { 5024 + outline-offset: 0; 5026 5025 } 5026 + 5027 + /* Opt-out: elements with existing strong focus indicators or that manage their own focus */ 5028 + .tiptap:focus-visible, 5029 + .cell-editor:focus-visible, 5030 + .sheet-tab-rename:focus-visible, 5031 + .inline-text-edit textarea:focus-visible, 5032 + .cmd-palette-input:focus-visible, 5033 + .context-menu:focus-visible { 5034 + outline: none; 5035 + } 5036 + 5037 + /* Opt-out: inputs with box-shadow focus rings already */ 5038 + .formula-input:focus-visible, 5039 + .modal input:focus-visible, 5040 + .modal input[type="password"]:focus-visible, 5041 + .find-bar-input:focus-visible, 5042 + .print-preview-sidebar select:focus-visible { 5043 + outline: none; 5044 + } 5045 + 5046 + /* Non-focus outlines (cell selection, validation) */ 5047 + .sheet-grid td.selected { outline: 2px solid var(--color-teal); outline-offset: -1px; } 5048 + .sheet-grid td.validation-invalid { outline: 2px solid var(--color-danger); outline-offset: -2px; } 5027 5049 5028 5050 /* ======================================================== 5029 5051 View-Only Badge ··· 7726 7748 } 7727 7749 7728 7750 .ai-chat-input:focus { 7729 - outline: none; 7730 7751 border-color: var(--color-accent); 7731 7752 } 7732 7753