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

[JoshuaKGoldberg]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Following up from #6665: The color mode toggle now does correctly indicate what its state is with its label. But, when you activate it while using a screenreader, nothing narrates that it switched.

Discussed on stream with @BenDMyers on Twitch: https://www.twitch.tv/videos/1498962341.

Reproducible demo

https://typescript-eslint.io

Steps to reproduce

1. Activate a screenreader such as NVDA or VoiceOver
2. Tab over to the light/dark mode toggle
3. Press Enter to trigger it

Expected behavior

There should be a narration, such as what's provided by aria-pressed.

See more here: https://sarahmhigley.com/writing/playing-with-state

Actual behavior

No narration.

Your environment

• Public source code: https://github.com/typescript-eslint/typescript-eslint
• Public site URL: https://typescript-eslint.io/
• Docusaurus version used: 2.0.0-beta.21
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 102
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

I'm not sure how we are to fix this. aria-pressed definitely doesn't seem like a fit. Would aria-live="assertive" help?

[BenDMyers]

aria-pressed could be a fit if the toggle button's name were something like "Enable dark mode" — that way, as you toggle dark mode, you'd get announcements along the lines of "Enable dark mode, pressed" or "Enable dark mode, not pressed." Since aria-pressed is an ARIA state attribute, it should be reliably announced when changed, unlike the accessible name as the linked Sarah Higley article points out.

The button itself probably shouldn't receive aria-live, since you'll have a mismatch of roles. If Docusaurus already has a mechanism for aria-live announcements, that could work.

[Josh-Cena]

Yes, but our button is light/dark instead of dark/not dark, so pretty sure that's not aria-pressed. I'm just not sure how to force the screen reader to announce the change in button title.

[noobyogi0010]

@Josh-Cena I would like to work on this issue if no one else is already working on it.
Thanks!

[Josh-Cena]

@noobyogi0010 Since it hasn't had any activities in the last month, you can assume no-one is working on it and just go ahead.

[noobyogi0010]

@Josh-Cena Okay, I'll get started with it.
Thanks!

[noobyogi0010]

@Josh-Cena
Will something like this be a good fix for this issue?
(The red underlined text)

I used aria-pressed and set it as false for dark mode and true for light mode.