Can Accordion accept buttons in the header?

[e-cooper]

The ARIA spec doesn't seem to mention this explicitly, but it doesn't seem like it goes against the spec either. Right now, the up and down arrows go to the next accordion header, but the left and right arrow keys aren't used in the default keyboard delegate. It seems like if left and right were supported, it would allow for additional focusable elements in the header.

Assuming there is no reason not to do this, what's the recommended approach for adding such functionality?

[LFDanLu]

Interesting question, https://www.w3.org/TR/wai-aria-practices-1.2/#accordion seems to indicate that a menu button may exist in the Accordion header to provide actions for that section so it seems like this is an acceptable use case at least from an aria perspective. Is your use case something like that?

As for how to add such functionality: at the very least Accordion would have to move away from using useSelectableList since, as you noted, ListKeyboardDelegate only handles getting keys above and below the current key hence why left and right aren't supported. Perhaps it would move to using useGrid (where we would consider the Accordion as a single column grid) + GridKeyboardDelegate and the AccordionItem would use useGridCell and useGridRow to facilitate moving focus to the Accordion header's focusable elements. Just some rough thoughts, would need to double check that this is an appropriate pattern for an Accordion. cc @majornista

[e-cooper]

Yes, exactly. It would be for actions related to the section such as editing or deleting.

[majornista]

We would probably need to add slots to the accordion items. Currently the item.props.title maps to a button element within the accordion item header. We can't simply overload the item.props.title with additional buttons, because we would end up with nested buttons, which is an accessibility problem.

[majornista]

I wouldn't move to useGrid. The WAI-ARIA 1.2 implementation of accordion does not use roving tabIndex, so the additional action buttons within the header should simply be included in the tab navigation order for the page, between the expand/collapse button and the region that it controls.