Skip to content

Accessibility options modal #1734

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

Jump to bottom
Merged
merged 5 commits into from
Sep 26, 2025
Merged

Accessibility options modal #1734

merged 5 commits into from
Sep 26, 2025

Conversation

manuhabitela
Copy link
Collaborator

@manuhabitela manuhabitela commented Jul 28, 2025 •
edited
Loading

Context

Now that there is a high contrast theme, and most importantly, that keyboard shortcuts exist to escape the widget and navigate through the whole document page ; it feels like a good idea to expose that more in the UI.

Proposed solution

The idea is to have an "Accessibility" button directly available in the tools section of the left panel.

  • this button has a rather common icon for accessibility related things on the web ; currently borrowed from bootstrap icons as an example (I didn't get if an icon lib was already in use or if icons were homemade),
  • we directly show in the UI the keyboard shortcut triggering this button (F4 for now, but I need more testing on this). I feel this is important: since by default, we can't access this button by normal usage of the tab key when on a document page, visually showing the corresponding shortcut allows to trigger the button even if we don't know about the region switching shortcuts
  • when clicking the button, we see a modal, letting us quickly enabling the high contrast theme, and explaining us the region switching keyboard shortcuts exist

Has this been tested?

  • 👍 yes, I added tests to the test suite
  • 💭 no, because this PR is a draft and still needs work
  • 🙅 no, because this is not relevant here
  • 🙋 no, because I need help

Screenshots / Screencasts

a11ymodal.mp4

@manuhabitela
Copy link
Collaborator Author

manuhabitela commented Jul 28, 2025 •
edited
Loading

## Review notes

This pull request needs things that are added in the ongoing PR #1667.

⚠️ As a result, only the latest commit of this PR is relevant here: all the other ones belong to the other PR. I can't create a PR to grist-core with a base branch located on my fork, that's why.

This is outdated info, see last comment for update

@manuhabitela manuhabitela requested a review from fflorent July 28, 2025 11:48
@manuhabitela manuhabitela moved this to Needs Internal Feedback in French administration Board Jul 28, 2025
@fflorent fflorent added the preview Launch preview deployment of this PR label Jul 29, 2025
@github-actions GitHub Actions
Copy link
Contributor

Deployed commit 1e86fba67f05b8beef7fb484fe0bc5e622342e6b as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-08-28T11:02:41.320Z)

@github-actions GitHub Actions
Copy link
Contributor

Deployed commit 49cfda015babb2debeb529f4b1d192f19ecaadb4 as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-08-29T11:53:28.577Z)

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 6, 2025

Deployed commit 402610f1a3192c49c9a04bcb99f5a6918f146d3e as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-09-05T13:21:21.208Z)

@manuhabitela
Copy link
Collaborator Author

manuhabitela commented Aug 6, 2025 •
edited
Loading

Update @fflorent: I changed my strategy on this to help on reviewing/merging this on its own. This is now based on the main branch and doesn't rely on any other things.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 6, 2025

Deployed commit 37411c99ea8d07968fc1f59260fb95f6f89e5f1a as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-09-05T15:00:59.847Z)

@manuhabitela
Copy link
Collaborator Author

manuhabitela commented Aug 12, 2025 •
edited
Loading

I updated the branch:

  • I force the "switch to high contrast theme" button to be readable even on the light theme (which is the theme having contrast issues with the green color), as I feel it's important to have this specific button correctly visible whatever the context.
  • added tests

From my point of view this is ready to review @fflorent @hexaltation :)

@github-actions GitHub Actions
Copy link
Contributor

Deployed commit b4ebd1cd4cf8129b8841ccde8166b53de4103ba9 as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-09-11T12:48:51.684Z)

@manuhabitela
Copy link
Collaborator Author

manuhabitela commented Aug 12, 2025 •
edited
Loading

I must admit at first glance I don't get why the LeftPanel test fails, I can't make it fail locally…

In the mean time if you have any idea @dsagal, I see it's a recent addition of yours (including some fixes on the RegionFocusSwitcher, sorry and thanks by the way 👀)

edit: I think I know the issue. I'll open a separate PR for the flaky test.

@github-actions GitHub Actions
Copy link
Contributor

Deployed commit c230fa9446e354a587fc9d4dd82873de1dcb16bb as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-09-11T14:05:19.354Z)

@github-actions GitHub Actions
Copy link
Contributor

Deployed commit ab8a1be21e301ad668b2af15a42fe196362132e1 as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-09-12T07:34:35.331Z)

hexaltation
hexaltation approved these changes Aug 14, 2025
View reviewed changes
Copy link
Collaborator

@hexaltation hexaltation left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks for the job

@github-actions GitHub Actions
Copy link
Contributor