@nationalarchives/frontend 1.3.0 → 1.3.1

package/nationalarchives/components/tabs/tabs.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";const t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{Tabs:()=>i});class i{constructor(t){this.$module=t,this.$tabList=t&&t.querySelector(".tna-tabs__list"),this.$tabListItemLinks=t&&this.$tabList&&this.$tabList.querySelectorAll(".tna-tabs__button"),this.$tabItems=t&&t.querySelectorAll(".tna-tabs__item"),this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length&&(this.currentTabIndex=this.$module.dataset.activeTabOnLoad?parseInt(this.$module.dataset.activeTabOnLoad,10):0,this.allowClose="true"===this.$module.dataset.allowClose,this.init())}init(){this.$module.classList.add("tna-tabs--interactive"),this.$tabList.removeAttribute("hidden"),this.$tabListItemLinks.forEach(t=>{const e=t.getAttribute("aria-controls");t.setAttribute("aria-selected",!1);const i=document.getElementById(e);i.setAttribute("aria-labelledby",t.id),i.setAttribute("role","tabpanel"),t.addEventListener("click",t=>this.handleItemLinkClick(t),!0)}),this.switchTabByIndex(this.currentTabIndex),this.$module.addEventListener("keydown",t=>this.handleItemLinkKeyDown(t))}handleItemLinkClick(t){t.preventDefault();const e=t.currentTarget.getAttribute("aria-controls");this.switchTabByID(e)}handleItemLinkKeyDown(t){let e=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.previousTab(),e=!0;break;case"ArrowRight":case"ArrowDown":this.nextTab(),e=!0;break;case"Home":this.switchTabByIndex(0,!0),e=!0;break;case"End":this.switchTabByIndex(this.$tabListItemLinks.length-1,!0),e=!0}e&&(t.stopPropagation(),t.preventDefault())}nextTab(){this.currentTabIndex<this.$tabListItemLinks.length-1?this.switchTabByIndex(this.currentTabIndex+1,!0):this.switchTabByIndex(0,!0)}previousTab(){this.currentTabIndex>=1?this.switchTabByIndex(this.currentTabIndex-1,!0):this.switchTabByIndex(this.$tabListItemLinks.length-1,!0)}switchTabByIndex(t,e=!1){this.currentTabIndex=t,"true"===this.$tabListItemLinks[this.currentTabIndex]?.getAttribute("aria-selected").toString()&&this.allowClose&&(this.currentTabIndex=-1),this.$tabListItemLinks.forEach((t,i)=>{i===this.currentTabIndex?(t.setAttribute("aria-selected",!0),t.setAttribute("tabindex","0"),e&&t.focus()):(t.setAttribute("aria-selected",!1),t.setAttribute("tabindex","-1"))}),this.$tabItems.forEach((t,e)=>{e===this.currentTabIndex?(t.removeAttribute("hidden"),t.setAttribute("tabindex","0")):(t.setAttribute("hidden",""),t.setAttribute("tabindex","-1"))})}switchTabByID(t){const e=Array.from(this.$tabItems).findIndex(e=>e.getAttribute("id")===t);this.switchTabByIndex(e)}}return e})());
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";const t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{Tabs:()=>i});class i{constructor(t){this.$module=t,this.$tabList=t&&t.querySelector(".tna-tabs__list"),this.$tabListItemLinks=t&&this.$tabList&&this.$tabList.querySelectorAll(".tna-tabs__button"),this.$tabItems=t&&t.querySelectorAll(".tna-tabs__item"),this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length&&(this.currentTabIndex=this.$module.dataset.activeTabOnLoad?parseInt(this.$module.dataset.activeTabOnLoad,10):0,this.allowClose="true"===this.$module.dataset.allowClose,this.init())}init(){this.$module.classList.add("tna-tabs--interactive"),this.$tabList.removeAttribute("hidden"),this.$tabListItemLinks.forEach(t=>{const e=t.getAttribute("aria-controls");t.setAttribute("aria-selected",!1);const i=document.getElementById(e);i.setAttribute("aria-labelledby",t.id),i.setAttribute("role","tabpanel"),t.addEventListener("click",t=>this.handleItemLinkClick(t),!0)}),this.switchTabByIndex(this.currentTabIndex),this.$module.addEventListener("keydown",t=>this.handleItemLinkKeyDown(t))}handleItemLinkClick(t){t.preventDefault();const e=t.currentTarget.getAttribute("aria-controls");this.switchTabByID(e)}handleItemLinkKeyDown(t){let e=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.previousTab(),e=!0;break;case"ArrowRight":case"ArrowDown":this.nextTab(),e=!0;break;case"Home":this.switchTabByIndex(0,!0,!0),e=!0;break;case"End":this.switchTabByIndex(this.$tabListItemLinks.length-1,!0,!0),e=!0}e&&(t.stopPropagation(),t.preventDefault())}nextTab(){this.currentTabIndex<this.$tabListItemLinks.length-1?this.switchTabByIndex(this.currentTabIndex+1,!0):this.switchTabByIndex(0,!0)}previousTab(){this.currentTabIndex>=1?this.switchTabByIndex(this.currentTabIndex-1,!0):this.switchTabByIndex(this.$tabListItemLinks.length-1,!0)}switchTabByIndex(t,e=!1,i=!1){this.currentTabIndex=t,"true"===this.$tabListItemLinks[this.currentTabIndex]?.getAttribute("aria-selected").toString()&&this.allowClose&&!i&&(this.currentTabIndex=-1),this.$tabListItemLinks.forEach((t,i)=>{i===this.currentTabIndex?(t.setAttribute("aria-selected",!0),t.setAttribute("tabindex","0"),e&&t.focus()):(t.setAttribute("aria-selected",!1),t.setAttribute("tabindex",-1===this.currentTabIndex?"0":"-1"))}),this.$tabItems.forEach((t,e)=>{e===this.currentTabIndex?(t.removeAttribute("hidden"),t.setAttribute("tabindex","0")):(t.setAttribute("hidden",""),t.setAttribute("tabindex",-1===this.currentTabIndex?"0":"-1"))})}switchTabByID(t){const e=Array.from(this.$tabItems).findIndex(e=>e.getAttribute("id")===t);this.switchTabByIndex(e)}}return e})());
 //# sourceMappingURL=tabs.js.map

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\nconst __webpack_require__ = {};\n\n","// define getter/value 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\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\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 = this.$module.dataset.activeTabOnLoad\n      ? parseInt(this.$module.dataset.activeTabOnLoad, 10)\n      : 0;\n    this.allowClose = this.$module.dataset.allowClose === \"true\";\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        (event) => this.handleItemLinkClick(event),\n        true,\n      );\n    });\n    this.switchTabByIndex(this.currentTabIndex);\n    this.$module.addEventListener(\"keydown\", (event) =>\n      this.handleItemLinkKeyDown(event),\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        /* eslint-disable-next-line no-magic-numbers */\n        this.switchTabByIndex(0, true);\n        preventDefaultKeyAction = true;\n        break;\n      case \"End\":\n        /* eslint-disable-next-line no-magic-numbers */\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    /* eslint-disable-next-line no-magic-numbers */\n    if (this.currentTabIndex < this.$tabListItemLinks.length - 1) {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.currentTabIndex + 1, true);\n    } else {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(0, true);\n    }\n  }\n\n  previousTab() {\n    /* eslint-disable-next-line no-magic-numbers */\n    if (this.currentTabIndex >= 1) {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.currentTabIndex - 1, true);\n    } else {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n    }\n  }\n\n  switchTabByIndex(newIndex, switchFocus = false) {\n    this.currentTabIndex = newIndex;\n    const isTabAlreadySelected =\n      this.$tabListItemLinks[this.currentTabIndex]\n        ?.getAttribute(\"aria-selected\")\n        .toString() === \"true\";\n    if (isTabAlreadySelected && this.allowClose) {\n      this.currentTabIndex = -1;\n    }\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\", \"\");\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","constructor","$module","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","currentTabIndex","dataset","activeTabOnLoad","parseInt","allowClose","init","classList","add","removeAttribute","forEach","$tabListItemLink","tabPanelID","getAttribute","setAttribute","$tabPanel","document","getElementById","id","addEventListener","event","handleItemLinkClick","switchTabByIndex","handleItemLinkKeyDown","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTabByID","itemLinkKeyDownEvent","preventDefaultKeyAction","previousTab","nextTab","stopPropagation","newIndex","switchFocus","toString","index","focus","$tabItem","targetId","Array","from","findIndex"],"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\nconst __webpack_require__ = {};\n\n","// define getter/value 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\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\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 = this.$module.dataset.activeTabOnLoad\n      ? parseInt(this.$module.dataset.activeTabOnLoad, 10)\n      : 0;\n    this.allowClose = this.$module.dataset.allowClose === \"true\";\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        (event) => this.handleItemLinkClick(event),\n        true,\n      );\n    });\n    this.switchTabByIndex(this.currentTabIndex);\n    this.$module.addEventListener(\"keydown\", (event) =>\n      this.handleItemLinkKeyDown(event),\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        /* eslint-disable-next-line no-magic-numbers */\n        this.switchTabByIndex(0, true, true);\n        preventDefaultKeyAction = true;\n        break;\n      case \"End\":\n        /* eslint-disable-next-line no-magic-numbers */\n        this.switchTabByIndex(this.$tabListItemLinks.length - 1, true, 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    /* eslint-disable-next-line no-magic-numbers */\n    if (this.currentTabIndex < this.$tabListItemLinks.length - 1) {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.currentTabIndex + 1, true);\n    } else {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(0, true);\n    }\n  }\n\n  previousTab() {\n    /* eslint-disable-next-line no-magic-numbers */\n    if (this.currentTabIndex >= 1) {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.currentTabIndex - 1, true);\n    } else {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n    }\n  }\n\n  switchTabByIndex(newIndex, switchFocus = false, disallowClose = false) {\n    this.currentTabIndex = newIndex;\n    const isTabAlreadySelected =\n      this.$tabListItemLinks[this.currentTabIndex]\n        ?.getAttribute(\"aria-selected\")\n        .toString() === \"true\";\n    if (isTabAlreadySelected && this.allowClose && !disallowClose) {\n      this.currentTabIndex = -1;\n    }\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(\n          \"tabindex\",\n          this.currentTabIndex === -1 ? \"0\" : \"-1\",\n        );\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\", \"\");\n        $tabItem.setAttribute(\n          \"tabindex\",\n          this.currentTabIndex === -1 ? \"0\" : \"-1\",\n        );\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","constructor","$module","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","currentTabIndex","dataset","activeTabOnLoad","parseInt","allowClose","init","classList","add","removeAttribute","forEach","$tabListItemLink","tabPanelID","getAttribute","setAttribute","$tabPanel","document","getElementById","id","addEventListener","event","handleItemLinkClick","switchTabByIndex","handleItemLinkKeyDown","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTabByID","itemLinkKeyDownEvent","preventDefaultKeyAction","previousTab","nextTab","stopPropagation","newIndex","switchFocus","disallowClose","toString","index","focus","$tabItem","targetId","Array","from","findIndex"],"sourceRoot":""}

package/nationalarchives/components/tabs/tabs.mjs

@@ -68,12 +68,12 @@ export class Tabs {
         break;
       case "Home":
         /* eslint-disable-next-line no-magic-numbers */
-        this.switchTabByIndex(0, true);
+        this.switchTabByIndex(0, true, true);
         preventDefaultKeyAction = true;
         break;
       case "End":
         /* eslint-disable-next-line no-magic-numbers */
-        this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);
+        this.switchTabByIndex(this.$tabListItemLinks.length - 1, true, true);
         preventDefaultKeyAction = true;
         break;
       default:
@@ -107,13 +107,13 @@ export class Tabs {
     }
   }
 
-  switchTabByIndex(newIndex, switchFocus = false) {
+  switchTabByIndex(newIndex, switchFocus = false, disallowClose = false) {
     this.currentTabIndex = newIndex;
     const isTabAlreadySelected =
       this.$tabListItemLinks[this.currentTabIndex]
         ?.getAttribute("aria-selected")
         .toString() === "true";
-    if (isTabAlreadySelected && this.allowClose) {
+    if (isTabAlreadySelected && this.allowClose && !disallowClose) {
       this.currentTabIndex = -1;
     }
     this.$tabListItemLinks.forEach(($tabListItemLink, index) => {
@@ -125,7 +125,10 @@ export class Tabs {
         }
       } else {
         $tabListItemLink.setAttribute("aria-selected", false);
-        $tabListItemLink.setAttribute("tabindex", "-1");
+        $tabListItemLink.setAttribute(
+          "tabindex",
+          this.currentTabIndex === -1 ? "0" : "-1",
+        );
       }
     });
     this.$tabItems.forEach(($tabItem, index) => {
@@ -134,7 +137,10 @@ export class Tabs {
         $tabItem.setAttribute("tabindex", "0");
       } else {
         $tabItem.setAttribute("hidden", "");
-        $tabItem.setAttribute("tabindex", "-1");
+        $tabItem.setAttribute(
+          "tabindex",
+          this.currentTabIndex === -1 ? "0" : "-1",
+        );
       }
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",