Using vite with vanilla js, html, and css

What are you most proud of, and what would you do differently next time?

I think it turned out well. I do like the design. I don't think I would do much differently save the feedback I get from here.

What challenges did you encounter, and how did you overcome them?

Understanding how to make an accessible accordion based on the aria authoring practices guide and translating it to this specific accordion based on the example given there. Also understanding how to create css selectors based on different named panel-controls buttons and selecting a sibling element related to the aria-expanded attribute having a true value and displaying the sibling panel.

I found out how to at least do the bare-minimum from the authoring guide and eventually added keyboard navigation using the up and down arrow keys while attempting to make the html as semantic as possible and allowing native button controls using tabbing.

eventually i found out how to select a class using the [class*=] selector

[class*='panel-control-'][aria-expanded='false'] {
  /* do something */
}

and to select a parent that has a sibling based on the design from the authoring practice guide

h2:has([class*='panel-control-'][aria-expanded='true']) + .hidden {
  display: block;
}

in the case of [class*='panel-control-'], it will match any panel-control-* wildcard ie: panel-control-1, panel-control-2, etc. Adding the [aria-expanded='true'] will select the panel control that is currently expanded and selecting the .hidden class on the image to swap out the + and - image icons associated with the button based on the expanded state.

What specific areas of your project would you like help with?

I would like help with two areas...

1. I added functionality for the up and down arrow keys to be able to navigate the accordion giving focus to the next button that needs it (or the previous depending on the button). It almost acts as a focus trap when reaching the very first or very last button element in the article. However, tabbing away will focus outside of the accordion as it should. Would this be considered expected behavior or does something need to change?

2. The associated panels are just paragraph elements. According to the authoring guide, it doesn't appear that there is any hidden attribute on them to indicate to screen readers that this is a hidden panel element. Does this need to be added? I didn't add a display or visibility property to the selectors. I only changed the height to 0 to give the hidden effect. Is this ok?

Are there other things I can do to improve my accessibility?