@nationalarchives/frontend 0.2.7 → 0.2.9

package/nationalarchives/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/tabs/tabs.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n  constructor($module) {\n    this.$module = $module;\n    this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n    this.$tabListItemLinks =\n      $module &&\n      this.$tabList &&\n      $module.querySelectorAll(\".tna-tabs__list-item-link\");\n    this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n\n    if (\n      !this.$module ||\n      !this.$tabList ||\n      !this.$tabListItemLinks ||\n      !this.$tabItems ||\n      this.$tabListItemLinks.length !== this.$tabItems.length\n    ) {\n      return;\n    }\n\n    this.sticky = this.$module.classList.contains(\"tna-tabs--sticky\");\n\n    const startingTarget = window.location.hash.replace(/^#/, \"\");\n    const doesStartingTargetExist = [...this.$tabItems].some(\n      ($tabItem) => $tabItem.getAttribute(\"id\") === startingTarget,\n    );\n\n    this.$newTabList = document.createElement(\"div\");\n    this.$newTabList.setAttribute(\"role\", \"tablist\");\n    this.$newTabList.setAttribute(\"class\", this.$tabList.getAttribute(\"class\"));\n\n    this.$tabItems.forEach(($tabItem, index) => {\n      $tabItem.setAttribute(\"role\", \"tabpanel\");\n      $tabItem.setAttribute(\n        \"aria-labelledby\",\n        `${$tabItem.getAttribute(\"id\")}-tab`,\n      );\n      $tabItem.setAttribute(\"tabindex\", \"0\");\n      if (\n        (doesStartingTargetExist &&\n          $tabItem.getAttribute(\"id\") !== startingTarget) ||\n        (!doesStartingTargetExist && index > 0)\n      ) {\n        $tabItem.setAttribute(\"hidden\", true);\n      }\n    });\n\n    this.$tabListItemLinks.forEach(($tabListItemLink) => {\n      const $replacementButton = document.createElement(\"button\");\n      $replacementButton.innerText = $tabListItemLink.innerText;\n      $replacementButton.setAttribute(\n        \"class\",\n        $tabListItemLink.getAttribute(\"class\"),\n      );\n      $replacementButton.setAttribute(\"role\", \"tab\");\n      $replacementButton.setAttribute(\n        \"id\",\n        $tabListItemLink.getAttribute(\"id\"),\n      );\n      $replacementButton.setAttribute(\n        \"aria-controls\",\n        $tabListItemLink.getAttribute(\"href\")?.replace(/^#/, \"\"),\n      );\n      $replacementButton.setAttribute(\"tabindex\", \"-1\");\n      this.$newTabList.appendChild($replacementButton);\n    });\n\n    this.$tabList.replaceWith(this.$newTabList);\n\n    this.$tabListItemLinks = this.$module.querySelectorAll(\n      \".tna-tabs__list-item-link\",\n    );\n\n    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n      if (\n        (startingTarget &&\n          $tabListItemLink.getAttribute(\"aria-controls\") ===\n            `${startingTarget}`) ||\n        (!startingTarget && index === 0)\n      ) {\n        $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n        $tabListItemLink.setAttribute(\"aria-selected\", true);\n        $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n      } else {\n        $tabListItemLink.setAttribute(\"aria-selected\", false);\n      }\n\n      $tabListItemLink.addEventListener(\n        \"keydown\",\n        (e) => this.handleItemLinkKeyDown(e),\n        true,\n      );\n      $tabListItemLink.addEventListener(\n        \"click\",\n        (e) => this.handleItemLinkClick(e),\n        true,\n      );\n    });\n  }\n\n  handleItemLinkClick(itemLinkClickEvent) {\n    itemLinkClickEvent.preventDefault();\n    const targetItem =\n      itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n\n    this.switchTab(targetItem);\n  }\n\n  handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n    const targetItem = itemLinkKeyDownEvent.currentTarget;\n    let overwriteKeyAction = false;\n\n    switch (itemLinkKeyDownEvent.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        this.setSelectedToPreviousTab(targetItem);\n        overwriteKeyAction = true;\n        break;\n\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        this.setSelectedToNextTab(targetItem);\n        overwriteKeyAction = true;\n        break;\n\n      case \"Home\":\n        this.switchTab(this.$tabListItemLinks[0].getAttribute(\"aria-controls\"));\n        overwriteKeyAction = true;\n        break;\n\n      case \"End\":\n        this.switchTab(\n          this.$tabListItemLinks[\n            this.$tabListItemLinks.length - 1\n          ].getAttribute(\"aria-controls\"),\n        );\n        overwriteKeyAction = true;\n        break;\n\n      default:\n        break;\n    }\n\n    if (overwriteKeyAction) {\n      itemLinkKeyDownEvent.stopPropagation();\n      itemLinkKeyDownEvent.preventDefault();\n    }\n  }\n\n  setSelectedToNextTab(targetItem) {\n    const currentIndex = [...this.$tabListItemLinks].findIndex(\n      ($tabListItemLink) =>\n        $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n    );\n    let newIndex;\n    if (currentIndex < this.$tabListItemLinks.length - 1) {\n      newIndex = currentIndex + 1;\n    } else {\n      newIndex = 0;\n    }\n    this.switchTab(\n      this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n    );\n  }\n\n  setSelectedToPreviousTab(targetItem) {\n    const currentIndex = [...this.$tabListItemLinks].findIndex(\n      ($tabListItemLink) =>\n        $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n    );\n    let newIndex;\n    if (currentIndex >= 1) {\n      newIndex = currentIndex - 1;\n    } else {\n      newIndex = this.$tabListItemLinks.length - 1;\n    }\n    this.switchTab(\n      this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n    );\n  }\n\n  switchTab(targetId) {\n    this.$tabListItemLinks.forEach(($tabListItemLink) => {\n      if ($tabListItemLink.getAttribute(\"aria-controls\") === targetId) {\n        $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n        $tabListItemLink.setAttribute(\"aria-selected\", true);\n        $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n        $tabListItemLink.focus();\n      } else {\n        $tabListItemLink.classList.remove(\"tna-tabs__list-item-link--selected\");\n        $tabListItemLink.setAttribute(\"aria-selected\", false);\n        $tabListItemLink.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n\n    this.$tabItems.forEach(($tabItem) => {\n      if ($tabItem.getAttribute(\"id\") === targetId) {\n        $tabItem.removeAttribute(\"hidden\");\n        $tabItem.setAttribute(\"tabindex\", \"0\");\n      } else {\n        $tabItem.setAttribute(\"hidden\", true);\n        $tabItem.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n\n    if (this.sticky) {\n      if (history.replaceState) {\n        history.replaceState(null, null, `#${targetId}`);\n      } else {\n        location.hash = `#${targetId}`;\n      }\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","$module","_this","_classCallCheck","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","sticky","classList","contains","startingTarget","window","location","hash","replace","doesStartingTargetExist","_toConsumableArray","some","$tabItem","getAttribute","$newTabList","document","createElement","setAttribute","forEach","index","concat","$tabListItemLink","_$tabListItemLink$get","$replacementButton","innerText","appendChild","replaceWith","add","addEventListener","e","handleItemLinkKeyDown","handleItemLinkClick","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTab","itemLinkKeyDownEvent","overwriteKeyAction","setSelectedToPreviousTab","setSelectedToNextTab","stopPropagation","newIndex","currentIndex","findIndex","targetId","focus","remove","removeAttribute","history","replaceState"],"sourceRoot":""}
+{"version":3,"file":"components/tabs/tabs.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n  constructor($module) {\n    this.$module = $module;\n    this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n    this.$tabListItemLinks =\n      $module &&\n      this.$tabList &&\n      this.$tabList.querySelectorAll(\".tna-tabs__button\");\n    this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n\n    if (\n      !this.$module ||\n      !this.$tabList ||\n      !this.$tabListItemLinks ||\n      !this.$tabItems ||\n      this.$tabListItemLinks.length !== this.$tabItems.length\n    ) {\n      return;\n    }\n\n    this.currentTabIndex = 0;\n    this.init();\n  }\n\n  init() {\n    this.$module.classList.add(\"tna-tabs--interactive\");\n    this.$tabList.removeAttribute(\"hidden\");\n    this.$tabListItemLinks.forEach(($tabListItemLink) => {\n      const tabPanelID = $tabListItemLink.getAttribute(\"aria-controls\");\n      $tabListItemLink.setAttribute(\"aria-selected\", false);\n      const $tabPanel = document.getElementById(tabPanelID);\n      $tabPanel.setAttribute(\"aria-labelledby\", $tabListItemLink.id);\n      $tabPanel.setAttribute(\"role\", \"tabpanel\");\n      $tabListItemLink.addEventListener(\n        \"click\",\n        (e) => this.handleItemLinkClick(e),\n        true,\n      );\n    });\n    this.switchTabByIndex(this.currentTabIndex);\n    this.$module.addEventListener(\"keydown\", (e) =>\n      this.handleItemLinkKeyDown(e),\n    );\n  }\n\n  handleItemLinkClick(itemLinkClickEvent) {\n    itemLinkClickEvent.preventDefault();\n    const targetItem =\n      itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n    this.switchTabByID(targetItem);\n  }\n\n  handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n    let preventDefaultKeyAction = false;\n    switch (itemLinkKeyDownEvent.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        this.previousTab();\n        preventDefaultKeyAction = true;\n        break;\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        this.nextTab();\n        preventDefaultKeyAction = true;\n        break;\n      case \"Home\":\n        this.switchTabByIndex(0, true);\n        preventDefaultKeyAction = true;\n        break;\n      case \"End\":\n        this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n        preventDefaultKeyAction = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefaultKeyAction) {\n      itemLinkKeyDownEvent.stopPropagation();\n      itemLinkKeyDownEvent.preventDefault();\n    }\n  }\n\n  nextTab() {\n    if (this.currentTabIndex < this.$tabListItemLinks.length - 1) {\n      this.switchTabByIndex(this.currentTabIndex + 1, true);\n    } else {\n      this.switchTabByIndex(0, true);\n    }\n  }\n\n  previousTab() {\n    if (this.currentTabIndex >= 1) {\n      this.switchTabByIndex(this.currentTabIndex - 1, true);\n    } else {\n      this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n    }\n  }\n\n  switchTabByIndex(newIndex, switchFocus = false) {\n    this.currentTabIndex = newIndex;\n    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n      if (index === this.currentTabIndex) {\n        $tabListItemLink.setAttribute(\"aria-selected\", true);\n        $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n        if (switchFocus) {\n          $tabListItemLink.focus();\n        }\n      } else {\n        $tabListItemLink.setAttribute(\"aria-selected\", false);\n        $tabListItemLink.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n    this.$tabItems.forEach(($tabItem, index) => {\n      if (index === this.currentTabIndex) {\n        $tabItem.removeAttribute(\"hidden\");\n        $tabItem.setAttribute(\"tabindex\", \"0\");\n      } else {\n        $tabItem.setAttribute(\"hidden\", \"until-found\");\n        $tabItem.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n  }\n\n  switchTabByID(targetId) {\n    const index = Array.from(this.$tabItems).findIndex(\n      ($tabItem) => $tabItem.getAttribute(\"id\") === targetId,\n    );\n    this.switchTabByIndex(index);\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","$module","_classCallCheck","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","currentTabIndex","init","_this","classList","add","removeAttribute","forEach","$tabListItemLink","tabPanelID","getAttribute","setAttribute","$tabPanel","document","getElementById","id","addEventListener","e","handleItemLinkClick","switchTabByIndex","handleItemLinkKeyDown","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTabByID","itemLinkKeyDownEvent","preventDefaultKeyAction","previousTab","nextTab","stopPropagation","newIndex","_this2","switchFocus","arguments","undefined","index","focus","$tabItem","targetId","Array","from","findIndex"],"sourceRoot":""}

package/nationalarchives/components/tabs/tabs.mjs

@@ -5,7 +5,7 @@ export class Tabs {
     this.$tabListItemLinks =
       $module &&
       this.$tabList &&
-      $module.querySelectorAll(".tna-tabs__list-item-link");
+      this.$tabList.querySelectorAll(".tna-tabs__button");
     this.$tabItems = $module && $module.querySelectorAll(".tna-tabs__item");
 
     if (
@@ -18,197 +18,113 @@ export class Tabs {
       return;
     }
 
-    this.sticky = this.$module.classList.contains("tna-tabs--sticky");
-
-    const startingTarget = window.location.hash.replace(/^#/, "");
-    const doesStartingTargetExist = [...this.$tabItems].some(
-      ($tabItem) => $tabItem.getAttribute("id") === startingTarget,
-    );
-
-    this.$newTabList = document.createElement("div");
-    this.$newTabList.setAttribute("role", "tablist");
-    this.$newTabList.setAttribute("class", this.$tabList.getAttribute("class"));
-
-    this.$tabItems.forEach(($tabItem, index) => {
-      $tabItem.setAttribute("role", "tabpanel");
-      $tabItem.setAttribute(
-        "aria-labelledby",
-        `${$tabItem.getAttribute("id")}-tab`,
-      );
-      $tabItem.setAttribute("tabindex", "0");
-      if (
-        (doesStartingTargetExist &&
-          $tabItem.getAttribute("id") !== startingTarget) ||
-        (!doesStartingTargetExist && index > 0)
-      ) {
-        $tabItem.setAttribute("hidden", true);
-      }
-    });
+    this.currentTabIndex = 0;
+    this.init();
+  }
 
+  init() {
+    this.$module.classList.add("tna-tabs--interactive");
+    this.$tabList.removeAttribute("hidden");
     this.$tabListItemLinks.forEach(($tabListItemLink) => {
-      const $replacementButton = document.createElement("button");
-      $replacementButton.innerText = $tabListItemLink.innerText;
-      $replacementButton.setAttribute(
-        "class",
-        $tabListItemLink.getAttribute("class"),
-      );
-      $replacementButton.setAttribute("role", "tab");
-      $replacementButton.setAttribute(
-        "id",
-        $tabListItemLink.getAttribute("id"),
-      );
-      $replacementButton.setAttribute(
-        "aria-controls",
-        $tabListItemLink.getAttribute("href")?.replace(/^#/, ""),
-      );
-      $replacementButton.setAttribute("tabindex", "-1");
-      this.$newTabList.appendChild($replacementButton);
-    });
-
-    this.$tabList.replaceWith(this.$newTabList);
-
-    this.$tabListItemLinks = this.$module.querySelectorAll(
-      ".tna-tabs__list-item-link",
-    );
-
-    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {
-      if (
-        (startingTarget &&
-          $tabListItemLink.getAttribute("aria-controls") ===
-            `${startingTarget}`) ||
-        (!startingTarget && index === 0)
-      ) {
-        $tabListItemLink.classList.add("tna-tabs__list-item-link--selected");
-        $tabListItemLink.setAttribute("aria-selected", true);
-        $tabListItemLink.setAttribute("tabindex", "0");
-      } else {
-        $tabListItemLink.setAttribute("aria-selected", false);
-      }
-
-      $tabListItemLink.addEventListener(
-        "keydown",
-        (e) => this.handleItemLinkKeyDown(e),
-        true,
-      );
+      const tabPanelID = $tabListItemLink.getAttribute("aria-controls");
+      $tabListItemLink.setAttribute("aria-selected", false);
+      const $tabPanel = document.getElementById(tabPanelID);
+      $tabPanel.setAttribute("aria-labelledby", $tabListItemLink.id);
+      $tabPanel.setAttribute("role", "tabpanel");
       $tabListItemLink.addEventListener(
         "click",
         (e) => this.handleItemLinkClick(e),
         true,
       );
     });
+    this.switchTabByIndex(this.currentTabIndex);
+    this.$module.addEventListener("keydown", (e) =>
+      this.handleItemLinkKeyDown(e),
+    );
   }
 
   handleItemLinkClick(itemLinkClickEvent) {
     itemLinkClickEvent.preventDefault();
     const targetItem =
       itemLinkClickEvent.currentTarget.getAttribute("aria-controls");
-
-    this.switchTab(targetItem);
+    this.switchTabByID(targetItem);
   }
 
   handleItemLinkKeyDown(itemLinkKeyDownEvent) {
-    const targetItem = itemLinkKeyDownEvent.currentTarget;
-    let overwriteKeyAction = false;
-
+    let preventDefaultKeyAction = false;
     switch (itemLinkKeyDownEvent.key) {
       case "ArrowLeft":
       case "ArrowUp":
-        this.setSelectedToPreviousTab(targetItem);
-        overwriteKeyAction = true;
+        this.previousTab();
+        preventDefaultKeyAction = true;
         break;
-
       case "ArrowRight":
       case "ArrowDown":
-        this.setSelectedToNextTab(targetItem);
-        overwriteKeyAction = true;
+        this.nextTab();
+        preventDefaultKeyAction = true;
         break;
-
       case "Home":
-        this.switchTab(this.$tabListItemLinks[0].getAttribute("aria-controls"));
-        overwriteKeyAction = true;
+        this.switchTabByIndex(0, true);
+        preventDefaultKeyAction = true;
         break;
-
       case "End":
-        this.switchTab(
-          this.$tabListItemLinks[
-            this.$tabListItemLinks.length - 1
-          ].getAttribute("aria-controls"),
-        );
-        overwriteKeyAction = true;
+        this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);
+        preventDefaultKeyAction = true;
         break;
-
       default:
         break;
     }
-
-    if (overwriteKeyAction) {
+    if (preventDefaultKeyAction) {
       itemLinkKeyDownEvent.stopPropagation();
       itemLinkKeyDownEvent.preventDefault();
     }
   }
 
-  setSelectedToNextTab(targetItem) {
-    const currentIndex = [...this.$tabListItemLinks].findIndex(
-      ($tabListItemLink) =>
-        $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
-    );
-    let newIndex;
-    if (currentIndex < this.$tabListItemLinks.length - 1) {
-      newIndex = currentIndex + 1;
+  nextTab() {
+    if (this.currentTabIndex < this.$tabListItemLinks.length - 1) {
+      this.switchTabByIndex(this.currentTabIndex + 1, true);
     } else {
-      newIndex = 0;
+      this.switchTabByIndex(0, true);
     }
-    this.switchTab(
-      this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
-    );
   }
 
-  setSelectedToPreviousTab(targetItem) {
-    const currentIndex = [...this.$tabListItemLinks].findIndex(
-      ($tabListItemLink) =>
-        $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
-    );
-    let newIndex;
-    if (currentIndex >= 1) {
-      newIndex = currentIndex - 1;
+  previousTab() {
+    if (this.currentTabIndex >= 1) {
+      this.switchTabByIndex(this.currentTabIndex - 1, true);
     } else {
-      newIndex = this.$tabListItemLinks.length - 1;
+      this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);
     }
-    this.switchTab(
-      this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
-    );
   }
 
-  switchTab(targetId) {
-    this.$tabListItemLinks.forEach(($tabListItemLink) => {
-      if ($tabListItemLink.getAttribute("aria-controls") === targetId) {
-        $tabListItemLink.classList.add("tna-tabs__list-item-link--selected");
+  switchTabByIndex(newIndex, switchFocus = false) {
+    this.currentTabIndex = newIndex;
+    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {
+      if (index === this.currentTabIndex) {
         $tabListItemLink.setAttribute("aria-selected", true);
         $tabListItemLink.setAttribute("tabindex", "0");
-        $tabListItemLink.focus();
+        if (switchFocus) {
+          $tabListItemLink.focus();
+        }
       } else {
-        $tabListItemLink.classList.remove("tna-tabs__list-item-link--selected");
         $tabListItemLink.setAttribute("aria-selected", false);
         $tabListItemLink.setAttribute("tabindex", "-1");
       }
     });
-
-    this.$tabItems.forEach(($tabItem) => {
-      if ($tabItem.getAttribute("id") === targetId) {
+    this.$tabItems.forEach(($tabItem, index) => {
+      if (index === this.currentTabIndex) {
         $tabItem.removeAttribute("hidden");
         $tabItem.setAttribute("tabindex", "0");
       } else {
-        $tabItem.setAttribute("hidden", true);
+        $tabItem.setAttribute("hidden", "until-found");
         $tabItem.setAttribute("tabindex", "-1");
       }
     });
+  }
 
-    if (this.sticky) {
-      if (history.replaceState) {
-        history.replaceState(null, null, `#${targetId}`);
-      } else {
-        location.hash = `#${targetId}`;
-      }
-    }
+  switchTabByID(targetId) {
+    const index = Array.from(this.$tabItems).findIndex(
+      ($tabItem) => $tabItem.getAttribute("id") === targetId,
+    );
+    this.switchTabByIndex(index);
   }
 }

package/nationalarchives/components/tabs/tabs.scss

@@ -1,3 +1,6 @@
+@use "../../variables/a11y" as a11yVariables;
+@use "../../variables/borders";
+@use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -7,135 +10,120 @@
   @include spacing.space-above;
 
   &__list {
-    margin: 0 0 spacing.space(1);
+    margin: 0;
     padding: 0;
 
     display: flex;
     flex-wrap: nowrap;
     align-items: stretch;
-    gap: spacing.space(1);
+    gap: spacing.space(0.5);
+
+    position: relative;
+    z-index: 2;
 
     list-style: none;
   }
 
-  &__list-item {
+  &--small &__list {
+    gap: spacing.space(0.25);
   }
 
-  &__list-item-link {
-    padding: spacing.space(0.5) 0;
-
-    display: flex;
+  &__list-item {
+  }
 
-    align-items: center;
+  &__button {
+    padding: borders.$thick-border-width 0;
 
     position: relative;
 
     text-align: center;
-    text-decoration: none;
 
     background: transparent;
 
     border: none;
 
-    cursor: pointer;
+    border: 1px transparent solid;
+    border-bottom: none;
 
-    @include typography.font-size(20);
-    @include typography.heading-font;
+    cursor: pointer;
 
-    &,
-    &:link,
-    &:visited {
-      @include colour.colour-font("font-dark");
+    &:active {
+      @include a11y.focus-outline-without-offset;
+      @include a11y.active-outline;
     }
+  }
+
+  &__button[aria-selected="true"] {
+    padding-top: 0;
+
+    @include colour.colour-border("keyline");
 
     &::after {
       content: "";
 
+      height: 1px;
+
       position: absolute;
+      top: 100%;
       right: 0;
-      bottom: 0;
       left: 0;
-    }
-
-    &:hover,
-    &--selected,
-    &--selected:hover {
-      text-decoration: none;
 
-      &::after {
-        @include colour.thick-keyline-dark(top);
-      }
+      @include colour.colour-background("background");
     }
+  }
 
-    .tna-template--js-enabled & {
-      @include colour.colour-font("font-light");
+  &__button-inner {
+    padding: spacing.space(0.5) spacing.space(0.75);
 
-      &:hover {
-        &::after {
-          @include colour.thick-keyline(top);
-        }
-      }
+    display: block;
 
-      &--selected {
-        @include colour.colour-font("font-dark");
+    text-decoration: underline;
 
-        &::after,
-        &:hover::after {
-          @include colour.thick-keyline-dark(top);
-        }
-      }
-    }
+    @include colour.colour-font("font-dark");
   }
 
-  &__items {
-    // &:not(:target-within) {
-    //   .tna-tabs__item:first-child {
-    //     display: block;
-    //   }
-    // }
+  &--small &__button-inner {
+    padding: spacing.space(0.25) spacing.space(0.5) spacing.space(0.125);
+
+    @include typography.font-size(16);
   }
 
-  &__item {
-    display: none;
+  &__button:hover &__button-inner {
+    @include typography.interacted-text-decoration;
+  }
 
-    &:first-child {
-      display: block;
-    }
+  &__button[aria-selected="true"] &__button-inner {
+    text-decoration: none;
 
-    &:has(~ :target) {
-      display: none;
-    }
+    @include colour.thick-keyline-accent(top);
+  }
 
-    &:target {
-      display: block;
-    }
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: spacing.space(2);
 
-    .tna-template--js-enabled & {
-      display: block;
+    position: relative;
+    z-index: 1;
+  }
 
-      &[hidden] {
-        display: none;
-      }
-    }
+  &__item {
+    border-radius: 0.1px;
+    // @include a11y.no-focus-outline-on-click;
 
-    .tna-template--clicked &:focus {
-      outline: none;
+    &:focus {
+      outline-offset: -#{a11yVariables.$focus-outline-width};
     }
   }
 
-  @include colour.on-high-contrast-and-forced-colours {
-    &__list {
-      @include colour.colour-border("keyline-dark", 1px, solid, bottom);
-    }
+  &--interactive &__item {
+    padding: spacing.space(1);
+    @include colour.colour-border("keyline", 1px, solid);
   }
 
-  // @include colour.on-forced-colours {
-  //   &__list-item-link {
-  //     &--selected {
-  //       padding-bottom: spacing.space(0.125);
-
-  //       border-bottom-width: 0.375rem;
-  //     }
-  //   }
-  // }
+  &--tint#{&}--interactive &__button[aria-selected="true"],
+  &--tint#{&}--interactive &__button:hover &__button-inner,
+  &--tint#{&}--interactive &__items {
+    @include colour.tint;
+  }
 }

package/nationalarchives/components/tabs/template.njk

@@ -4,16 +4,23 @@
 {%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
 <div class="tna-tabs{% if classes %} {{ classes }}{% endif %}" data-module="tna-tabs"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
-  <ul class="tna-tabs__list">
+  <ul class="tna-tabs__list" role="tablist" hidden>
   {%- for item in params.items %}
     <li class="tna-tabs__list-item">
-      <a href="#{{ item.id }}" class="tna-tabs__list-item-link" id="{{ item.id }}-tab">{{ item.title }}</a>
+      <button type="button" class="tna-tabs__button" id="{{ item.id }}-tab" aria-controls="{{ item.id }}" role="tab">
+        <span class="tna-tabs__button-inner">
+          {{ item.title }}
+        </span>
+      </button>
     </li>
   {%- endfor %}
   </ul>
   <div class="tna-tabs__items">
   {%- for item in params.items %}
     <section id="{{ item.id }}" class="tna-tabs__item">
+      <h{{ params.itemHeadingLevel }} class="tna-tabs__heading tna-heading-m">
+        {{ item.title }}
+      </h{{ params.itemHeadingLevel }}>
       {{ item.body | safe }}
     </section>
   {%- endfor %}

package/nationalarchives/components/text-input/text-input.css

@@ -1 +1 @@
-.tna-text-input{--background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-text-input{--background: rgb(255, 255, 255);--background-tint: #ddd;--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}.tna-text-input{width:100%;padding:0 6px;display:block;box-sizing:border-box;color:var(--input-foreground, rgb(1, 1, 1));line-height:2rem;background-color:var(--input-background, rgb(255, 255, 255));border:2px var(--input-border, rgb(1, 1, 1)) solid;border-radius:.1px}.tna-form__group--error .tna-text-input{border-color:var(--form-error-border, #c20000)}.tna-text-input--xs{max-width:5rem}.tna-text-input--s{max-width:10rem}.tna-text-input--m{max-width:20rem}.tna-text-input--l{max-width:40rem}.tna-text-input--xl{max-width:80rem}/*# sourceMappingURL=text-input.css.map */
+.tna-text-input{--background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-text-input{--background: rgb(255, 255, 255);--background-tint: #ddd;--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}.tna-text-input{width:100%;padding:0 6px;display:block;box-sizing:border-box;color:var(--input-foreground, rgb(1, 1, 1));line-height:2rem;background-color:var(--input-background, rgb(255, 255, 255));border:2px var(--input-border, rgb(1, 1, 1)) solid;border-radius:.1px}.tna-form__group--error .tna-text-input{border-color:var(--form-error-border, #c20000)}.tna-text-input--xs{max-width:5rem}.tna-text-input--s{max-width:10rem}.tna-text-input--m{max-width:20rem}.tna-text-input--l{max-width:40rem}.tna-text-input--xl{max-width:80rem}/*# sourceMappingURL=text-input.css.map */