Accessibility options modal #1734

manuhabitela · 2025-07-28T11:47:24Z

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 · 2025-07-28T11:48:01Z

~~## 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

github-actions · 2025-07-29T11:04:16Z

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

github-actions · 2025-07-30T11:54:52Z

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

github-actions · 2025-08-06T13:23:25Z

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

manuhabitela · 2025-08-06T14:57:47Z

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 · 2025-08-06T15:02:36Z

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

manuhabitela · 2025-08-12T12:44:37Z

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 · 2025-08-12T12:50:17Z

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

manuhabitela · 2025-08-12T13:33:33Z

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 · 2025-08-12T14:07:33Z

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

github-actions · 2025-08-13T07:36:02Z

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

hexaltation

LGTM, thanks for the job

github-actions · 2025-08-19T12:28:26Z

Deployed commit 533d26a8e5f2fbe3d6d3366317b813a5428f3622 as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-09-18T12:26:48.496Z)

manuhabitela · 2025-08-19T12:31:16Z

If any gristlabsian is curious this is ready ;) @dsagal I remember talking about this feature with you. @georgegevoian

app/client/ui/OpenAccessibilityModal.ts

static/locales/en.client.json

nbush

Made some small copy suggestions.

Also, I was able to open the new panel with F4 on my Mac (FF), but F4 would not close it if that is the intention.

- add a tool in the bottom left corner on most pages - show a direct keyboard shortcut to open the modal. This is useful for kb users not already knowing the Ctrl+O shortcut and seeing the visible shortcut, they can still open the modal - explain the region cycle shortcuts in the modal - let the user select the high contrast theme in the modal

we force readable contrasts when using the grist light theme, because it has color contrast issues.

manuhabitela · 2025-09-18T12:44:39Z

Thanks @nbush for the feedback, I implemented it 👌

I kept F4 as an "open" a11y modal shortcut and not "toggle" though, I feel like it's better to be sure that pressing f4 just opens the modal for sure (we can close the modal with esc like any other modal). No strong opinion here but I'd rather stick with the current behavior.

@nbush

thanks @nbush for the feedback - this adds a configurable "helpWidget" common url page so that we can easily show the widgets support page in the accessibility modal without having it tied to the support.getgrist.com url - this adds a nestedLinkStyles export from links.ts to help style markdown that we can't directly use `cssLink` on

github-actions · 2025-09-18T12:46:03Z

Deployed commit 2f611ce19ac7b18fdefaa6a7d04afd69bf70c503 as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-10-18T12:43:59.492Z)

github-actions · 2025-09-18T12:53:14Z

Deployed commit f6bcecad7c888fd6d28791b08304db7d49e693b9 as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-10-18T12:51:02.476Z)

dsagal · 2025-09-26T05:55:56Z

static/icons/icons.css

    --icon-GoogleLogo: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzQyODVGNCIgZD0iTSAtMy4yNjQgNTEuNTA5IEMgLTMuMjY0IDUwLjcxOSAtMy4zMzQgNDkuOTY5IC0zLjQ1NCA0OS4yMzkgTCAtMTQuNzU0IDQ5LjIzOSBMIC0xNC43NTQgNTMuNzQ5IEwgLTguMjg0IDUzLjc0OSBDIC04LjU3NCA1NS4yMjkgLTkuNDI0IDU2LjQ3OSAtMTAuNjg0IDU3LjMyOSBMIC0xMC42ODQgNjAuMzI5IEwgLTYuODI0IDYwLjMyOSBDIC00LjU2NCA1OC4yMzkgLTMuMjY0IDU1LjE1OSAtMy4yNjQgNTEuNTA5IFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI3LjAwOSAtMzkuMjM5KSIvPjxwYXRoIGZpbGw9IiMzNEE4NTMiIGQ9Ik0gLTE0Ljc1NCA2My4yMzkgQyAtMTEuNTE0IDYzLjIzOSAtOC44MDQgNjIuMTU5IC02LjgyNCA2MC4zMjkgTCAtMTAuNjg0IDU3LjMyOSBDIC0xMS43NjQgNTguMDQ5IC0xMy4xMzQgNTguNDg5IC0xNC43NTQgNTguNDg5IEMgLTE3Ljg4NCA1OC40ODkgLTIwLjUzNCA1Ni4zNzkgLTIxLjQ4NCA1My41MjkgTCAtMjUuNDY0IDUzLjUyOSBMIC0yNS40NjQgNTYuNjE5IEMgLTIzLjQ5NCA2MC41MzkgLTE5LjQ0NCA2My4yMzkgLTE0Ljc1NCA2My4yMzkgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjcuMDA5IC0zOS4yMzkpIi8+PHBhdGggZmlsbD0iI0ZCQkMwNSIgZD0iTSAtMjEuNDg0IDUzLjUyOSBDIC0yMS43MzQgNTIuODA5IC0yMS44NjQgNTIuMDM5IC0yMS44NjQgNTEuMjM5IEMgLTIxLjg2NCA1MC40MzkgLTIxLjcyNCA0OS42NjkgLTIxLjQ4NCA0OC45NDkgTCAtMjEuNDg0IDQ1Ljg1OSBMIC0yNS40NjQgNDUuODU5IEMgLTI2LjI4NCA0Ny40NzkgLTI2Ljc1NCA0OS4yOTkgLTI2Ljc1NCA1MS4yMzkgQyAtMjYuNzU0IDUzLjE3OSAtMjYuMjg0IDU0Ljk5OSAtMjUuNDY0IDU2LjYxOSBMIC0yMS40ODQgNTMuNTI5IFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI3LjAwOSAtMzkuMjM5KSIvPjxwYXRoIGZpbGw9IiNFQTQzMzUiIGQ9Ik0gLTE0Ljc1NCA0My45ODkgQyAtMTIuOTg0IDQzLjk4OSAtMTEuNDA0IDQ0LjU5OSAtMTAuMTU0IDQ1Ljc4OSBMIC02LjczNCA0Mi4zNjkgQyAtOC44MDQgNDAuNDI5IC0xMS41MTQgMzkuMjM5IC0xNC43NTQgMzkuMjM5IEMgLTE5LjQ0NCAzOS4yMzkgLTIzLjQ5NCA0MS45MzkgLTI1LjQ2NCA0NS44NTkgTCAtMjEuNDg0IDQ4Ljk0OSBDIC0yMC41MzQgNDYuMDk5IC0xNy44ODQgNDMuOTg5IC0xNC43NTQgNDMuOTg5IFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI3LjAwOSAtMzkuMjM5KSIvPjwvc3ZnPg==');
    --icon-GristLogo: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MSIgaGVpZ2h0PSIzOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjMkNCMEFGIiBkPSJNMTAuODYyNDc0NSwwLjA5ODU5MTczNDcgTDUuMDE1NTg3NDMsMC4wOTg1OTE3MzQ3IEMyLjMxNzYzNDkxLDAuMDk4NTkxNzM0NyAwLjEyNzMwMTg2LDIuMjg4OTIwMDkgMC4xMjczMDE4Niw0Ljk4Njg0MTgzIEwwLjEyNzMwMTg2LDkuODU3ODg5NzIgTDYuMDIwMjM5OTUsOS44NTc4ODk3MiBDOC42OTI3ODUwMyw5Ljg1Nzg4OTcyIDEwLjg2MjQ3NDUsNy42ODgxMDEzMSAxMC44NjI0NzQ1LDUuMDE1NTk3NzUgTDEwLjg2MjQ3NDUsMC4wOTg1OTE3MzQ3IFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4LjEzNCAxLjE2MikiLz48cGF0aCBmaWxsPSIjMkNCMEFGIiBkPSJNMTAuODYyNDc0NSwwLjA5ODU5MTczNDcgTDUuMDE1NTg3NDMsMC4wOTg1OTE3MzQ3IEMyLjMxNzYzNDkxLDAuMDk4NTkxNzM0NyAwLjEyNzMwMTg2LDIuMjg4OTIwMDkgMC4xMjczMDE4Niw0Ljk4Njg0MTgzIEwwLjEyNzMwMTg2LDkuODU3ODg5NzIgTDYuMDIwMjM5OTUsOS44NTc4ODk3MiBDOC42OTI3ODUwMyw5Ljg1Nzg4OTcyIDEwLjg2MjQ3NDUsNy42ODgxMDEzMSAxMC44NjI0NzQ1LDUuMDE1NTk3NzUgTDEwLjg2MjQ3NDUsMC4wOTg1OTE3MzQ3IFoiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDI1LjU3IDEuMTYyKSIvPjxwYXRoIGZpbGw9IiNGOUFFNDEiIGQ9Ik0xMC44NjI0NzQ1LDAuMDk4NTkxNzM0NyBMNS4wMTU1ODc0MywwLjA5ODU5MTczNDcgQzIuMzE3NjM0OTEsMC4wOTg1OTE3MzQ3IDAuMTI3MzAxODYsMi4yODg5MjAwOSAwLjEyNzMwMTg2LDQuOTg2ODQxODMgTDAuMTI3MzAxODYsOS44NTc4ODk3MiBMNi4wMjAyMzk5NSw5Ljg1Nzg4OTcyIEM4LjY5Mjc4NTAzLDkuODU3ODg5NzIgMTAuODYyNDc0NSw3LjY4ODEwMTMxIDEwLjg2MjQ3NDUsNS4wMTU1OTc3NSBMMTAuODYyNDc0NSwwLjA5ODU5MTczNDcgWiIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTIuMDE1IDEzLjc0KSIvPjxwYXRoIGZpbGw9IiNGOUFFNDEiIGQ9Ik0xMC44NjI0NzQ1LDAuMDk4NTkxNzM0NyBMNS4wMTU1ODc0MywwLjA5ODU5MTczNDcgQzIuMzE3NjM0OTEsMC4wOTg1OTE3MzQ3IDAuMTI3MzAxODYsMi4yODg5MjAwOSAwLjEyNzMwMTg2LDQuOTg2ODQxODMgTDAuMTI3MzAxODYsOS44NTc4ODk3MiBMNi4wMjAyMzk5NSw5Ljg1Nzg4OTcyIEM4LjY5Mjc4NTAzLDkuODU3ODg5NzIgMTAuODYyNDc0NSw3LjY4ODEwMTMxIDEwLjg2MjQ3NDUsNS4wMTU1OTc3NSBMMTAuODYyNDc0NSwwLjA5ODU5MTczNDcgWiIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTIuMDE1IDI2LjMxOSkiLz48cGF0aCBmaWxsPSIjRDJEMkQyIiBkPSJNMTAuODYyNDc0NSwwLjA5ODU5MTczNDcgTDUuMDE1NTg3NDMsMC4wOTg1OTE3MzQ3IEMyLjMxNzYzNDkxLDAuMDk4NTkxNzM0NyAwLjEyNzMwMTg2LDIuMjg4OTIwMDkgMC4xMjczMDE4Niw0Ljk4Njg0MTgzIEwwLjEyNzMwMTg2LDkuODU3ODg5NzIgTDYuMDIwMjM5OTUsOS44NTc4ODk3MiBDOC42OTI3ODUwMyw5Ljg1Nzg4OTcyIDEwLjg2MjQ3NDUsNy42ODgxMDEzMSAxMC44NjI0NzQ1LDUuMDE1NTk3NzUgTDEwLjg2MjQ3NDUsMC4wOTg1OTE3MzQ3IFoiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDI1LjU3IDEzLjc0KSIvPjxwYXRoIGZpbGw9IiNEMkQyRDIiIGQ9Ik0xMC44NjI0NzQ1LDAuMDk4NTkxNzM0NyBMNS4wMTU1ODc0MywwLjA5ODU5MTczNDcgQzIuMzE3NjM0OTEsMC4wOTg1OTE3MzQ3IDAuMTI3MzAxODYsMi4yODg5MjAwOSAwLjEyNzMwMTg2LDQuOTg2ODQxODMgTDAuMTI3MzAxODYsOS44NTc4ODk3MiBMNi4wMjAyMzk5NSw5Ljg1Nzg4OTcyIEM4LjY5Mjc4NTAzLDkuODU3ODg5NzIgMTAuODYyNDc0NSw3LjY4ODEwMTMxIDEwLjg2MjQ3NDUsNS4wMTU1OTc3NSBMMTAuODYyNDc0NSwwLjA5ODU5MTczNDcgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjguMTM0IDEzLjc0KSIvPjxwYXRoIGZpbGw9IiNEMkQyRDIiIGQ9Ik0xMC44NjI0NzQ1LDAuMDk4NTkxNzM0NyBMNS4wMTU1ODc0MywwLjA5ODU5MTczNDcgQzIuMzE3NjM0OTEsMC4wOTg1OTE3MzQ3IDAuMTI3MzAxODYsMi4yODg5MjAwOSAwLjEyNzMwMTg2LDQuOTg2ODQxODMgTDAuMTI3MzAxODYsOS44NTc4ODk3MiBMNi4wMjAyMzk5NSw5Ljg1Nzg4OTcyIEM4LjY5Mjc4NTAzLDkuODU3ODg5NzIgMTAuODYyNDc0NSw3LjY4ODEwMTMxIDEwLjg2MjQ3NDUsNS4wMTU1OTc3NSBMMTAuODYyNDc0NSwwLjA5ODU5MTczNDcgWiIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjUuNTcgMjYuMzE5KSIvPjxwYXRoIGZpbGw9IiNEMkQyRDIiIGQ9Ik0xMC44NjI0NzQ1LDAuMDk4NTkxNzM0NyBMNS4wMTU1ODc0MywwLjA5ODU5MTczNDcgQzIuMzE3NjM0OTEsMC4wOTg1OTE3MzQ3IDAuMTI3MzAxODYsMi4yODg5MjAwOSAwLjEyNzMwMTg2LDQuOTg2ODQxODMgTDAuMTI3MzAxODYsOS44NTc4ODk3MiBMNi4wMjAyMzk5NSw5Ljg1Nzg4OTcyIEM4LjY5Mjc4NTAzLDkuODU3ODg5NzIgMTAuODYyNDc0NSw3LjY4ODEwMTMxIDEwLjg2MjQ3NDUsNS4wMTU1OTc3NSBMMTAuODYyNDc0NSwwLjA5ODU5MTczNDcgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjguMTM0IDI2LjMxOSkiLz48L2c+PC9zdmc+');
    --icon-ThumbPreview: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNDYiIGhlaWdodD0iNDYiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNNC4wNTc2MTcxOSw2LjM2ODE2NDA2IEw0LjA1NzYxNzE5LDUuMTYyMTA5MzggTDcuMTcyODUxNTYsNS4xNjIxMDkzOCBMNy4xNzI4NTE1Niw4LjAxMzY3MTg4IEM2Ljg3MDExNTY3LDguMzA2NjQyMDkgNi40MzE0ODA3NCw4LjU2NDYxNDc3IDUuODU2OTMzNTksOC43ODc1OTc2NiBDNS4yODIzODY0NSw5LjAxMDU4MDU0IDQuNzAwNTIzNzgsOS4xMjIwNzAzMSA0LjExMTMyODEyLDkuMTIyMDcwMzEgQzMuMzYyNjI2NDYsOS4xMjIwNzAzMSAyLjcwOTk2MzcyLDguOTY1MDA4MDggMi4xNTMzMjAzMSw4LjY1MDg3ODkxIEMxLjU5NjY3NjksOC4zMzY3NDk3MyAxLjE3ODM4NjgyLDcuODg3NTM1NDcgMC44OTg0Mzc1LDcuMzAzMjIyNjYgQzAuNjE4NDg4MTg0LDYuNzE4OTA5ODQgMC40Nzg1MTU2MjUsNi4wODMzMzY3NyAwLjQ3ODUxNTYyNSw1LjM5NjQ4NDM4IEMwLjQ3ODUxNTYyNSw0LjY1MTAzNzk0IDAuNjM0NzY0MDYyLDMuOTg4NjA5NjcgMC45NDcyNjU2MjUsMy40MDkxNzk2OSBDMS4yNTk3NjcxOSwyLjgyOTc0OTcxIDEuNzE3MTE5MzgsMi4zODU0MTgyMSAyLjMxOTMzNTk0LDIuMDc2MTcxODggQzIuNzc4MzIyNjEsMS44Mzg1NDA0OCAzLjM0OTYwNTk2LDEuNzE5NzI2NTYgNC4wMzMyMDMxMiwxLjcxOTcyNjU2IEM0LjkyMTg3OTQ0LDEuNzE5NzI2NTYgNS42MTYwNDU2OCwxLjkwNjA4NTM4IDYuMTE1NzIyNjYsMi4yNzg4MDg1OSBDNi42MTUzOTk2MywyLjY1MTUzMTgxIDYuOTM2ODQ4MjQsMy4xNjY2NjMzOCA3LjA4MDA3ODEyLDMuODI0MjE4NzUgTDUuNjQ0NTMxMjUsNC4wOTI3NzM0NCBDNS41NDM2MTkyOSwzLjc0MTIwOTE4IDUuMzU0MDA1MywzLjQ2MzcwNTQ0IDUuMDc1NjgzNTksMy4yNjAyNTM5MSBDNC43OTczNjE4OSwzLjA1NjgwMjM3IDQuNDQ5ODcxODcsMi45NTUwNzgxMiA0LjAzMzIwMzEyLDIuOTU1MDc4MTIgQzMuNDAxNjg5NTUsMi45NTUwNzgxMiAyLjg5OTU3ODY5LDMuMTU1MjcxNDQgMi41MjY4NTU0NywzLjU1NTY2NDA2IEMyLjE1NDEzMjI1LDMuOTU2MDU2NjkgMS45Njc3NzM0NCw0LjU1MDEyNjI3IDEuOTY3NzczNDQsNS4zMzc4OTA2MiBDMS45Njc3NzM0NCw2LjE4NzUwNDI1IDIuMTU2NTczNjMsNi44MjQ3MDQ5MSAyLjUzNDE3OTY5LDcuMjQ5NTExNzIgQzIuOTExNzg1NzQsNy42NzQzMTg1MyAzLjQwNjU3MjQ2LDcuODg2NzE4NzUgNC4wMTg1NTQ2OSw3Ljg4NjcxODc1IEM0LjMyMTI5MDU4LDcuODg2NzE4NzUgNC42MjQ4MzU3Miw3LjgyNzMxMTc5IDQuOTI5MTk5MjIsNy43MDg0OTYwOSBDNS4yMzM1NjI3Miw3LjU4OTY4MDQgNS40OTQ3OTA1OCw3LjQ0NTYzODg3IDUuNzEyODkwNjIsNy4yNzYzNjcxOSBMNS43MTI4OTA2Miw2LjM2ODE2NDA2IEw0LjA1NzYxNzE5LDYuMzY4MTY0MDYgWiBNOS4yMTA3NDIxOCw5IEw5LjIxMDc0MjE4LDEuODQxNzk2ODggTDEyLjI1MjczNDQsMS44NDE3OTY4OCBDMTMuMDE3NzEyMSwxLjg0MTc5Njg4IDEzLjU3MzUzMzQsMS45MDYwODY2IDEzLjkyMDIxNDgsMi4wMzQ2Njc5NyBDMTQuMjY2ODk2MywyLjE2MzI0OTM0IDE0LjU0NDQsMi4zOTE5MjU0NCAxNC43NTI3MzQ0LDIuNzIwNzAzMTIgQzE0Ljk2MTA2ODcsMy4wNDk0ODA4MSAxNS4wNjUyMzQ0LDMuNDI1NDUzNjEgMTUuMDY1MjM0NCwzLjg0ODYzMjgxIEMxNS4wNjUyMzQ0LDQuMzg1NzQ0ODcgMTQuOTA3MzU4Myw0LjgyOTI2MjU3IDE0LjU5MTYwMTYsNS4xNzkxOTkyMiBDMTQuMjc1ODQ0OCw1LjUyOTEzNTg2IDEzLjgwMzg0NDMsNS43NDk2NzQwMiAxMy4xNzU1ODU5LDUuODQwODIwMzEgQzEzLjQ4ODA4NzUsNi4wMjMxMTI4OSAxMy43NDYwNjAyLDYuMjIzMzA2MiAxMy45NDk1MTE3LDYuNDQxNDA2MjUgQzE0LjE1Mjk2MzIsNi42NTk1MDYzIDE0LjQyNzIxMTgsNy4wNDY4NzIyMiAxNC43NzIyNjU2LDcuNjAzNTE1NjIgTDE1LjY0NjI4OTEsOSBMMTMuOTE3NzczNCw5IEwxMi44NzI4NTE2LDcuNDQyMzgyODEgQzEyLjUwMTc1NTksNi44ODU3Mzk0IDEyLjI0Nzg1MjIsNi41MzQ5OTQyMSAxMi4xMTExMzI4LDYuMzkwMTM2NzIgQzExLjk3NDQxMzQsNi4yNDUyNzkyMiAxMS44Mjk1NTgsNi4xNDU5OTYzNiAxMS42NzY1NjI1LDYuMDkyMjg1MTYgQzExLjUyMzU2NjksNi4wMzg1NzM5NSAxMS4yODEwNTYzLDYuMDExNzE4NzUgMTAuOTQ5MDIzNCw2LjAxMTcxODc1IEwxMC42NTYwNTQ3LDYuMDExNzE4NzUgTDEwLjY1NjA1NDcsOSBMOS4yMTA3NDIxOCw5IFogTTEwLjY1NjA1NDcsNC44NjkxNDA2MiBMMTEuNzI1MzkwNiw0Ljg2OTE0MDYyIEMxMi40MTg3NTM1LDQuODY5MTQwNjIgMTIuODUxNjkxOCw0LjgzOTg0NDA0IDEzLjAyNDIxODcsNC43ODEyNSBDMTMuMTk2NzQ1Niw0LjcyMjY1NTk2IDEzLjMzMTgzNTQsNC42MjE3NDU1MSAxMy40Mjk0OTIyLDQuNDc4NTE1NjIgQzEzLjUyNzE0ODksNC4zMzUyODU3NCAxMy41NzU5NzY2LDQuMTU2MjUxMDcgMTMuNTc1OTc2NiwzLjk0MTQwNjI1IEMxMy41NzU5NzY2LDMuNzAwNTE5NjMgMTMuNTExNjg2OCwzLjUwNjAyMjg4IDEzLjM4MzEwNTUsMy4zNTc5MTAxNiBDMTMuMjU0NTI0MSwzLjIwOTc5NzQ0IDEzLjA3MzA0OCwzLjExNjIxMTEzIDEyLjgzODY3MTksMy4wNzcxNDg0NCBDMTIuNzIxNDgzOCwzLjA2MDg3MjMxIDEyLjM2OTkyNDgsMy4wNTI3MzQzOCAxMS43ODM5ODQ0LDMuMDUyNzM0MzggTDEwLjY1NjA1NDcsMy4wNTI3MzQzOCBMMTAuNjU2MDU0Nyw0Ljg2OTE0MDYyIFogTTE3LjA4MzU5MzcsOSBMMTcuMDgzNTkzNywxLjg0MTc5Njg4IEwxOC41Mjg5MDYyLDEuODQxNzk2ODggTDE4LjUyODkwNjIsOSBMMTcuMDgzNTkzNyw5IFogTTIwLjIzOTY0ODQsNi42NzA4OTg0NCBMMjEuNjQ1ODk4NCw2LjUzNDE3OTY5IEMyMS43MzA1MzQyLDcuMDA2MTg3MjYgMjEuOTAyMjQ0OCw3LjM1Mjg2MzQ4IDIyLjE2MTAzNTEsNy41NzQyMTg3NSBDMjIuNDE5ODI1NSw3Ljc5NTU3NDAyIDIyLjc2ODk0MzEsNy45MDYyNSAyMy4yMDgzOTg0LDcuOTA2MjUgQzIzLjY3Mzg5NTUsNy45MDYyNSAyNC4wMjQ2NDA3LDcuODA3NzgwOTMgMjQuMjYwNjQ0NSw3LjYxMDgzOTg0IEMyNC40OTY2NDgzLDcuNDEzODk4NzUgMjQuNjE0NjQ4NCw3LjE4MzU5NTA3IDI0LjYxNDY0ODQsNi45MTk5MjE4OCBDMjQuNjE0NjQ4NCw2Ljc1MDY1MDIgMjQuNTY1MDA3LDYuNjA2NjA4NjcgMjQuNDY1NzIyNiw2LjQ4Nzc5Mjk3IEMyNC4zNjY0MzgzLDYuMzY4OTc3MjcgMjQuMTkzMTAwMiw2LjI2NTYyNTQ0IDIzLjk0NTcwMzEsNi4xNzc3MzQzOCBDMjMuNzc2NDMxNCw2LjExOTE0MDMzIDIzLjM5MDY5MzEsNi4wMTQ5NzQ3MSAyMi43ODg0NzY1LDUuODY1MjM0MzggQzIyLjAxMzczMzEsNS42NzMxNzYxMiAyMS40NzAxMTg3LDUuNDM3MTc1ODggMjEuMTU3NjE3Miw1LjE1NzIyNjU2IEMyMC43MTgxNjE4LDQuNzYzMzQ0MzggMjAuNDk4NDM3NSw0LjI4MzIwNTk2IDIwLjQ5ODQzNzUsMy43MTY3OTY4OCBDMjAuNDk4NDM3NSwzLjM1MjIxMTcyIDIwLjYwMTc4OTMsMy4wMTEyMzIwNiAyMC44MDg0OTYxLDIuNjkzODQ3NjYgQzIxLjAxNTIwMjgsMi4zNzY0NjMyNiAyMS4zMTMwNTE0LDIuMTM0NzY2NDYgMjEuNzAyMDUwNywxLjk2ODc1IEMyMi4wOTEwNTAxLDEuODAyNzMzNTQgMjIuNTYwNjA5MiwxLjcxOTcyNjU2IDIzLjExMDc0MjIsMS43MTk3MjY1NiBDMjQuMDA5MTg0MSwxLjcxOTcyNjU2IDI0LjY4NTQ0NjksMS45MTY2NjQ3IDI1LjEzOTU1MDcsMi4zMTA1NDY4OCBDMjUuNTkzNjU0NiwyLjcwNDQyOTA1IDI1LjgzMjA5NjIsMy4yMzAxMzk5NCAyNS44NTQ4ODI4LDMuODg3Njk1MzEgTDI0LjQwOTU3MDMsMy45NTExNzE4OCBDMjQuMzQ3NzIxLDMuNTgzMzMxNDkgMjQuMjE1MDcyNiwzLjMxODg0ODQ2IDI0LjAxMTYyMTEsMy4xNTc3MTQ4NCBDMjMuODA4MTY5NSwyLjk5NjU4MTIzIDIzLjUwMjk5NjgsMi45MTYwMTU2MiAyMy4wOTYwOTM3LDIuOTE2MDE1NjIgQzIyLjY3NjE2OTcsMi45MTYwMTU2MiAyMi4zNDczOTcsMy4wMDIyNzc3OCAyMi4xMDk3NjU2LDMuMTc0ODA0NjkgQzIxLjk1Njc3LDMuMjg1NDgyMzIgMjEuODgwMjczNCwzLjQzMzU5MjgyIDIxLjg4MDI3MzQsMy42MTkxNDA2MiBDMjEuODgwMjczNCwzLjc4ODQxMjMgMjEuOTUxODg3MywzLjkzMzI2NzYzIDIyLjA5NTExNzIsNC4wNTM3MTA5NCBDMjIuMjc3NDA5Nyw0LjIwNjcwNjQ5IDIyLjcyMDExMzYsNC4zNjYyMTAxMSAyMy40MjMyNDIyLDQuNTMyMjI2NTYgQzI0LjEyNjM3MDcsNC42OTgyNDMwMiAyNC42NDYzODUsNC44Njk5NTM1NCAyNC45ODMzMDA3LDUuMDQ3MzYzMjggQzI1LjMyMDIxNjUsNS4yMjQ3NzMwMiAyNS41ODM4ODU3LDUuNDY3MjgzNjIgMjUuNzc0MzE2NCw1Ljc3NDkwMjM0IEMyNS45NjQ3NDcsNi4wODI1MjEwNyAyNi4wNTk5NjA5LDYuNDYyNTYyODQgMjYuMDU5OTYwOSw2LjkxNTAzOTA2IEMyNi4wNTk5NjA5LDcuMzI1MTk3MzYgMjUuOTQ2MDI5Nyw3LjcwOTMwODExIDI1LjcxODE2NCw4LjA2NzM4MjgxIEMyNS40OTAyOTgzLDguNDI1NDU3NTIgMjUuMTY4MDM1OSw4LjY5MTU2ODE0IDI0Ljc1MTM2NzIsOC44NjU3MjI2NiBDMjQuMzM0Njk4NCw5LjAzOTg3NzE3IDIzLjgxNTQ5NzksOS4xMjY5NTMxMiAyMy4xOTM3NSw5LjEyNjk1MzEyIEMyMi4yODg3OTc1LDkuMTI2OTUzMTIgMjEuNTkzODE3NSw4LjkxNzgwODA4IDIxLjEwODc4OSw4LjQ5OTUxMTcyIEMyMC42MjM3NjA2LDguMDgxMjE1MzYgMjAuMzM0MDQ5OSw3LjQ3MTY4MzY5IDIwLjIzOTY0ODQsNi42NzA4OTg0NCBaIE0yOS41ODcxMDkzLDkgTDI5LjU4NzEwOTMsMy4wNTI3MzQzOCBMMjcuNDYzMDg1OSwzLjA1MjczNDM4IEwyNy40NjMwODU5LDEuODQxNzk2ODggTDMzLjE1MTU2MjUsMS44NDE3OTY4OCBMMzMuMTUxNTYyNSwzLjA1MjczNDM4IEwzMS4wMzI0MjE4LDMuMDUyNzM0MzggTDMxLjAzMjQyMTgsOSBMMjkuNTg3MTA5Myw5IFoiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuOSI+PHBhdGggZD0iTTAgMEg0OFY0OEgweiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTEpIi8+PHBhdGggZmlsbD0iIzBFNTEyQiIgZD0iTTQzIDI2IDMgMjYgMCAyMiA0IDE4IDQyIDE4IDQ2IDIyeiIvPjxwYXRoIGZpbGw9IiNFNkU2RTYiIGQ9Ik00MCw0NiBMNiw0NiBDNC44OTUsNDYgNCw0NS4xMDUgNCw0NCBMNCwyIEM0LDAuODk1IDQuODk1LDAgNiwwIEwzMCwwIEw0MiwxMiBMNDIsNDQgQzQyLDQ1LjEwNSA0MS4xMDUsNDYgNDAsNDYgWiIvPjxwYXRoIGZpbGw9IiNCM0IzQjMiIGQ9Ik0zMCwwIEwzMCwxMCBDMzAsMTEuMTA1IDMwLjg5NSwxMiAzMiwxMiBMNDIsMTIgTDMwLDAgWiIvPjxwYXRoIGZpbGw9IiMxNkIzNzgiIGQ9Ik00NCw0MCBMMiw0MCBDMC44OTUsNDAgMCwzOS4xMDUgMCwzOCBMMCwyMiBMNDYsMjIgTDQ2LDM4IEM0NiwzOS4xMDUgNDUuMTA1LDQwIDQ0LDQwIFoiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDI1KSI+PHVzZSB4bGluazpocmVmPSIjYSIgZmlsbD0iIzAwMCIvPjx1c2UgeGxpbms6aHJlZj0iI2EiIGZpbGw9IiNGRkYiLz48L2c+PC9nPjwvc3ZnPg==');
+    --icon-Accessibility: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdW5pdmVyc2FsLWFjY2Vzcy1jaXJjbGUiPjxwYXRoIGQ9Ik04IDQuMTQzQTEuMDcxIDEuMDcxIDAgMSAwIDggMmExLjA3MSAxLjA3MSAwIDAgMCAwIDIuMTQzbS00LjY2OCAxLjQ3IDMuMjQuMzE2djIuNWwtLjMyMyA0LjU4NUEuMzgzLjM4MyAwIDAgMCA3IDEzLjE0bC44MjYtNC4wMTdjLjA0NS0uMTguMzAxLS4xOC4zNDYgMEw5IDEzLjEzOWEuMzgzLjM4MyAwIDAgMCAuNzUyLS4xMjVMOS40MyA4LjQzdi0yLjVsMy4yMzktLjMxNmEuMzguMzggMCAwIDAtLjA0Ny0uNzU2SDMuMzc5YS4zOC4zOCAwIDAgMC0uMDQ3Ljc1NloiLz48cGF0aCBkPSJNOCAwYTggOCAwIDEgMCAwIDE2QTggOCAwIDAgMCA4IDBNMSA4YTcgNyAwIDEgMSAxNCAwQTcgNyAwIDAgMSAxIDgiLz48L3N2Zz4=');


Many of our icons come from Nucleo. Here's what they have related to accessibility:

To my non-professional eye, yours looks better. But if you like any of the above better, feel free to use them.

dsagal · 2025-09-26T06:01:21Z

static/locales/en.client.json

+        "High contrast theme": "High contrast theme",
+        "Keyboard navigation": "Keyboard navigation",
+        "On a document page, keyboard navigation is first locked on the current widget.": "On a document page, keyboard navigation is first locked on the current widget.",
+        "On document pages, each [widget]({{supportPageUrl}}) is a region that can receive focus.": "On document pages, each [widget]({{helpWidgets}}) is a region that can receive focus.",


The placeholders got out of sync here, and the widget link appears broken because of it.

oops, sorry… thanks for being more thorough than me 🙈

dsagal · 2025-09-26T06:13:31Z

app/client/ui/OpenAccessibilityModal.ts

+
+const cssShortcutRow = styled('li', `
+  display: flex;
+  align-items: center;


I think align-iterms: baseline would make it look more aligned. Related, I noticed that the two shortcuts that appear in one line look misaligned and have different heights (I think because of the ⌘ symbol). Setting a suitable line-height on them should make them the same.

Thanks for the feedback, you're right!

dsagal · 2025-09-26T06:16:18Z

app/client/ui/OpenAccessibilityModal.ts

+  &:last-child {
+    margin-bottom: 0;
+  }
+  ${nestedLinkStyles}


Rather than copy css rules for links into other css rules, I think it's better to use css classes. One way is to have cssNestedLinks; then this could be defined as cssSection = styled(cssNestedLinks, "...") (it would just be an element with both classes). Or when creating the element, you could add the extra class manually, like cssSection(cssNestedLinks.cls(''), ...content...)

Oh sure, way better like this thanks.

- fine-tune sizing of styled keys - fix widget anchor link - tiny refactor on nested link css

github-actions · 2025-09-26T12:26:01Z

Deployed commit 9d7dbfa6959107354292bf906e957b6c6ebe219e as https://grist-manuhabitela-grist-core-a11y-modal.fly.dev (until 2025-10-26T12:23:48.035Z)

manuhabitela · 2025-09-26T12:58:10Z

Should be better now :) kept the icon as is as I agree with you Dmitry.

dsagal

Looks good. Thank you!

manuhabitela · 2025-09-26T22:39:37Z

Thanks 🎉

manuhabitela requested a review from fflorent July 28, 2025 11:48

manuhabitela added gouv.fr Accessibility labels Jul 28, 2025

manuhabitela added this to French administration Board Jul 28, 2025

manuhabitela moved this to Needs Internal Feedback in French administration Board Jul 28, 2025

fflorent added the preview Launch preview deployment of this PR label Jul 29, 2025

manuhabitela force-pushed the a11y-modal branch from 1e86fba to 49cfda0 Compare July 30, 2025 11:48

manuhabitela force-pushed the a11y-modal branch from 49cfda0 to 402610f Compare August 6, 2025 13:15

manuhabitela force-pushed the a11y-modal branch from 402610f to 37411c9 Compare August 6, 2025 14:55

manuhabitela force-pushed the a11y-modal branch from 37411c9 to b4ebd1c Compare August 12, 2025 12:43

manuhabitela requested a review from hexaltation August 12, 2025 12:44

manuhabitela force-pushed the a11y-modal branch from b4ebd1c to c230fa9 Compare August 12, 2025 14:00

manuhabitela force-pushed the a11y-modal branch from c230fa9 to ab8a1be Compare August 13, 2025 07:29

hexaltation approved these changes Aug 14, 2025

View reviewed changes

manuhabitela force-pushed the a11y-modal branch from ab8a1be to 533d26a Compare August 19, 2025 12:21

manuhabitela moved this from Needs Internal Feedback to Needs feedback in French administration Board Aug 19, 2025

georgegevoian self-requested a review August 19, 2025 18:06