Should accordions work without JavaScript in Astro?

[garyb1]

I'm relatively new to Astro. I had created Issue #70 for this but wanted to ask here in the discussions.

The idea was that we could expose the heading and the content if JS was turned off. Then enhance that when JS is enabled by using the accordion pattern?

[markteekman]

Great thoughts on the topic @garyb1! I've been looking around a bit online on what types of solutions are valid for this. Seems like pretty recently it's possible to detect if the user has JavaScript disabled with a CSS media query, quite interesting: https://www.stefanjudis.com/blog/how-to-detect-disabled-javascript-in-css/. You could use that to open the accordions if that's the case.

Although I don't have the exact statistics there are very very few users who have JavaScript disabled. And since accessibility relies quite a bit on JavaScript being enabled (modals, focus traps, keyboard navigation, menu dropdows, toggle buttons) it would be near impossible to provide alternatives for those use cases. I think it's save to assume that people who need assistive technology have JavaScript enabled by default to make the most of us programmers who put in the effort to make our websites as accessible as possible.

I do like the thought of progressive enhancement but I don't know how valid it is in this case 🤔 Although it wouldn't hurt implementing those media queries 😄

[garyb1]

hey @markteekman

Just a thought, but what about just starting with a heading and content? then updating the component with JS .. if JS was disabled that code wouldn't be triggered. I vaguely remember a web component Andy Bell made a few years ago using Shadow DOM that did this.

Actually I found an example from Scott O'Hara on Progressively Enhanced ARIA Accordions

[garyb1]

Any objections to me trying it over the next few days and showing you in a draft PR what that might look like?

[markteekman]

@garyb1 not at all, it's an open source project after all 😊

[garyb1]

Apologies Mark. Just didn't get around to this. Might try get some time over the coming weeks to look at it again.

[markteekman]

No worries @garyb1 and no rush! 😊