Skip to content

Improve keyboard and screen reader navigation on homepage #1667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Aug 12, 2025
Merged

Improve keyboard and screen reader navigation on homepage #1667

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
520496e
(header) add alt text for org back-to-home link
manuhabitela Jul 17, 2025
5722b8d
(header) make org selection keyboard focusable
manuhabitela Jul 23, 2025
6b5d116
(nav) make the "add new" button in left panel keyboard focusable
manuhabitela Jul 17, 2025
778823b
(nav) in left panel, make workspace options menus keyboard focusable
manuhabitela Jul 17, 2025
635b58d
(styling) move the unstyled button in its own helper file
manuhabitela Jul 17, 2025
d6b7599
(a11y) add html region tags to ease up screen reader nav
manuhabitela Jul 17, 2025
fc87c87
(nav) video tour tool link: make it keyboard focusable
manuhabitela Jul 23, 2025
0a7fff4
(a11y) add alt text on help center icon link
manuhabitela Jul 17, 2025
04dcb00
(nav) make topbar icons keyboard focusable
manuhabitela Jul 17, 2025
f30d7fb
(nav) make top bar user icon kb focusable
manuhabitela Jul 17, 2025
b69aa52
(nav) make topbar left/right panel openers keyboard accessible
manuhabitela Jul 17, 2025
ee42a57
(home) improve html structure for better screen reader xp
manuhabitela Jul 17, 2025
5001a72
(home) docs list: small html changes for better screen reader ux
manuhabitela Jul 17, 2025
c1b9959
(home) make doc list easier to navigate with screen readers / kb
manuhabitela Jul 17, 2025
abaa3ce
(nav) workspace items in left panel are more screen reader friendly
manuhabitela Jul 17, 2025
a755821
(home) intro cards: clean translation strings
manuhabitela Jul 28, 2025
dfe5d3a
(a11y) reverse dots menu screen reader labels
manuhabitela Jul 30, 2025
92e1855
(home) fix video intro card outline not totally visible
manuhabitela Aug 12, 2025
6c8cb4d
(home) mobile doc list: fix documents that were not clickable anymore
manuhabitela Aug 12, 2025
bceef78
(home) doc list focus rings: fix layout shift
manuhabitela Aug 12, 2025
347a026
(home) fix main panel top-border focus ring not showing
manuhabitela Aug 12, 2025
aa801d5
(top bar) make the account widget focus ring stop bleeding out
manuhabitela Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
(a11y) reverse dots menu screen reader labels 
- i'd say describing what the button actually is first, and then its
context, is a better order
  • Loading branch information
@manuhabitela
manuhabitela committed Aug 12, 2025
commit dfe5d3a5801d7b22a1a5006960f7401b86f90fa9
2 changes: 1 addition & 1 deletion app/client/ui/DocList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ export class DocList extends Disposable {
parentSelectorToMark: "." + cssDocRow.className,
}),
dom.on("click", (ev) => stopEvent(ev)),
{'aria-label': t("Document options - {{- documentName }}", {documentName: `"${doc.name}"`})},
{'aria-label': t("context menu - {{- documentName }}", {documentName: `"${doc.name}"`})},
testId("doc-options")
),
contextMenu(() => makeDocOptionsMenu(this._home, doc), {
Expand Down
2 changes: 1 addition & 1 deletion app/client/ui/HomeLeftPane.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom

// Clicks on the menu trigger shouldn't follow the link that it's contained in.
dom.on('click', (ev) => { ev.stopPropagation(); ev.preventDefault(); }),
{'aria-label': t("Workspace options - {{- workspaceName }}", {workspaceName: `"${ws.name}"`})},
{'aria-label': t("context menu - {{- workspaceName }}", {workspaceName: `"${ws.name}"`})},
testId('dm-workspace-options'),
),
testId('dm-workspace'),
Expand Down
4 changes: 2 additions & 2 deletions static/locales/en.client.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -630,7 +630,7 @@
"Tutorial": "Tutorial",
"Terms of service": "Terms of service",
"Grist Resources": "Grist Resources",
"Workspace options - {{- workspaceName }}": "Workspace options - {{- workspaceName }}"
"context menu - {{- workspaceName }}": "context menu - {{- workspaceName }}"
},
"Importer": {
"Merge rows that match these fields:": "Merge rows that match these fields:",
Expand Down Expand Up @@ -2040,7 +2040,7 @@
"Sort by name": "Sort by name",
"Unpin": "Unpin",
"Workspace": "Workspace",
"Document options - {{- documentName }}": "Document options - {{- documentName }}",
"context menu - {{- documentName }}": "context menu - {{- documentName }}",
"Documents list": "Documents list"
},
"RenameDocModal": {
Expand Down