@forsakringskassan/devindex-menu 2.1.2 → 2.1.4

package/dist/cjs/menu.js

@@ -3,6 +3,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/menu.ts
 var menu_exports = {};
@@ -1093,6 +1095,38 @@ var formatter = {
     [DateFormat.YYYYMMDD]: "YYYYMMDD"
   }
 };
+var ElementIdServiceImpl = class {
+  constructor() {
+    __publicField(this, "elementIdMap", /* @__PURE__ */ new Map());
+  }
+  generateElementId(prefix = "fkui") {
+    const id = this.nextId(prefix);
+    if (document.getElementById(id) === null) {
+      return id;
+    }
+    return this.generateElementId(prefix);
+  }
+  nextId(prefix) {
+    let elementIdWithPadding = String(this.getIdFromMap(prefix));
+    while (elementIdWithPadding.length < 4) {
+      elementIdWithPadding = `0${elementIdWithPadding}`;
+    }
+    return `${prefix}-vue-element-${elementIdWithPadding}`;
+  }
+  getIdFromMap(prefix) {
+    const elementId = this.elementIdMap.get(prefix);
+    if (!elementId) {
+      this.elementIdMap.set(prefix, { count: 1 });
+      return 1;
+    }
+    elementId.count++;
+    return elementId.count;
+  }
+  reset() {
+    this.elementIdMap = /* @__PURE__ */ new Map();
+  }
+};
+var ElementIdService = /* @__PURE__ */ new ElementIdServiceImpl();
 var wrapper;
 function createScreenReaderWrapper(options) {
   if (!getWrapper()) {
@@ -1120,7 +1154,7 @@ var template = `
 <template id="devindex-scenario">
   <span><!-- title --></span>
   <p><!-- description --></p>
-  <button type="button">Activate scenario</button>
+  <button type="button" tabindex="-1">Activate scenario</button>
 </template>
 `;
 function createElement(setting) {
@@ -1157,20 +1191,22 @@ var scenario_default = { createElement, template };
 // src/settings/text.ts
 var template2 = `
 <template id="devindex-text">
-    <span><!-- title --></span>
-    <p><!-- description --></p>
+    <label for="devindex-text-input">dummy-label</label>
+    <span><!-- description --></span>
     <br />
-    <input type="text"></input>
+    <input type="text" id="devindex-text-input" tabindex="-1"></input>
 </template>
 `;
 function createElement2(setting) {
   const template3 = document.querySelector("#devindex-text");
   const clone = document.importNode(template3.content, true);
-  const title = clone.querySelector("span");
-  const description = clone.querySelector("p");
+  const label = clone.querySelector("label");
+  const description = clone.querySelector("span");
   const input = clone.querySelector("input");
+  const id = ElementIdService.generateElementId();
   input.name = setting.key;
   input.value = findCookie(input.name) ?? "";
+  input.id = id;
   input.addEventListener("input", () => {
     setCookie({
       name: input.name,
@@ -1178,7 +1214,8 @@ function createElement2(setting) {
       timeLimitSeconds: ONE_MONTH_IN_SECONDS
     });
   });
-  title.textContent = setting.title;
+  label.textContent = setting.title;
+  label.setAttribute("for", id);
   if (setting.description) {
     description.textContent = setting.description;
   } else {
@@ -1301,7 +1338,7 @@ function generateOptionMarkupForLink(setting) {
   const description = setting.description ? `<p>${setting.description}</p>` : "";
   let markup = `${setting.title} ${description}<ul>`;
   setting.options.forEach((option) => {
-    markup += `<li><a href="${option.href}">${option.title}</a></li>`;
+    markup += `<li><a href="${option.href}" tabindex="-1">${option.title}</a></li>`;
   });
   markup = `${markup}</ul>`;
   return markup;
@@ -1379,7 +1416,7 @@ var menu_default = (userSettingsAndMocks) => {
     "beforeend",
     `
     <div class="secret-menu" aria-hidden="true">
-        <button type="button" class="toggle" onclick="toggleMenu()">
+        <button type="button" class="toggle" tabindex="-1" onclick="toggleMenu()">
             <span></span>
             <span></span>
             <span></span>

package/dist/esm/menu.js

@@ -1,3 +1,7 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
 // raw-loader:./client.js?raw
 var client_default = '/**\n * @param {string} cookieName\n * @param {string} cookieValue\n * @param {number} exdays\n * @returns {void}\n */\nfunction setCookie(cookieName, cookieValue, exdays) {\n  var d = new Date();\n  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);\n  var expires = "expires=".concat(d.toUTCString());\n  document.cookie = "".concat(cookieName, "=").concat(cookieValue, ";").concat(expires, ";path=/");\n}\n\n/**\n * @param {string} cookieName\n * @returns {string | undefined}\n */\nfunction getCookie(cookieName) {\n  var name = "".concat(cookieName, "=");\n  var decodedCookie = decodeURIComponent(document.cookie);\n  var ca = decodedCookie.split(";");\n  for (var i = 0; i < ca.length; i++) {\n    var c = ca[i];\n    while (c.charAt(0) === " ") {\n      c = c.substring(1);\n    }\n    if (c.indexOf(name) === 0) {\n      return c.substring(name.length, c.length);\n    }\n  }\n  return undefined;\n}\n(function () {\n  /** @type {NodeListOf<HTMLSelectElement>} */\n  var selections = document.querySelectorAll(".secret-menu select");\n  for (var i = 0; i < selections.length; i++) {\n    var select = selections[i];\n    select.value = getCookie(select.name) ? getCookie(select.name) : "default";\n    if (select.getAttribute("data-sessionStorage") === "true") {\n      var cookieValue = getCookie(select.name);\n      if (cookieValue) {\n        sessionStorage.setItem(select.name, atob(cookieValue));\n      }\n    }\n    select.onchange = function (event) {\n      var element = event.target;\n      setCookie(element.name, element.value, 30);\n      if (element.getAttribute("data-exec-on-change")) {\n        window[element.getAttribute("data-exec-on-change")]();\n      }\n      if (element.getAttribute("data-reload") === "true") {\n        location.reload(true);\n      }\n      if (element.getAttribute("data-sessionStorage") === "true") {\n        var sessionKey = element.id;\n        if (element.value) {\n          var value = atob(element.value);\n          console.log("Laddar sessionstorage ".concat(sessionKey, " med \\n ").concat(value));\n          sessionStorage.setItem(sessionKey, value);\n        } else {\n          console.log("T\\xF6mmer sessionstorage");\n          sessionStorage.removeItem(sessionKey);\n        }\n        location.reload(true);\n      }\n    };\n  }\n\n  /* Forcerar att sidan laddas om, \xE4ven n\xE4r l\xE4nken \xE4r av typen: /#/granska/8 */\n  /** @type {NodeListOf<HTMLAnchorElement>} */\n  var links = document.querySelectorAll(".secret-menu ul li a");\n  for (var _i = 0; _i < links.length; _i++) {\n    var link = links[_i];\n    if (link.getAttribute("href").startsWith("/#")) {\n      /**\n       * @param {MouseEvent} event\n       */\n      link.onclick = function (event) {\n        event.preventDefault();\n        window.location.href = event.target.getAttribute("href");\n        setTimeout(function () {\n          console.log("Reload after click on hash-link.");\n          location.reload();\n        }, "500");\n      };\n    }\n  }\n})();\nfunction toggleMenu() {\n  var menu = document.querySelector(".secret-menu");\n  menu.classList.toggle("open");\n}\nwindow.toggleMenu = toggleMenu;';
 
@@ -1066,6 +1070,38 @@ var formatter = {
     [DateFormat.YYYYMMDD]: "YYYYMMDD"
   }
 };
+var ElementIdServiceImpl = class {
+  constructor() {
+    __publicField(this, "elementIdMap", /* @__PURE__ */ new Map());
+  }
+  generateElementId(prefix = "fkui") {
+    const id = this.nextId(prefix);
+    if (document.getElementById(id) === null) {
+      return id;
+    }
+    return this.generateElementId(prefix);
+  }
+  nextId(prefix) {
+    let elementIdWithPadding = String(this.getIdFromMap(prefix));
+    while (elementIdWithPadding.length < 4) {
+      elementIdWithPadding = `0${elementIdWithPadding}`;
+    }
+    return `${prefix}-vue-element-${elementIdWithPadding}`;
+  }
+  getIdFromMap(prefix) {
+    const elementId = this.elementIdMap.get(prefix);
+    if (!elementId) {
+      this.elementIdMap.set(prefix, { count: 1 });
+      return 1;
+    }
+    elementId.count++;
+    return elementId.count;
+  }
+  reset() {
+    this.elementIdMap = /* @__PURE__ */ new Map();
+  }
+};
+var ElementIdService = /* @__PURE__ */ new ElementIdServiceImpl();
 var wrapper;
 function createScreenReaderWrapper(options) {
   if (!getWrapper()) {
@@ -1093,7 +1129,7 @@ var template = `
 <template id="devindex-scenario">
   <span><!-- title --></span>
   <p><!-- description --></p>
-  <button type="button">Activate scenario</button>
+  <button type="button" tabindex="-1">Activate scenario</button>
 </template>
 `;
 function createElement(setting) {
@@ -1130,20 +1166,22 @@ var scenario_default = { createElement, template };
 // src/settings/text.ts
 var template2 = `
 <template id="devindex-text">
-    <span><!-- title --></span>
-    <p><!-- description --></p>
+    <label for="devindex-text-input">dummy-label</label>
+    <span><!-- description --></span>
     <br />
-    <input type="text"></input>
+    <input type="text" id="devindex-text-input" tabindex="-1"></input>
 </template>
 `;
 function createElement2(setting) {
   const template3 = document.querySelector("#devindex-text");
   const clone = document.importNode(template3.content, true);
-  const title = clone.querySelector("span");
-  const description = clone.querySelector("p");
+  const label = clone.querySelector("label");
+  const description = clone.querySelector("span");
   const input = clone.querySelector("input");
+  const id = ElementIdService.generateElementId();
   input.name = setting.key;
   input.value = findCookie(input.name) ?? "";
+  input.id = id;
   input.addEventListener("input", () => {
     setCookie({
       name: input.name,
@@ -1151,7 +1189,8 @@ function createElement2(setting) {
       timeLimitSeconds: ONE_MONTH_IN_SECONDS
     });
   });
-  title.textContent = setting.title;
+  label.textContent = setting.title;
+  label.setAttribute("for", id);
   if (setting.description) {
     description.textContent = setting.description;
   } else {
@@ -1274,7 +1313,7 @@ function generateOptionMarkupForLink(setting) {
   const description = setting.description ? `<p>${setting.description}</p>` : "";
   let markup = `${setting.title} ${description}<ul>`;
   setting.options.forEach((option) => {
-    markup += `<li><a href="${option.href}">${option.title}</a></li>`;
+    markup += `<li><a href="${option.href}" tabindex="-1">${option.title}</a></li>`;
   });
   markup = `${markup}</ul>`;
   return markup;
@@ -1352,7 +1391,7 @@ var menu_default = (userSettingsAndMocks) => {
     "beforeend",
     `
     <div class="secret-menu" aria-hidden="true">
-        <button type="button" class="toggle" onclick="toggleMenu()">
+        <button type="button" class="toggle" tabindex="-1" onclick="toggleMenu()">
             <span></span>
             <span></span>
             <span></span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/devindex-menu",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "Menu for local development",
   "keywords": [
     "development",
@@ -54,21 +54,22 @@
   "devDependencies": {
     "@babel/core": "7.29.0",
     "@babel/preset-env": "7.29.0",
-    "@fkui/tsconfig": "6.35.0",
+    "@fkui/tsconfig": "6.36.0",
     "@forsakringskassan/apimock-express": "2.13.0",
     "@forsakringskassan/commitlint-config": "3.3.3",
-    "@forsakringskassan/eslint-config": "13.3.1",
-    "@forsakringskassan/eslint-config-cli": "13.3.1",
+    "@forsakringskassan/eslint-config": "13.3.2",
+    "@forsakringskassan/eslint-config-cli": "13.3.2",
     "@forsakringskassan/eslint-config-cypress": "13.3.0",
-    "@forsakringskassan/eslint-config-jest": "13.3.0",
+    "@forsakringskassan/eslint-config-jest": "13.3.3",
     "@forsakringskassan/eslint-config-typescript": "13.3.0",
     "@forsakringskassan/eslint-config-typescript-typeinfo": "13.3.0",
     "@forsakringskassan/prettier-config": "3.3.4",
     "@tsconfig/node22": "22.0.5",
-    "@types/node": "22.19.7",
-    "cypress": "15.9.0",
+    "@types/node": "22.19.10",
+    "cypress": "15.10.0",
+    "cypress-html-validate": "8.1.0",
     "dts-bundle-generator": "9.5.1",
-    "esbuild": "0.27.2",
+    "esbuild": "0.27.3",
     "esbuild-sass-plugin": "3.6.0",
     "npm-pkg-lint": "4.3.4",
     "sass": "1.97.3",
@@ -78,6 +79,6 @@
     "node": ">= 22.0.0"
   },
   "dependencies": {
-    "@fkui/logic": "6.35.0"
+    "@fkui/logic": "6.36.0"
   }
 }