Notifications page using ReactJS and Open Props + (Dark/Light Mode)

Community feedback

• 

  Katja Danilova•340

  @katjadanilovaPosted almost 2 years ago

  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 for aria-label that would say "Switch to light theme" or "Switch to dark theme" respectively.

  Marked as helpful

  0

  ---

  

  Arby•170

  @mobaltiPosted almost 2 years ago

  @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.

  0

  

  Katja Danilova•340

  @katjadanilovaPosted almost 2 years ago

  @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

  0
• 

  Arby•170

  @mobaltiPosted almost 2 years ago

  Hi @katjadanilova, I would like to update you on my progress. Upon further investigation, I realized that instead of updating the aria-label attribute when the button was clicked, I had mistakenly modified the aria-live attribute value. I have now resolved the issue and the app is fully functional for screen readers. I invite you to test it.

  I am truly grateful for your assistance, and I would also like to express my appreciation to the Frontend mentor team for providing me this opportunity.

  1

  ---

  

  Katja Danilova•340

  @katjadanilovaPosted almost 2 years ago

  @mobalic superb! Works wonders. I learned something new - thank you!

  1