@mattstuddert
Posted
Awesome work on this challenge! It's great to see you learning and focusing on WAI-ARIA. It's such an important area that many people brush over, so keep at it 🙂
With the opacity issue, are you saying the button should be slightly transparent when someone adds "0" as a value? By looking at your code, it seems you're trying to manually set a lot of things instead of letting the browsers do the heavy lifting. For example, you've got min and max values on the number inputs, but you've added novalidate to the forms, which mean the attributes will be ignored.
Your forms.forEach is also pretty big. I'd recommend breaking code out into smaller, reusable, named functions wherever possible. It will make your code much easier to reason about.
I noticed that once you select a reward, it's not possible to tab to any other rewards within the modal. So if I selected the first award but then changed my mind to the last reward, I wouldn't be able to update my selection if I navigate using my keyboard.
I mentioned in Slack that if this were a real-world project, you'd typically use an accessible modal package like a11y-dialog. You could try incorporating something like that into the project to practice building a fully-tested, robust modal popup. Completely optional, of course, but I'm sure it would be worth the effort!
I hope this helps. Keep up the great work! 👍
Marked as helpful
@Sloth247
Posted
@mattstuddert Thank you very much for your comments.
-
Opacity issue: I would like to make entire container (
.main__project-details-pledge-item) blurry for reward with amount "0". That means border and texts must have opacity: 0.5 as I set in.disable-pledgein my_main.scssfile. Currently only button gets blurry. I tried different ways many times but it does not work. -
"I noticed that once you select a reward, it's not possible to tab to any other rewards within the modal. " You can select other rewards with down arrow key on keyboard. For radio buttons, only down arrow key is working but is it wrong? (I am not sure what is correct).
-
11y-dialog: I thought it is kind of software or something, but you mean I copy some codes from the website? I mentioned [this smashing magazine] (https://www.smashingmagazine.com/2021/07/accessible-dialog-from-scratch/) and this github solution, and mostly copied their methods into my VS code. However it did not work for me and I do not know why 🙄
Sorry it may be too much to ask, but it was very good practice for me to sharpen my JS skills.
@mattstuddert
Posted
@Sloth247, you're welcome!
- I wouldn't recommend blurring the content, as you'd still want people to be able to read it. Changing the button looks when there are no rewards left, as you have done, is fine.
- You'd expect to be able to tab through the items, and the focus states should follow the order of the focusable elements on the page. If you're manually forcing a navigation path, then that's usually a sign you're doing something not quite right.
- Feel free to leave that and maybe tackle it on a future project. You'd typically use the npm package or something to pull it into your project. But seeing as you're using plain JS, there's no need to over-engineer it.
Keep up the great work! It's awesome you're paying so much attention to accessibility. Keep learning about it and with each project you'll get better and better 🙂
Marked as helpful
