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

Community feedback

• 

  Katja Danilova•340

  @katjadanilova

  Posted over 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.

  02

  Marked as helpful
• 

  Arby•170

  @mobalti

  Posted over 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.

  11