Dark Mode Button - Changing accessible name

[Gary Byrne]

As it stands the button toggles from aria-pressed="false" and aria-label="Enable dark mode" to aria-pressed="true" and aria-label="Disable dark mode" but we should not change the accessible name content.

References:

1. Hidde De Vries How I built a dark mode toggle

For toggle buttons, it is important that the content doesn't change. As the button text, I have used “Toggle dark mode”. If we would update the label of the button from “Turn on light” to “Turn on dark”, we kind of have a toggle (as MDN suggests), but that way, it wouldn't be recognised by the browser and set in the accessibility tree to be a toggle, and, because of that, not announced as a toggle by screenreaders.

Resolution:
Leave the aria-label as "Toggle Dark Mode"