Dark Mode Toggle: Add Role
0xTheProDev opened this issue · comments
@0xTheProDev, thanks for submitting the issue! There are certainly more ways to approach this (as it is with many things in accessibility!). This button uses the approach of Hidde de Vries which was recently updated thanks to @garyb1 #68. 🙂
In this case, we're using a standard button element, which exists in HTML. But there is one detail about it that doesn't exist in HTML, which is that this is the type of button that toggles. We can add this by setting the aria-pressed with a "true" or "false" value.
This brings a known benefit to end users, specifically to users of screenreaders, who will now hear this is a toggle button. For toggle buttons, it is important that the content doesn't change. As the button text, I have used “Toggle dark mode”.
More on it here: https://hidde.blog/dark-light/