New Component: Tab Accordion

Problem description

One of the widely used components in CLF7, tab navigation.
It's similar to a regular accordion, but with selector above the content region. Allowing users to view across all available options in a single view.
As tab won't fit for narrower device, an alternate display options will be needed

Proposed solution

Starting with the same user experience across mobile devices, it has a mobile first experience to display as a regular accordion.
When space is allowed, the selector (accordion headings) will display above content region. The added experience will lead to different HTML markup from regular accordion (#50).
If javascript is disabled, content will still be visible for accessibility. The current use of hidden attribute can be used to trigger content display
User experience will be similar to accordion, with the difference on larger display area (e.g. desktop, tablet), where the selectors will be above the content region.
Responsive behaviour, as mentioned above, HTML is mobile first with same behaviour as regular accordion. The tab above content will be trigger when reaching certain breakpoints.
Tab accordion uses ID-based triggers, as it needs to be able to relate the content region from the trigger. This is different from the currently proposed regular accordion which uses class-based triggers.
Accordion selector will be keyboard accessible, with the content region only accessible when it's visible.
aria-expanded added to the selector, hidden attribute on the content block
a plus/minus sign, bold title, and thicker border bottom to provide a visual indicator on the currently display/selected accordion title

Note:

For review, the current accordion markup proposed is different with the other accordion markup, should consider whether they can be using the same markup.
Javascript to be considered separately

Alternatives considered

Considered the existing behaviour of the regular accordion, and regular tab system. The proposed solution is the hybrid of the two

Additional context
Demo: https://codepen.io/hazuremon/pen/zYGpPOX

Feature Review Checklist:

UBCCM / UBC-DEF