Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

#accessibility#react#vite
Arby 170

@mobalti

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there! 👋 This is my solution for the challenge. 🚀

  • I have added a Light and Dark Mode feature and a theme switch component.
  • To represent the data, I created an array of objects that were then mapped to individual <card> components.

Built with:

  • React JS
  • CSS Modules
  • Open Props
  • Vite

Any suggestions on how I can improve are welcome!

Community feedback

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

Marked as helpful

0

Arby 170

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

0

@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

0
Arby 170

@mobalti

Posted

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

@katjadanilova

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord