Skip to content

a11y: light & dark mode checkbox ambiguous on current state ("checked") #6665

@JoshuaKGoldberg

Description

@JoshuaKGoldberg

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

Right now the 🌞/🌜 light/dark mode toggle checkbox has the aria-label "Switch between dark and light mode". "Checked" and "not checked" are ambiguous terms without more context because some websites default to dark mode and/or don't respect system defaults.

I realize it might seem at first like the group of people who want a screenreader and care about light vs dark mode might seem small. A couple quick scenarios that come to mind:

  • Some folks such as low vision or with reading difficulties use screenreaders to assist with difficult-to-understand pages
  • Some folks can't see the website in one mode, and can only see it in the other

Steps to reproduce

  1. Open a screenreader such as NVDA on Windows or VoiceOver on Mac
  2. Put screenreader/text focus on the light/dark mode toggle

Expected behavior

I'm not an expert here, but maybe a message like...

switch from light to dark mode checkbox, not checked

...or maybe use a button instead of a checkbox behind the scenes?

switch between light and dark mode checkbox (current value light)

Actual behavior

The narration by default in light mode is roughly:

switch between light and dark mode checkbox, not checked

Your environment

Reproducible demo

https://typescript-eslint.io

Self-service

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its executiondifficulty: starterIssues that are starter difficulty level, e.g. minimal tweaking with a clear test plan.status: accepting prThis issue has been accepted, and we are looking for community contributors to implement this

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions