Full document, spreadsheet, slideshow, and diagram tooling
Merge pull request 'fix: make focus rings opt-in via keyboard detection' (#37) from fix/focus-color-teal into main
+39
-10
+12
CHANGELOG.md
+12
CHANGELOG.md
···
7
7
## [Unreleased]
8
8
9
9
### Added
10
+
- Both: accessibility, mobile responsive, sharing/permissions (#39)
11
+
- Both: right-click context menus, print layout (#38)
12
+
- Docs: outline sidebar, table improvements, link previews, zen mode (#37)
13
+
- Sheets: drag-to-fill, paste special, format painter, virtual scrolling (#36)
14
+
- Sheets: cross-sheet refs, named ranges, formula tracer (#35)
15
+
- Sheets: status bar, formula auto-complete, cell notes (#34)
16
+
- Collaboration: version history, suggesting mode, offline support (#33)
17
+
- Landing: sort, star/favorite, soft-delete/trash, folders, search, username prompt (#32)
18
+
- Sheets: charts via Chart.js, multi-column filter/sort (#31)
19
+
- Sheets: conditional formatting, data validation, cell borders, wrap text, striped rows (#30)
20
+
- Import/Export: PDF export, .docx import, .xlsx import (#29)
21
+
- Docs: line spacing, paragraph spacing, page breaks, spell check (#28)
10
22
- Add markdown autoformatting input rules (#27)
11
23
- Toolbar polish: make more similar to Google Docs (#26)
12
24
- Add dark mode support to docs and sheets (#23)
+8
-10
src/css/app.css
+8
-10
src/css/app.css
···
3467
3467
Only show on keyboard navigation, not mouse clicks.
3468
3468
======================================================== */
3469
3469
3470
-
/* Suppress all default focus outlines */
3471
-
*:focus {
3470
+
/* Suppress all focus outlines by default — clean UI for mouse users */
3471
+
*:focus, *:focus-visible {
3472
3472
outline: none;
3473
3473
}
3474
3474
3475
-
/* Show outline only on keyboard-triggered focus (Tab, arrow keys) */
3476
-
*:focus-visible {
3475
+
/* Opt-in accessibility focus rings via data attribute on html element */
3476
+
[data-a11y-focus] *:focus-visible {
3477
3477
outline: 2px solid var(--color-teal);
3478
3478
outline-offset: 1px;
3479
3479
}
3480
-
3481
-
/* Buttons and toolbar items: even subtler focus ring */
3482
-
.tb-btn:focus-visible,
3483
-
.toolbar-dropdown-toggle:focus-visible,
3484
-
.toolbar-overflow-toggle:focus-visible,
3485
-
button:focus-visible {
3480
+
[data-a11y-focus] .tb-btn:focus-visible,
3481
+
[data-a11y-focus] .toolbar-dropdown-toggle:focus-visible,
3482
+
[data-a11y-focus] .toolbar-overflow-toggle:focus-visible,
3483
+
[data-a11y-focus] button:focus-visible {
3486
3484
outline: 1.5px solid var(--color-teal);
3487
3485
outline-offset: 0px;
3488
3486
}
+7
src/docs/index.html
+7
src/docs/index.html
···
11
11
if (saved === 'dark' || saved === 'light') {
12
12
document.documentElement.setAttribute('data-theme', saved);
13
13
}
14
+
// Enable focus rings only when keyboard navigation is detected
15
+
document.addEventListener('keydown', function(e) {
16
+
if (e.key === 'Tab') document.documentElement.setAttribute('data-a11y-focus', '');
17
+
});
18
+
document.addEventListener('mousedown', function() {
19
+
document.documentElement.removeAttribute('data-a11y-focus');
20
+
});
14
21
})();
15
22
</script>
16
23
</head>
+6
src/index.html
+6
src/index.html
···
12
12
if (saved === 'dark' || saved === 'light') {
13
13
document.documentElement.setAttribute('data-theme', saved);
14
14
}
15
+
document.addEventListener('keydown', function(e) {
16
+
if (e.key === 'Tab') document.documentElement.setAttribute('data-a11y-focus', '');
17
+
});
18
+
document.addEventListener('mousedown', function() {
19
+
document.documentElement.removeAttribute('data-a11y-focus');
20
+
});
15
21
})();
16
22
</script>
17
23
</head>
+6
src/sheets/index.html
+6
src/sheets/index.html
···
11
11
if (saved === 'dark' || saved === 'light') {
12
12
document.documentElement.setAttribute('data-theme', saved);
13
13
}
14
+
document.addEventListener('keydown', function(e) {
15
+
if (e.key === 'Tab') document.documentElement.setAttribute('data-a11y-focus', '');
16
+
});
17
+
document.addEventListener('mousedown', function() {
18
+
document.documentElement.removeAttribute('data-a11y-focus');
19
+
});
14
20
})();
15
21
</script>
16
22
</head>