[IMPROVE] Update tabs markup (#14964)

app/theme/client/imports/components/tabs.css

@@ -13,8 +13,9 @@
 }
 
 .tab {
+	display: flex;
+
 	margin: 0 1rem;
-	padding: 1rem 0;
 
 	cursor: pointer;
 
@@ -24,13 +25,25 @@
 
 	border-bottom: 2px solid transparent;
 
+	font-family: inherit;
 	font-size: 1rem;
-
 	font-weight: 500;
 	line-height: 1.25rem;
+	align-items: stretch;
+	flex-flow: row nowrap;
 
 	&.active {
 		color: var(--rc-color-button-primary);
 		border-bottom-color: var(--rc-color-button-primary);
 	}
+
+	&:focus {
+		text-decoration: underline;
+	}
+
+	& > span {
+		flex: 1;
+
+		padding: 1rem 0;
+	}
 }

app/ui/client/components/tabs.html

@@ -1,8 +1,15 @@
 <template name="tabs">
 	<div class="tabs">
-		<div class="tabs-wrapper">
-			{{#each tabs}}
-				<div class="tab {{#if isActive value}}active{{/if}}" data-value={{value}}>{{label}}</div>
+		<div class="tabs-wrapper" role="tablist">
+			{{#each tab in tabs}}
+				<button
+					class="tab {{#if isActive tab.value}}active{{/if}}"
+					data-value={{tab.value}}
+					{{ariaSelected tab.value}}
+					role="tab"
+				>
+					<span tabindex="-1">{{tab.label}}</span>
+				</button>
 			{{/each}}
 		</div>
 	</div>

app/ui/client/components/tabs.js

@@ -1,18 +1,21 @@
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Template } from 'meteor/templating';
 
+import './tabs.html';
+
+
 Template.tabs.onCreated(function() {
 	this.activeTab = new ReactiveVar(this.data.tabs.tabs.find((tab) => tab.active).value);
 });
 
 Template.tabs.events({
-	'click .tab'(e) {
-		const { value } = e.currentTarget.dataset;
-		if (value === Template.instance().activeTab.get()) {
+	'click .tab'(event, instance) {
+		const { value } = event.currentTarget.dataset;
+		if (value === instance.activeTab.get()) {
 			return;
 		}
-		Template.instance().activeTab.set(value);
-		Template.instance().data.tabs.onChange(value);
+		instance.activeTab.set(value);
+		instance.data.tabs.onChange(value);
 	},
 });
 
@@ -23,4 +26,7 @@ Template.tabs.helpers({
 	isActive(value) {
 		return Template.instance().activeTab.get() === value;
 	},
+	ariaSelected(value) {
+		return Template.instance().activeTab.get() === value ? { 'aria-selected': 'true' } : {};
+	},
 });

app/ui/client/index.js

@@ -47,7 +47,6 @@ import './views/app/photoswipe';
 import './components/icon';
 import './components/table.html';
 import './components/table';
-import './components/tabs.html';
 import './components/tabs';
 import './components/popupList.html';
 import './components/popupList';