FAQ Accordion using Astro and Sass

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

I attempted to create an accessible accordion. To achieve this, I used the details and summary elements, and added some aria attributes to link the elements together. Additionally, I utilized components to construct the HTML.

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

Making the accordion accessible was very challenging. For the first time, I used some new elements and tried to link these elements together, while also adopting a component-based approach. Additionally, I tried to use a background image for the page with the picture element. Since there was an overlap with the content, I used a grid layout to resolve this issue.

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

I think the area where I need the most help is accessibility. One problem with accessibility is that the screen reader NVDA I used does not read content in Firefox, and I’m not sure why. Initially, when I did not use aria-polite, it did not read the content after expanding, even though I have aria-expanded in my code and linked my summary to the content with aria-controls. I want to know how I can solve this and what the problem in my code might be.