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
(nav) video tour tool link: make it keyboard focusable 
a `<a>` was used without href, making it non keybaord focusable. we
shouldn't use a `<a>` here anyway, as this acts as a button. using a
button tag makes it kb accessible.
  • Loading branch information
@manuhabitela
manuhabitela committed Aug 12, 2025
commit fc87c878a86658c841a2c92ba196e05481a5f773
9 changes: 7 additions & 2 deletions app/client/ui/LeftPanelCommon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export const cssPageEntry = styled('div', `
}
`);

export const cssPageLink = styled('a', `
const cssPageAction = `
display: flex;
align-items: center;
height: 32px;
Expand All @@ -155,6 +155,7 @@ export const cssPageLink = styled('a', `
outline: none;
cursor: pointer;
outline-offset: -3px;
width: 100%;
&, &:hover, &:focus {
text-decoration: none;
outline: none;
Expand All @@ -166,7 +167,11 @@ export const cssPageLink = styled('a', `
.${cssTools.className}-collapsed & {
padding-left: 16px;
}
`);
`;

export const cssPageLink = styled('a', cssPageAction);

export const cssPageButton = styled(unstyledButton, cssPageAction);

export const cssLinkText = styled('span', `
white-space: nowrap;
Expand Down
6 changes: 3 additions & 3 deletions app/client/ui/OpenVideoTour.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {makeT} from 'app/client/lib/localization';
import {logTelemetryEvent} from 'app/client/lib/telemetry';
import {getMainOrgUrl} from 'app/client/models/gristUrlState';
import {cssLinkText, cssPageEntryMain, cssPageIcon, cssPageLink} from 'app/client/ui/LeftPanelCommon';
import {cssLinkText, cssPageButton, cssPageEntry, cssPageIcon} from 'app/client/ui/LeftPanelCommon';
import {YouTubePlayer} from 'app/client/ui/YouTubePlayer';
import {theme} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
Expand Down Expand Up @@ -83,8 +83,8 @@ export function createVideoTourToolsButton(): HTMLDivElement | null {

let iconElement: HTMLElement;

return cssPageEntryMain(
cssPageLink(
return cssPageEntry(
cssPageButton(
iconElement = cssPageIcon('Video'),
cssLinkText(t("Video Tour")),
dom.cls('tour-help-center'),
Expand Down