Skip to content
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

Fix page changes not being announced by assistive technology when navigating using the client-side router #5288

Merged
merged 21 commits into from
Oct 29, 2024
Merged

Fix page changes not being announced by assistive technology when navigating using the client-side router #5288

merged 21 commits into from
Oct 29, 2024

Conversation

JeffersonBledsoe
Copy link
Member

@JeffersonBledsoe JeffersonBledsoe commented Oct 7, 2023 •
edited
Loading

Create a mutation observer on client-side load that tracks when the <title> element contents changes and updates an aria live region to announce the page change. Needs cross-browser and cross-screen reader testing

Fixes #4724

TODO

  • How should we handle focus after page change?
  • History API isn't listened to.

@netlify
Copy link

netlify bot commented Oct 7, 2023 •
edited
Loading

✅ Deploy Preview for volto ready!

Name Link
🔨 Latest commit 317d5d7
🔍 Latest deploy log https://app.netlify.com/sites/volto/deploys/65216b58341e5600089c34e6
😎 Deploy Preview https://deploy-preview-5288--volto.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@JeffersonBledsoe JeffersonBledsoe changed the title WIP: title change announcements using MutationObserver (needs testing) Fix page changes not being announced by assistive technology when navigating using the client-side router Feb 14, 2024
@netlify Netlify
Copy link

netlify bot commented Jul 2, 2024 •
edited
Loading

✅ Deploy Preview for plone-components canceled.

Name Link
🔨 Latest commit 49b5d7e
🔍 Latest deploy log https://app.netlify.com/sites/plone-components/deploys/6720b974a01fc50008abf1c5

@JeffersonBledsoe JeffersonBledsoe marked this pull request as ready for review July 2, 2024 10:33
@JeffersonBledsoe
Copy link
Member Author

@plone/volto-accessibility Could we test this / discuss the implementation?

@ichim-david
Copy link
Member

hey @JeffersonBledsoe I don't have time until the wk busy with some bugs :( I added a calendar entry so I don't forget about it :)

@ichim-david ichim-david added the 99 tag: UX Accessibility Accessibility issues label Jul 21, 2024
@ichim-david ichim-david self-requested a review July 21, 2024 07:01
@JeffersonBledsoe JeffersonBledsoe self-assigned this Sep 24, 2024
@ichim-david
Copy link
Member

Status report on testing the feature as part of the Salamina sprint:

  1. We've tested https://volto.demo.plone.org/ navigating different urls using the keyboard
    and notice the lack of announcement that we have changed url.
    This was using VoiceOver on Mac and NVDA on Windows
  2. We've tested the change on Windows and Mac and heard the announcement of the title
    which worked until we played with the browser history navigation that Jeff handled today in
    86d5b6b
  3. We tested https://www.gov.uk where we heard the location change although it was challenging at times
    due to the combination of browsers or screen reader technology, it was easier to hear on NVDA then VoiceOver

Tomorrow we will hopefully talk with the A11y expert that Red Turtle has asked to participate and hopefully get some
feedback also from him on this proposal.

@JeffersonBledsoe
Copy link
Member Author

After further discussion with an accessibility consultant at the Salamina sprint, it was concluded that the current behaviour is acceptable. Only with more user testing can we concretely decide what to do with focus and so leaving the focus where it is on page change is an acceptable behaviour for now.

@JeffersonBledsoe
Copy link
Member Author

@ichim-david This is finally ready! Not sure if we need review from a non-a11y perspective, I'll leave that up to you

ichim-david
ichim-david requested changes Sep 26, 2024
View reviewed changes
Copy link
Member

@ichim-david ichim-david left a comment

Choose a reason for hiding this comment

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

@JeffersonBledsoe you have locking changes that doesn't belong to this pull request and you also set it.only on locking.js file

@ichim-david
Copy link
Member

@JeffersonBledsoe you have locking changes that doesn't belong to this pull request and you also set it.only on locking.js file

@JeffersonBledsoe you probably needed to change the selector to be more specific, but it.only shouldn't be there still

@JeffersonBledsoe
Copy link
Member Author

Good catch on the .only! The other changes are relevant. There are multiple alert on the page at times now so the tests that assumed there was only one need updated

@JeffersonBledsoe
Copy link
Member Author

JeffersonBledsoe commented Sep 27, 2024 •
edited
Loading

@ichim-david I applied the fix we discussed at the sprint. It doesn't seem to impact anything and the new fixed behaviour is good but is a good safeguard anyway incase somebody does end up with focus on it somehow

@ichim-david ichim-david requested a review from a team October 15, 2024 09:29
@JeffersonBledsoe JeffersonBledsoe requested a review from a team October 22, 2024 09:29
davisagli
davisagli approved these changes Oct 24, 2024
View reviewed changes
Copy link
Member

@davisagli davisagli left a comment

Choose a reason for hiding this comment

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

LGTM. Nice feature.

@ichim-david ichim-david merged commit e5b8a40 into main Oct 29, 2024
67 of 68 checks passed
@ichim-david ichim-david deleted the screenreader-page-change branch October 29, 2024 11:18
sneridagh added a commit that referenced this pull request Oct 30, 2024
@sneridagh
Merge branch 'main' into prepareforfinal
05f10f0 
* main: (111 commits)
  Moved `applyBlockDefaults` one component up so the style is computed correctly (#6451)
  Fix useSelector is returned a different result when called with the s… (#6450)
  Fix page changes not being announced by assistive technology when navigating using the client-side router (#5288)
  BlockStyleWrapper aware of block themes (#6445)
  A11y: Wrap ToC Block within nav tag (#6084)
  Fix backend error when there is no query supplied (#6423)
  Added upgrade guide fix for HMR (#6446)
  Fix CSS lint in Volto Slate (#6444)
  Release 18.0.0-alpha.47
  Release generate-volto 9.0.0-alpha.20
  Release @plone/scripts 3.7.0
  Release @plone/registry 2.0.0-alpha.0
  Improve @plone/registry release-it config
  `@plone/registry` as ESM module, move to TS, complete documentation (#6399)
  [Next.js] Better Vercel deployment (#6441)
  Replace all `yarn` appearences with `pnpm` (#6433)
  Add deprecation notices to the Upgrade guide (#6426)
  Clean up #6422 (#6443)
  Rename page title from Frontend to Volto UI (#6438)
  URL-Management control panel: Add missing translations (#6436)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pnicolli pnicolli pnicolli left review comments

@Wagner3UB Wagner3UB Wagner3UB approved these changes

@ichim-david ichim-david ichim-david approved these changes

@davisagli davisagli davisagli approved these changes

Assignees

@JeffersonBledsoe JeffersonBledsoe

Labels
24 status: ready 99 tag: UX Accessibility Accessibility issues
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Page changes are not announced over Screen reader (WCAG 2.4.2 failure)
5 participants
@JeffersonBledsoe @ichim-david @davisagli @pnicolli @Wagner3UB