a11y <tabs>

readme.md

MDN aria roles - Tab

Key	Action
Tab	When focus is outside of the tablist moves focus to the active tab. If focus is on the active tab moves focus to the next element in the keyboard focus order, ideally the active tab's associated tabpanel.
→	Focuses and optionally activates the next tab in the tab list. If the current tab is the last tab in the tab list it activates the first tab.
←	Focuses and optionally activates the previous tab in the tab list. If the current tab is the first tab in the tab list it activates the last tab.

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.html

<div class="tabbed-content">
	<ul class="tabs-list" role='tablist'>
		<li class="current">
			<button 
				aria-controls="apples"	
				aria-selected="true" 
				id="tab-apples" 
				role='tab' 
				class='tab selected'
				tabindex="0"
				type="button"
			>
				Apples
		</button>
		</li>
	
		<li>
			<button
				aria-controls="bananas"
				aria-selected='false'
				id="tab-bananas"
				role='tab'
				tabindex='-1'
				class='tab'
				type="button"
			>
				Bananas
		</button>
		</li>
	
		<li class='last'>
			<button
				aria-controls='pears'
				aria-selected="false"
				id="tab-pears"
				role='tab'
				tabindex='-1'
				class='tab'
				type="button"
			>
				Pears
		</button>
		</li>
	</ul>
	
	<div
		aria-labelledby="tab-apples"
		class="tab-panel current"
		id="apples"
		role='tabpanel'
		tabindex="0"
	>
		<h2>Apples</h2>
		<p>Lorem ipsum dolor sit amet, urna class vestibulum tincidunt atque, habitasse sit wisi erat dapibus. Vitae curae natoque a, donec nulla conubia in mollis. Sapien pede in tortor, lectus neque vitae in et, vitae aliquam eget orci at, non turpis faucibus id morbi. Elit tempor turpis donec inceptos, fringilla arcu sollicitudin ligula magna, sed justo viverra lacus erat, vestibulum id in justo nulla. Viverra dui leo donec, aptent deserunt nostra magnis lobortis, id ultrices ac aenean, interdum vestibulum rhoncus phasellus libero.
	</div>
	
	<div
		aria-labelledby="tab-bananas"
		class="tab-panel hidden"
		role='tabpanel'
		id="bananas"
		tabindex="0"
	>
		<h2>Bananas</h2>
		<p>Lorem ipsum dolor sit amet, urna class vestibulum tincidunt atque, habitasse sit wisi erat dapibus. Vitae curae natoque a, donec nulla conubia in mollis. Sapien pede in tortor, lectus neque vitae in et, vitae aliquam eget orci at, non turpis faucibus id morbi. Elit tempor turpis donec inceptos, fringilla arcu sollicitudin ligula magna, sed justo viverra lacus erat, vestibulum id in justo nulla. Viverra dui leo donec, aptent deserunt nostra magnis lobortis, id ultrices ac aenean, interdum vestibulum rhoncus phasellus libero.
	</div>

	<div
		aria-labelledby="tab-pears"
		class="tab-panel hidden"
		id="pears"
		role='tabpanel'
		tabindex="0"
	>
		<h2>Pears</h2>
		<p>Lorem ipsum dolor sit amet, urna class vestibulum tincidunt atque, habitasse sit wisi erat dapibus. Vitae curae natoque a, donec nulla conubia in mollis. Sapien pede in tortor, lectus neque vitae in et, vitae aliquam eget orci at, non turpis faucibus id morbi. Elit tempor turpis donec inceptos, fringilla arcu sollicitudin ligula magna, sed justo viverra lacus erat, vestibulum id in justo nulla. Viverra dui leo donec, aptent deserunt nostra magnis lobortis, id ultrices ac aenean, interdum vestibulum rhoncus phasellus libero.
	</div>

	<p class="Tabs_back">
		<button type="button" class="sr-only sr-only-focusable">
			Back to tabs of site selection
		</button>
	</p>
</div>

script.js

‎‎​

style.css

ul {
	display: flex;
	list-style: none;
}

li {
	margin-right: 1em;
}

.hidden {
	display: none;
}

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.sr-only-focusable:active, 
.sr-only-focusable:focus {
	clip: auto!important;
	-webkit-clip-path: none!important;
	clip-path: none!important;
	height: auto!important;
	margin: auto!important;
	overflow: visible!important;
	width: auto!important;
	white-space: normal!important;
}