Design comparison
Solution retrospective
Have used useReducer hook for the state updates. Have used data attribute for light/dark theme.
What challenges did you encounter, and how did you overcome them?Had good learning experience in understanding the useReducer hook and updating the state variables.
What specific areas of your project would you like help with?I need help in navigating the app through keyboard.
Community feedback
- @ortalyartsPosted 6 months ago
Hey @Memeena!
Congratulations on completing the challenge!
To navigate the page with the keyboard use: Tab / Shift+Tab, Space, Arrows and Enter keys. This navigation is only available through interactive elements (a, button, input etc.).
So the easiest way to make the elements accessible via keyboard is to use the native html interactive elements, like <a> or <button>.
You used <button> elements for the question page, so I could navigate the page using the keyboard. But for the start page (when selecting the subject) you used <div><p> which are non-interactive. Why not changing it to be like the question page?
The other (less preferred!) option is to make a non-interactive element interactive. You can read more here.
Also, for better accessibility, I would suggest to group the buttons in <ul> list.
One more little bug: it looks like the paths to the icons (incorrect / correct answer) are wrong, because they don't show up.
Above this, you did a good job!
I hope you find this helpful! Cheers 🍭
0
Please log in to post a comment
Log in with GitHub
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