Tabs
List of sections displayed one at a time using controls.
The current approach isn't ideal and too verbose. While some other solutions exist, they either don't provide correct navigation or the styling that is required. In the future, we will explore better solutions.
Structure
The tabs are made using a <div> element with the tabs class, containing
hidden <input type="radio"> elements to handle state changes and
<label role="tab">
elements wrapped with a <span> element that has
role="tablist" to represent the tab controls for accessibility.
Both the <input> and <label> elements should have the same name
attribute, so that they work together.
Each tab content is wrapped in a role="tabpanel"> element, which is displayed when the
corresponding tab is selected.