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.

[changelog-app]

Generate changelog in packages/core/changelog/@unreleased

What do the change types mean?

• feature: A new feature of the service.
• improvement: An incremental improvement in the functionality or operation of the service.
• fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
• break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
  and external consumers of the service's API (e.g. customer-written software or integrations).
• deprecation: Advertises the intention to remove service functionality without any change to the
  operation of the service itself.
• manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
  performing database surgery, ...) at the time of upgrade for it to succeed.
• migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?

• ❗The break and manual task changelog types will result in a major release!
• 🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
• ✨ All others will result in a minor version release.

Type

• Feature
• Improvement
• Fix
• Break
• Deprecation
• Manual task
• Migration

Description

fix(Section): make collapsible keyboard accessible

Check the box to generate changelog(s)

• Generate changelog entry

[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]

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.

• This is all from a screenreader standpoint, there are no visual UX changes.
• From a screenreader standpoint, the icon may as well be a button-- We don't really care which element is actually the effective button (has onClick), we just want a something to focus on.
• The icon being the focusable button is actually more descriptive for what it does, vs. the whole header being the button. Using the header as the focusable button leads to the screenreader including a bunch of extra mumbo jumbo in the output, 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.
• Also, 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 to the rightElement