Yes there are already lots of issues open about accordion. This is a different issue and while I will focus on the accordion example, we can apply this to other disclosure patterns especially where a landmark is invovled.
I made a couple of modifications to the accordion example: https://codepen.io/AutoSponge/pen/qEayeGO
- instead of
hidden, hidden:until-found
- instead of
[hidden] {display:none} for all browsers, target browsers that don't support content-visibility (with an IE-specific hack just in case)
- add
tabindex=-1 to the landmarks/panels when collapsed
- add a
focus handler to the panels
What this does (use cases):
- Keyboard users can
CTRL+F to the hidden panels (e.g., "City")
- AT users can use landmark menus (e.g., VoiceOver Roter) to navigate to the proper form section AND it will open
I can put up a PR if there's some consensus that this is strictly an improvement over the current example and in no way makes things worse for folks.
Yes there are already lots of issues open about accordion. This is a different issue and while I will focus on the accordion example, we can apply this to other disclosure patterns especially where a landmark is invovled.
I made a couple of modifications to the accordion example: https://codepen.io/AutoSponge/pen/qEayeGO
hidden,hidden:until-found[hidden] {display:none}for all browsers, target browsers that don't supportcontent-visibility(with an IE-specific hack just in case)tabindex=-1to the landmarks/panels when collapsedfocushandler to the panelsWhat this does (use cases):
CTRL+Fto the hidden panels (e.g., "City")I can put up a PR if there's some consensus that this is strictly an improvement over the current example and in no way makes things worse for folks.