fix(Section): make collapsible keyboard accessible

[bvandercar-vt]

Make collapsible header keyboard accessible. To prevent nested interactives, make the chevron the actual "button" that keyboard tabs to to expand/collapse. The whole header still expands/collapses as well, from a mouse standpoint.

[jscheiny]

I don't think this is the correct approach. The icon here is not a button, the whole header acts as the interactive zone, I think we should mirror this in the keyboard accessibility and make the header focusable.

[bvandercar-vt]

the whole header acts as the interactive zone, I think we should mirror this in the keyboard accessibility and make the header focusable.

From a screenreader standpoint, we don't really care which element is actually the effective interactive button (has onClick), we just want a something good to bring focus to. The icon may as well be that button, it makes no difference to a screenreader.

Here's why the header being the focusable item is the wrong choice:

• This leads to the screenreader reading a bunch of extra text on this item, such as the header title and whatever else is included in the header, such as the rightElement. It doesn't really tell you what the button actually does (expand/collapse). Making the icon the focusable button allows us to actually provide an accurate description of what it does.
• Making the whole header the focusable button actually breaks accessibility when other interactive elements are within it, such as when a consumer wants to pass a button in the rightElement

[jscheiny]

Thanks for the clear and helpful explanation, LGTM