@katjadanilova
Posted
Hi!
Your solution looks really good. Light and dark mode switch is a very nice additional touch to the whole design, and your dark mode colours look neat!
Visually, I haven't noticed any problems, and my eye just caught some issues in the accessibility report. Here is an idea:
- I believe your
aria-live="polite"is the one that gives the first error in the report. Here is an article about using this property: https://bitsofco.de/using-aria-live/, and I am not sure you have a good use case for it. It might be that you rather want to have a dynamic value foraria-labelthat would say "Switch to light theme" or "Switch to dark theme" respectively.
Marked as helpful
@mobalti
Posted
@katjadanilova
Hi!
Thank you, Katja, for your valuable feedback
The use of aria-live="polite" is to notify screen readers of updates to the aria-label, In the case of this button, the announcement will be "light" or "dark" depending on the current value of the aria-label.
@katjadanilova
Posted
@mobalic I thought so, yes. Out of curiosity I tried using your app with a screen reader on (voice over), and didn't get a separate announcement when the theme changed - I would assume that because it is a button, when the change occurs, user is still on the button, so there is nothing to announce in addition to the button click sound; or aria-live isn't supported on buttons. aria-label doesn't change either - it is announced once, when user first clicks on the button and it says "auto", because aria-label is an attribute that is accessible only for screen readers, but it acts just as a label, it's not related to aria-live.
My theory would be (I haven't tried it), that if you still want this functionality, aria-live="polite" should be set on a card or header, but a simpler solution would be to remove it at all, and just stick with a dynamic aria-label.
Thank you for this case, it has been the most interesting for me so far on this platform!
Marked as helpful
