search

w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.18k stars 311 forks source link

Accordion: add example which includes an extra button #1471

Open jnurthen opened 3 years ago

jnurthen commented 3 years ago

the accordion pattern states

In some accordions, there are additional elements that are always visible adjacent to the accordion header. For instance, a menubutton may accompany each accordion header to provide access to actions that apply to that section. And, in some cases, a snippet of the hidden content may also be visually persistent.

There should be an example explaining where in the DOM structure this content should be placed. My assumption is that it should be between the header/expand button and the accordion content but outside the header element.

carmacleod commented 3 years ago

Good idea for an example. It should also allow all panels to be closed or open, i.e. the current example enforces precisely one panel at a time (which has a bit of an awkward feel, particularly with that disabled button in there), so need to show an alternative to that.

Regarding where to put the overflow menubutton, I wonder if (since HTML headings allow button content and since heading role allows name from content or author), it could conceivably go inside the header as a sibling of the expand/collapse button? (of course, we would need to try both ways - button-after-heading and button-in-heading - with screen readers to see which one has better support and make sure the buttons don't get "flattened" into the heading's name. May need to provide a name from author). Anyhow, just a thought.

carmacleod commented 3 years ago

Ok, so allowing all panels to be closed or open (and even providing a UI method to expand all/collapse all) has already been asked for multiple times: https://github.com/w3c/aria-practices/issues/616 and https://github.com/w3c/aria-practices/issues/304#issuecomment-281832939. In fact, apparently the current example even has flags that can be modified by editing the javascript (allowToggle and allowMultiple), which is totally un-obvious and needs to be surfaced in the example UI.

Nonetheless, I feel that any new accordion example needs to allow all panels to open and close by default (no flags).