Use dataset rather than getAttribute("data-...")

nationalarchives · Jan 2, 2025 · 8f60cfb · 8f60cfb
1 parent 35255f0
commit 8f60cfb
Show file tree

Hide file tree

Showing 16 changed files with 48 additions and 48 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - More tracking added to accordions, breadcrumbs, footers, galleries, headers and sidebars
 
 ### Changed
+
+- Optional `data-tnacookiesdomain` and `data-tnacookiespath` attributes on the `<html>` element are now `data-tna-cookies-domain` and `data-tna-cookies-path`
+- The `data-preferenceskey` and `data-policieskey` attributes on the cookies component are now `data-preferences-key` and `data-policies-key`
+- The `data-disableautofocus` attribute on the error summary component is now `data-disable-autofocus`
+- The `data-informationlabelopen` and `data-informationlabelclose` attributes on the picture component are now `data-information-label-open` and `data-information-label-close`
+
 ### Deprecated
 ### Removed
 ### Fixed

diff --git a/src/nationalarchives/all.mjs b/src/nationalarchives/all.mjs
@@ -129,30 +129,30 @@ const initAll = (options) => {
         .querySelectorAll(".tna-details__details:not([open])")
         .forEach((e) => {
           e.setAttribute("open", "");
-          e.dataset.wasclosed = "";
+          e.dataset.wasClosed = "";
         });
       document
         .querySelectorAll(
           '.tna-accordion__content[hidden="until-found"], .tna-picture__transcript[hidden="until-found"]',
         )
         .forEach((e) => {
           e.removeAttribute("hidden");
-          e.dataset.wasclosed = "";
+          e.dataset.wasClosed = "";
         });
     } else {
       document
-        .querySelectorAll(".tna-details__details[data-wasclosed]")
+        .querySelectorAll(".tna-details__details[data-was-closed]")
         .forEach((e) => {
           e.removeAttribute("open");
-          delete e.dataset.wasclosed;
+          delete e.dataset.wasClosed;
         });
       document
         .querySelectorAll(
-          ".tna-accordion__content[data-wasclosed], .tna-picture__transcript[data-wasclosed]",
+          ".tna-accordion__content[data-was-closed], .tna-picture__transcript[data-was-closed]",
         )
         .forEach((e) => {
           e.setAttribute("hidden", "until-closed");
-          e.dataset.wasclosed = "";
+          e.dataset.wasClosed = "";
         });
     }
   });

diff --git a/src/nationalarchives/analytics.mjs b/src/nationalarchives/analytics.mjs
@@ -402,7 +402,7 @@ class GA4 extends EventTracker {
   }
 }
 
-const ga4Id = document.documentElement.getAttribute("data-ga4");
+const ga4Id = document.documentElement.dataset.ga4;
 if (ga4Id) {
   new GA4({ id: ga4Id });
 }

diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.mjs b/src/nationalarchives/components/cookie-banner/cookie-banner.mjs
@@ -27,16 +27,15 @@ export class CookieBanner {
       return;
     }
 
-    const policies = this.$module.getAttribute("data-policies") || "";
+    const policies = this.$module.dataset.policies || "";
     const extraPolicies = policies
       .split(",")
       .filter((x) => x)
       .map((policy) => policy.trim());
-    const domain = this.$module.getAttribute("data-domain") || undefined;
-    const path = this.$module.getAttribute("data-path") || undefined;
-    const secure = this.$module.getAttribute("data-secure") || undefined;
-    const policiesKey =
-      this.$module.getAttribute("data-policieskey") || undefined;
+    const domain = this.$module.dataset.domain || undefined;
+    const path = this.$module.dataset.path || undefined;
+    const secure = this.$module.dataset.secure || undefined;
+    const policiesKey = this.$module.dataset.policiesKey || undefined;
 
     this.cookies = new Cookies({
       extraPolicies,
@@ -48,8 +47,7 @@ export class CookieBanner {
     });
 
     this.cookiePreferencesSet =
-      this.$module.getAttribute("data-preferenceskey") ||
-      "cookie_preferences_set";
+      this.$module.dataset.preferencesKey || "cookie_preferences_set";
     const cookiePreferencesSet = this.cookies.hasValue(
       this.cookiePreferencesSet,
       "true",

diff --git a/src/nationalarchives/components/cookie-banner/fixtures.json b/src/nationalarchives/components/cookie-banner/fixtures.json
diff --git a/src/nationalarchives/components/cookie-banner/template.njk b/src/nationalarchives/components/cookie-banner/template.njk
@@ -9,7 +9,7 @@
   {%- set containerClasses = containerClasses.concat('tna-background-tint') -%}
 {%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
-<section class="tna-cookie-banner{% if classes %} {{ classes }}{% endif %}" data-module="tna-cookie-banner" data-policies="{{ params.policies if params.policies }}" data-preferenceskey="{{ params.preferencesSetKey if params.preferencesSetKey }}" data-policieskey="{{ params.policiesKey if params.policiesKey }}" data-domain="{{ params.cookiesDomain if params.cookiesDomain }}" data-path="{{ params.cookiesPath if params.cookiesPath }}" data-insecure="{{ true if params.allowInsecure else 'false' }}" aria-label="Cookies on {{ params.serviceName }}" {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %} hidden>
+<section class="tna-cookie-banner{% if classes %} {{ classes }}{% endif %}" data-module="tna-cookie-banner" data-policies="{{ params.policies if params.policies }}" data-preferences-key="{{ params.preferencesSetKey if params.preferencesSetKey }}" data-policies-key="{{ params.policiesKey if params.policiesKey }}" data-domain="{{ params.cookiesDomain if params.cookiesDomain }}" data-path="{{ params.cookiesPath if params.cookiesPath }}" data-insecure="{{ true if params.allowInsecure else 'false' }}" aria-label="Cookies on {{ params.serviceName }}" {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %} hidden>
   <div class="tna-container">
     <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt">
       <h2 class="tna-heading-m">{{ params.title or "This website uses cookies" }}</h2>

diff --git a/src/nationalarchives/components/error-summary/error-summary.mjs b/src/nationalarchives/components/error-summary/error-summary.mjs
@@ -9,7 +9,7 @@ export class ErrorSummary {
     }
 
     const disableAutoFocus =
-      this.$module.getAttribute("data-disableautofocus") === "true" || false;
+      this.$module.dataset.disableAutofocus === "true" || false;
 
     if (!disableAutoFocus) {
       this.setFocus(this.$module);

diff --git a/src/nationalarchives/components/error-summary/fixtures.json b/src/nationalarchives/components/error-summary/fixtures.json
@@ -18,7 +18,7 @@
         ],
         "disableAutoFocus": true
       },
-      "html": "<div class=\"tna-error-summary\" data-module=\"tna-error-summary\" data-disableautofocus=\"true\"><div role=\"alert\"><h2 class=\"tna-error-summary__heading tna-heading-m\">There is a problem</h2><ul class=\"tna-error-summary__list\"><li class=\"tna-error-summary__item\"><a href=\"#\" class=\"tna-error-summary__link\">Enter your full name</a></li><li class=\"tna-error-summary__item\"><a href=\"#\" class=\"tna-error-summary__link\">The date of the record cannot be in the future</a></li></ul></div></div>"
+      "html": "<div class=\"tna-error-summary\" data-module=\"tna-error-summary\" data-disable-autofocus=\"true\"><div role=\"alert\"><h2 class=\"tna-error-summary__heading tna-heading-m\">There is a problem</h2><ul class=\"tna-error-summary__list\"><li class=\"tna-error-summary__item\"><a href=\"#\" class=\"tna-error-summary__link\">Enter your full name</a></li><li class=\"tna-error-summary__item\"><a href=\"#\" class=\"tna-error-summary__link\">The date of the record cannot be in the future</a></li></ul></div></div>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/error-summary/template.njk b/src/nationalarchives/components/error-summary/template.njk
@@ -1,6 +1,6 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- set classes = containerClasses | join(' ') -%}
-<div class="tna-error-summary{% if classes %} {{ classes }}{% endif %}" data-module="tna-error-summary"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}{%- if params.disableAutoFocus !== undefined %} data-disableautofocus="{{ params.disableAutoFocus }}"{% endif %}>
+<div class="tna-error-summary{% if classes %} {{ classes }}{% endif %}" data-module="tna-error-summary"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}{%- if params.disableAutoFocus !== undefined %} data-disable-autofocus="{{ params.disableAutoFocus }}"{% endif %}>
   <div role="alert">
     <h{{ params.headingLevel }} class="tna-error-summary__heading tna-heading-m">
       {{ params.title }}

diff --git a/src/nationalarchives/components/footer/analytics.js b/src/nationalarchives/components/footer/analytics.js
@@ -32,7 +32,7 @@ export default [
         rootData: {
           data_link_type: "icon",
           data_section: "Social media",
-          data_link: ($el) => $el.getAttribute("data-name"),
+          data_link: ($el) => $el.dataset.name,
         },
       },
       {

diff --git a/src/nationalarchives/components/picture/fixtures.json b/src/nationalarchives/components/picture/fixtures.json
@@ -81,7 +81,7 @@
           }
         ]
       },
-      "html": "<figure class=\"tna-picture\" data-module=\"tna-picture\" data-informationlabelopen=\"Show information\" data-informationlabelclose=\"Hide information\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" loading=\"lazy\"></picture><button type=\"button\" class=\"tna-picture__toggle-transcript tna-button tna-button--small tna-button--solid-hover\" aria-expanded=\"false\" hidden>Open transcript</button></div><div class=\"tna-picture__transcript\"><p>Lorem ipsum transcript</p></div></figure>"
+      "html": "<figure class=\"tna-picture\" data-module=\"tna-picture\" data-information-label-open=\"Show information\" data-information-label-close=\"Hide information\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" loading=\"lazy\"></picture><button type=\"button\" class=\"tna-picture__toggle-transcript tna-button tna-button--small tna-button--solid-hover\" aria-expanded=\"false\" hidden>Open transcript</button></div><div class=\"tna-picture__transcript\"><p>Lorem ipsum transcript</p></div></figure>"
     },
     {
       "name": "with alternative image sources",

diff --git a/src/nationalarchives/components/picture/picture.mjs b/src/nationalarchives/components/picture/picture.mjs
@@ -24,11 +24,9 @@ export class Picture {
     }
 
     this.openLabel =
-      this.$module.getAttribute("data-informationlabelopen") ||
-      "Open transcript";
+      this.$module.dataset.informationLabelOpen || "Open transcript";
     this.closeLabel =
-      this.$module.getAttribute("data-informationlabelclose") ||
-      "Close transcript";
+      this.$module.dataset.informationLabelClose || "Close transcript";
 
     this.init();
   }

diff --git a/src/nationalarchives/components/picture/picture.stories.js b/src/nationalarchives/components/picture/picture.stories.js
@@ -7,8 +7,8 @@ const argTypes = {
   height: { control: "number" },
   sources: { control: "object" },
   caption: { control: "text" },
-  informationLabelOpen: { control: "object" },
-  informationLabelClose: { control: "object" },
+  informationLabelOpen: { control: "text" },
+  informationLabelClose: { control: "text" },
   informationItemHeadingLevel: { control: { type: "number", min: 1, max: 6 } },
   information: { control: "object" },
   classes: { control: "text" },

diff --git a/src/nationalarchives/components/picture/template.njk b/src/nationalarchives/components/picture/template.njk
@@ -2,7 +2,7 @@
 
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- set classes = containerClasses | join(' ') -%}
-<figure class="tna-picture{% if classes %} {{ classes }}{% endif %}" data-module="tna-picture"{% if params.informationLabelOpen %} data-informationlabelopen="{{ params.informationLabelOpen }}"{% endif %}{% if params.informationLabelClose %} data-informationlabelclose="{{ params.informationLabelClose }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+<figure class="tna-picture{% if classes %} {{ classes }}{% endif %}" data-module="tna-picture"{% if params.informationLabelOpen %} data-information-label-open="{{ params.informationLabelOpen }}"{% endif %}{% if params.informationLabelClose %} data-information-label-close="{{ params.informationLabelClose }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
   <div class="tna-picture__image-wrapper tna-background-tint">
     <picture>
     {%- for source in params.sources %}

diff --git a/src/nationalarchives/lib/cookies.mjs b/src/nationalarchives/lib/cookies.mjs
@@ -97,14 +97,12 @@ export default class Cookies {
     }
     this.extraPolicies = extraPolicies;
     if (domain === null) {
-      this.domain =
-        document.documentElement.getAttribute("data-tnacookiesdomain") || "";
+      this.domain = document.documentElement.dataset.tnaCookiesDomain || "";
     } else {
       this.domain = domain;
     }
     if (path === null) {
-      this.path =
-        document.documentElement.getAttribute("data-tnacookiespath") || "/";
+      this.path = document.documentElement.dataset.tnaCookiesPath || "/";
     } else {
       this.path = path;
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -81,7 +81,7 @@ @@
               }
             ]
           },
-          "html": "<figure class=\"tna-picture\" data-module=\"tna-picture\" data-informationlabelopen=\"Show information\" data-informationlabelclose=\"Hide information\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" loading=\"lazy\"></picture><button type=\"button\" class=\"tna-picture__toggle-transcript tna-button tna-button--small tna-button--solid-hover\" aria-expanded=\"false\" hidden>Open transcript</button></div><div class=\"tna-picture__transcript\"><p>Lorem ipsum transcript</p></div></figure>"
+          "html": "<figure class=\"tna-picture\" data-module=\"tna-picture\" data-information-label-open=\"Show information\" data-information-label-close=\"Hide information\"><div class=\"tna-picture__image-wrapper tna-background-tint\"><picture><img class=\"tna-picture__image\" width=\"499\" height=\"333\" src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" loading=\"lazy\"></picture><button type=\"button\" class=\"tna-picture__toggle-transcript tna-button tna-button--small tna-button--solid-hover\" aria-expanded=\"false\" hidden>Open transcript</button></div><div class=\"tna-picture__transcript\"><p>Lorem ipsum transcript</p></div></figure>"
         },
         {
           "name": "with alternative image sources",
@@ Expand Down @@