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.

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

fix(theme): announce theme switches #8174

Merged
merged 2 commits into from
Oct 5, 2022
Merged

Conversation

mturoci
Copy link
Contributor

@mturoci mturoci commented Oct 4, 2022

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

Added aria-live attribute that indicates the element will be updated in future. This effectively solves issue as the original aria-label is read on every button submission, compared to be read just once as before.

Test Plan

Manual testing using VoiceOver screen reader on MacOS.

Test links

Deploy preview: https://deploy-preview-8174--docusaurus-2.netlify.app/

Related issues/PRs

Closes #7667

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Oct 4, 2022
@mturoci mturoci changed the title fix: Announce theme switches when using screen reader. #7667 fix(theme): announce theme switches when using screen reader. #7667 Oct 4, 2022
@netlify
Copy link

netlify bot commented Oct 5, 2022

[V2]

Name Link
🔨 Latest commit
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/633db14acaee251138527892
😎 Deploy Preview https://deploy-preview-8174--docusaurus-2.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 settings.

@netlify
Copy link

netlify bot commented Oct 5, 2022

[V2]

Name Link
🔨 Latest commit a6e976f
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/633db233f5faed000874992c
😎 Deploy Preview https://deploy-preview-8174--docusaurus-2.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 settings.

@slorber
Copy link
Collaborator

slorber commented Oct 5, 2022

Hey

Just learned VoiceOver 101 to test this 😄

What I understand is that before the aria-label would be read again but not on space / enter, but only when pressing voiceover ctrl+opt+space

After this change it announce the chance with both space / enter / ctrl+opt+space so it looks better to me 👍

Also reading aria-live docs, that seems like an appropriate usage to me 👍

Thanks

@slorber slorber merged commit 44af538 into facebook:main Oct 5, 2022
@slorber slorber added pr: bug fix This PR fixes a bug in a past release. to backport This PR is planned to be backported to a stable version of Docusaurus labels Oct 5, 2022
@github-actions
Copy link

github-actions bot commented Oct 5, 2022

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 60 🟢 98 🟢 100 🟢 100 🟠 80 Report
/docs/installation 🟠 71 🟢 100 🟢 100 🟢 100 🟢 90 Report

@Josh-Cena Josh-Cena changed the title fix(theme): announce theme switches when using screen reader. #7667 fix(theme): announce theme switches Oct 5, 2022
@slorber
Copy link
Collaborator

slorber commented Oct 12, 2022

I think there's a remaining issue so re-opened there: #7667 (comment)

slorber added a commit that referenced this pull request Oct 28, 2022
…8174)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
@slorber slorber added backported This PR has been backported to a stable version of Docusaurus and removed to backport This PR is planned to be backported to a stable version of Docusaurus labels Nov 2, 2022
@slorber slorber mentioned this pull request Jan 25, 2023
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backported This PR has been backported to a stable version of Docusaurus CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

a11y: light & dark mode checkbox doesn't announce state switches
3 participants