Full document, spreadsheet, slideshow, and diagram tooling
Merge pull request 'fix: make keyboard focus rings visible by default (a11y)' (#269) from fix/css-focus-styles into main
+43
-22
+43
-22
src/css/app.css
+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