Merge pull request #348 from codesnippetspro/a11y-nav-tab-wrapper

Fix: accessible navigation tab wrappers

Author: imantsk

src/css/import/_page.scss

@@ -3,7 +3,7 @@
 		max-inline-size: 800px;
 	}
 
-	h2.nav-tab-wrapper {
+	.nav-tab-wrapper {
 		margin-block-end: 20px;
 	}
 }

src/css/manage.scss

@@ -77,7 +77,7 @@
 	line-height: 1.4;
 }
 
-.wrap h2.nav-tab-wrapper {
+.wrap .nav-tab-wrapper {
 	.nav-tab {
 		display: flex;
 		flex-flow: row wrap;

src/js/components/ImportMenu/ImportMenu.tsx

@@ -37,7 +37,10 @@ export const ImportMenu: React.FC = () => {
 			<h1>{__('Import Snippets', 'code-snippets')}</h1>
 
 			<div className="narrow">
-				<h2 className="nav-tab-wrapper">
+				<nav
+					className="nav-tab-wrapper"
+					aria-label={__('Import sources', 'code-snippets')}
+				>
 					{TABS.map(tab =>
 						<button
 							key={tab}
@@ -50,7 +53,7 @@ export const ImportMenu: React.FC = () => {
 						>
 							{TAB_LABELS[tab]}
 						</button>)}
-				</h2>
+				</nav>
 
 				<WithRestAPIContext>
 					{TABS.map(tab =>

src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx

@@ -26,7 +26,10 @@ export const CommunityCloud = () => {
 		<div className="wrap">
 			<h1>{__('Community Cloud', 'code-snippets')}</h1>
 
-			<h2 className="nav-tab-wrapper">
+			<nav
+				className="nav-tab-wrapper"
+				aria-label={__('Community Cloud types', 'code-snippets')}
+			>
 				{TABS.map(tab =>
 					<a
 						key={tab}
@@ -46,7 +49,7 @@ export const CommunityCloud = () => {
 						{TAB_LABELS[tab]}
 						{PRO_TABS.includes(tab) && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 					</a>)}
-			</h2>
+			</nav>
 
 			{'snippets' === currentTab
 				? <WithRestAPIContext>

src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx

@@ -121,11 +121,14 @@ const SnippetsTableInner = () => {
 		<div className="wrap">
 			<PageHeading />
 
-			<h2 className="nav-tab-wrapper snippet-type-tabs">
+			<nav
+				className="nav-tab-wrapper snippet-type-tabs"
+				aria-label={__('Snippet types', 'code-snippets')}
+			>
 				<SnippetTypeTab setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
 				{SNIPPET_TYPES.map(type =>
 					<SnippetTypeTab key={type} type={type} setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />)}
-			</h2>
+			</nav>
 
 			<WithFilteredSnippetsContext>
 				<SnippetsListTable />

src/php/Admin/Menus/Settings_Menu.php

@@ -254,7 +254,7 @@ protected function do_settings_tabs() {
 		$sections = $this->get_sections();
 		$active_tab = $this->get_current_section();
 
-		echo '<h2 class="nav-tab-wrapper" id="settings-sections-tabs">';
+		echo '<nav class="nav-tab-wrapper" id="settings-sections-tabs" aria-label="' . esc_attr__( 'Settings tabs', 'code-snippets' ) . '">';
 
 		foreach ( $sections as $section ) {
 			printf(
@@ -266,7 +266,7 @@ protected function do_settings_tabs() {
 			);
 		}
 
-		echo '</h2>';
+		echo '</nav>';
 
 		foreach ( $sections as $section ) {
 			if ( 'license' === $section['id'] ) {