fix(UI): use role="tabpanel" for control panel sections (#2139)

Author: AprilSylph

src/action/backup.css

@@ -1,38 +1,38 @@
-#backup details {
+#backup-panel details {
   padding: 1ch;
 }
 
-#backup details > .content {
+#backup-panel details > .content {
   margin-top: 0.5em;
 
   display: flex;
   flex-direction: column;
   gap: 0.5em;
 }
 
-#backup details[open] ~ details summary ~ * {
+#backup-panel details[open] ~ details summary ~ * {
   display: none;
 }
 
-#backup h4 {
+#backup-panel h4 {
   display: inline-block;
   margin: 0;
 }
 
-#backup label {
+#backup-panel label {
   margin: 0;
 }
 
-#backup pre {
+#backup-panel pre {
   width: 0;
   min-width: 100%;
 
   -webkit-user-select: all;
   user-select: all;
 }
 
-#backup pre,
-#backup textarea {
+#backup-panel pre,
+#backup-panel textarea {
   max-height: calc(10em + 2ch);
   overflow: auto;
   overflow-wrap: break-word;

src/action/links.css

@@ -1,33 +1,32 @@
-#links {
-  position: relative;
-
-  margin: 1em 0;
-  padding: 0 1em;
+#links-panel {
+  padding: 8px;
 }
 
-#links h4 {
-  margin-bottom: 0;
+#links-panel h4 {
+  margin-block: 8px;
 }
 
-#links ul {
-  padding-left: 1em;
+#links-panel ul {
+  padding-inline: 16px;
+  margin-block-start: 0;
+  margin-block-end: 16px;
 }
 
-#links h4 + ul {
-  margin-top: 1ch;
+#links-panel ul:last-child {
+  margin-block-end: 8px;
 }
 
-#links li {
-  margin-bottom: 1ch;
+#links-panel ul li {
+  margin-bottom: 8px;
 }
 
-#links a {
+#links-panel a {
   font-weight: bold;
   text-decoration: none;
 }
 
-#links :link,
-#links :visited {
+#links-panel :link,
+#links-panel :visited {
   color: rgb(var(--accent));
 }
 

src/action/popup.css

@@ -72,7 +72,7 @@ body {
   display: none;
 }
 
-nav {
+[role="tablist"] {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -81,43 +81,49 @@ nav {
   border-bottom: 1px solid rgb(var(--active-grey));
 }
 
-nav a {
+[role="tablist"] [role="tab"] {
   flex-grow: 1;
   padding: 8px;
+  border: none;
   border-radius: 5px;
   margin: 0 4px;
 
+  background-color: transparent;
   color: rgb(var(--black));
   font-weight: bold;
   text-align: center;
   text-decoration: none;
 }
 
-nav a:hover {
+[role="tablist"] [role="tab"]:hover {
   background-color: rgb(var(--passive-grey));
+  cursor: pointer;
 }
 
-nav a:active, nav a.selected {
+[role="tablist"] [role="tab"]:active,
+[role="tablist"] [role="tab"][aria-selected="true"] {
   background-color: rgb(var(--active-grey));
 }
 
-section:not(.open) {
-  display: none;
+[role="tabpanel"] {
+  position: relative;
 }
 
-section.open:empty {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 1em 0;
+[role="tabpanel"]:focus-visible {
+  outline-offset: -3px;
 }
 
-section.open:empty::before {
-  content: "No one’s around to help.";
-}
+[role="tabpanel"]:focus-visible::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
 
-section h2 {
-  text-align: center;
+  content: "";
+  outline: inherit;
+  outline-offset: inherit;
 }
 
 input[type="text"],

src/action/popup.html

@@ -28,12 +28,12 @@
       ℹ️ XKit Rewritten can also be configured via the button in the browser toolbar.
     </header>
     <main>
-      <nav>
-        <a href="#configuration" role="button" class="selected">Configuration</a>
-        <a href="#backup" role="button">Backup</a>
-        <a href="#links" role="button">Links</a>
-      </nav>
-      <section id="configuration" class="open">
+      <div role="tablist" aria-label="Navigation">
+        <button id="configuration-tab" role="tab" aria-controls="configuration-panel" aria-selected="true" tabindex="0">Configuration</button>
+        <button id="backup-tab" role="tab" aria-controls="backup-panel" aria-selected="false" tabindex="-1">Backup</button>
+        <button id="links-tab" role="tab" aria-controls="links-panel" aria-selected="false" tabindex="-1">Links</button>
+      </div>
+      <section id="configuration-panel" role="tabpanel" aria-labelledby="configuration-tab" tabindex="0">
         <div class="finder">
           <input id="search" type="text" placeholder="Search" autocomplete="off" spellcheck="false">
           <label for="filter">Filter by</label>
@@ -48,7 +48,7 @@
         </div>
         <div class="features"></div>
       </section>
-      <section id="backup">
+      <section id="backup-panel" role="tabpanel" aria-labelledby="backup-tab" tabindex="0" hidden>
         <details id="export" open>
           <summary><h4>Export</h4></summary>
           <div class="content">
@@ -69,7 +69,7 @@
           </div>
         </details>
       </section>
-      <section id="links">
+      <section id="links-panel" role="tabpanel" aria-labelledby="links-tab" tabindex="0" hidden>
         <h4>Help & information</h4>
         <ul>
           <li><a href="https://github.com/AprilSylph/XKit-Rewritten/wiki" target="_blank">User guide</a></li>

src/action/popup.js

@@ -8,16 +8,40 @@ const checkForNoResults = function () {
   document.querySelector('.no-results').style.display = nothingFound ? 'flex' : 'none';
 };
 
-$('nav a').on('click', event => {
-  event.preventDefault();
+document.querySelector('[role="tablist"]').addEventListener('keydown', (/** @type {KeyboardEvent} */ event) => {
+  if (event.target.getAttribute('role') !== 'tab') return;
 
-  $('nav .selected').removeClass('selected');
-  $(event.currentTarget).addClass('selected');
+  switch (event.key) {
+    case 'ArrowLeft':
+      event.target.previousElementSibling?.focus();
+      event.target.previousElementSibling?.click();
+      break;
+    case 'ArrowRight':
+      event.target.nextElementSibling?.focus();
+      event.target.nextElementSibling?.click();
+      break;
+    default:
+      return;
+  }
 
-  $('section.open').removeClass('open');
-  $(`section${event.currentTarget.getAttribute('href')}`).addClass('open');
+  event.stopPropagation();
 });
 
+[...document.querySelectorAll('[role="tab"]')].forEach(tab =>
+  tab.addEventListener('click', ({ currentTarget }) => {
+    const targetPanelId = currentTarget.getAttribute('aria-controls');
+    const tabList = currentTarget.closest('[role="tablist"]');
+    const tabListChildren = Array.from(tabList.children);
+    const tabListPanelIds = tabListChildren.map(tab => tab.getAttribute('aria-controls'));
+
+    tabListChildren.forEach(tab => {
+      tab.setAttribute('aria-selected', tab === currentTarget ? 'true' : 'false');
+      tab.setAttribute('tabindex', tab === currentTarget ? '0' : '-1');
+    });
+    tabListPanelIds.forEach(panelId => document.getElementById(panelId)?.toggleAttribute('hidden', targetPanelId !== panelId));
+  }),
+);
+
 document.getElementById('search').addEventListener('input', ({ currentTarget }) => {
   const query = currentTarget.value.toLowerCase();
   const featureElements = [...document.querySelectorAll('xkit-feature')];

src/action/render_backup.js

@@ -69,7 +69,7 @@ const localRestore = async function () {
     localRestoreButton.classList.add('success');
     localRestoreButton.textContent = 'Successfully restored!';
     localImportTextarea.value = '';
-    document.querySelector('a[href="#configuration"]').classList.add('outdated');
+    document.getElementById('configuration-tab').classList.add('outdated');
   } catch (exception) {
     localRestoreButton.classList.add('failure');
     localRestoreButton.textContent =
@@ -96,7 +96,7 @@ const renderLocalBackup = async function () {
 
 renderLocalBackup();
 
-document.querySelectorAll('#backup details').forEach(details => details.addEventListener('toggle', ({ currentTarget }) => {
+document.querySelectorAll('#backup-panel details').forEach(details => details.addEventListener('toggle', ({ currentTarget }) => {
   if (currentTarget.open) {
     [...currentTarget.parentNode.children]
       .filter(element => element !== currentTarget)

src/action/render_features.js

@@ -6,9 +6,9 @@ import { TextPreference } from './components/text-preference/index.js';
 import { TextAreaPreference } from './components/textarea-preference/index.js';
 import { XKitFeature } from './components/xkit-feature/index.js';
 
-const configSection = document.getElementById('configuration');
-const configSectionLink = document.querySelector('a[href="#configuration"]');
-const featuresDiv = configSection.querySelector('.features');
+const configPanel = document.getElementById('configuration-panel');
+const configTab = document.getElementById('configuration-tab');
+const featuresDiv = configPanel.querySelector('.features');
 
 const enabledFeaturesKey = 'enabledScripts';
 const specialAccessKey = 'specialAccess';
@@ -146,7 +146,7 @@ const renderFeatures = async function () {
 
 renderFeatures();
 
-configSectionLink.addEventListener('click', ({ currentTarget }) => {
+configTab.addEventListener('click', ({ currentTarget }) => {
   if (currentTarget.classList.contains('outdated')) {
     currentTarget.classList.remove('outdated');
     renderFeatures();