Consider adding an expandable "region"

[scottaohara]

From the ARIA WG call today, we talked about a clickable "region / card / section of content" that expanded/collapsed to reveal more or less content.

The context being that Aaron was discussing a use case where the parent element was a button that expanded and collapsed, and complex content was nested within this button, rather than as a sibling to it, and this being a use case as to why child presentation was removed from button roles in chrome/firefox.

Rather than repeat that discussion here - it was mentioned that we could come with a pattern to sort of replicate this use case, but without needing to nest the content within a button - but still making the card/content/region/whatever fully clickable to expand/collapse.

For instance, design an expanding/collapsing card component where there's an icon (plus / minus) in one of the corners to serve as the actual button - and use javascript to otherwise make the entire card clickable / change the state of the button.

[scottaohara]

a quick example of how i interpreted the component being discussed today - built in a way where the content does not need to be nested within a button - but the whole block/card is still clickable

https://codepen.io/scottohara/pen/ZYzRVmg

instance 1 has a visible button to show/hide the content that is hidden via inert in the default state.

instance 2 is the same markup structure, but with the button visually hidden.

both instances have a focus indicator around the entire card that appears when the button within each instance is focused - so even instance 2 not having a visible button, there is still a focus indicator that appears for the 'card'