I'm afraid this is inaccessible because of the html. Try and interact with it with a keyboard and you'll see nothing works. This is because the challenge is to build a disclosure UI pattern — Otherwise known as accordion, conditional reveal, or dropdown. It must be built using a button element with aria-expanded on it as the trigger, where the aria boolean value would toggle on click. That's actually all the JS needs to do (change aria-expanded) because everything else can be done with CSS if you want to use the aria-expanded attribute as your style hook.
Have a read of the tutorial post I've written about the disclosure (accordion) pattern. I hope that helps.
Other tips
- Indent code consistently so it's easier to read and spot bugs. Your code editor can even do this formatting automatically for you with prettier.
- headings should always go in order. Try not to skip heading levels.
- use JS to toggle attribute values or classes. Don't use it for inline styles if possible. The separation of concerns principle is a sound one — let CSS handle styling, let JS handle interactions.
- try to avoid using var in JS. Prefer const or sometimes let.
- Be very careful with how much youre using em. Unless you want a property to specifically scale with its localised font size context then prefer rem (or even px if you actually want a fixed value, no matter what the user's font size preference).
- try to avoid complex css selectors like direct child selectors if possible. Keep CSS specificity low. Place classes directly on what you want to style and stick to single class selectors whenever you can. (Using aria-expanded would mean a few complex selectors, but the benefits outweigh the specificity there - because it would bake the accessibility into the code (the styles would only work when the aria state changes correctly, and that is a very good thing!)
Marked as helpful
1
