Remove aria-multiselectable on accordion

nationalarchives · Sep 5, 2024 · b5b1ecc · b5b1ecc
1 parent dd86621
commit b5b1ecc
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/src/nationalarchives/components/accordion/accordion.mjs b/src/nationalarchives/components/accordion/accordion.mjs
@@ -9,7 +9,7 @@ export class Accordion {
     }
 
     this.allowMultipleItemsOpen =
-      this.$module.getAttribute("aria-multiselectable") === "true";
+      this.$module.dataset["multiselectable"] === "true";
 
     this.$items.forEach(($item) => this.initItem($item));
     this.initState();

diff --git a/src/nationalarchives/components/accordion/fixtures.json b/src/nationalarchives/components/accordion/fixtures.json
@@ -17,7 +17,7 @@
         ],
         "id": "test"
       },
-      "html": "<div class=\"tna-accordion\" aria-multiselectable=\"false\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
+      "html": "<div class=\"tna-accordion\" data-multiselectable=\"false\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
     },
     {
       "name": "with open items",
@@ -36,7 +36,7 @@
         ],
         "id": "test"
       },
-      "html": "<div class=\"tna-accordion\" aria-multiselectable=\"false\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"true\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
+      "html": "<div class=\"tna-accordion\" data-multiselectable=\"false\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"true\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
     },
     {
       "name": "allowing multiple items",
@@ -55,7 +55,7 @@
         "id": "test",
         "openMultipleItems": true
       },
-      "html": "<div class=\"tna-accordion\" aria-multiselectable=\"true\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
+      "html": "<div class=\"tna-accordion\" data-multiselectable=\"true\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
     },
     {
       "name": "with classes",
@@ -74,7 +74,7 @@
         "id": "test",
         "classes": "accordion__test-class"
       },
-      "html": "<div class=\"tna-accordion accordion__test-class\" aria-multiselectable=\"false\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
+      "html": "<div class=\"tna-accordion accordion__test-class\" data-multiselectable=\"false\" data-module=\"tna-accordion\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
     },
     {
       "name": "with attributes",
@@ -95,7 +95,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-accordion\" aria-multiselectable=\"false\" data-module=\"tna-accordion\" data-testattribute=\"foobar\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
+      "html": "<div class=\"tna-accordion\" data-multiselectable=\"false\" data-module=\"tna-accordion\" data-testattribute=\"foobar\"><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Alpha</h2><div class=\"tna-accordion__body\" id=\"test-content-1\"><p>Content</p></div></div><div class=\"tna-accordion__item\" data-isopen=\"false\"><h2 class=\"tna-accordion__heading tna-heading-s\">Beta</h2><div class=\"tna-accordion__body\" id=\"test-content-2\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim vehicula magna, et hendrerit quam iaculis a. Mauris in ultricies enim. Donec bibendum est leo, sed dapibus mauris facilisis vitae.</p><p>Quisque hendrerit condimentum nisl, non volutpat ex eleifend at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi id suscipit felis, sed tincidunt arcu. Etiam vel blandit diam, vitae commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi vel rhoncus aliquam.</p><p>Pellentesque ultrices bibendum nibh, sit amet ornare turpis efficitur id. Aenean ullamcorper neque eget justo sagittis, rutrum ultrices urna varius. Mauris sodales a lorem at sodales.</p></div></div></div>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/accordion/template.njk b/src/nationalarchives/components/accordion/template.njk
@@ -1,6 +1,6 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- set classes = containerClasses | join(' ') -%}
-<div class="tna-accordion{% if classes %} {{ classes }}{% endif %}" aria-multiselectable="{{ params.openMultipleItems or 'false' }}" data-module="tna-accordion"{%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+<div class="tna-accordion{% if classes %} {{ classes }}{% endif %}" data-multiselectable="{{ params.openMultipleItems or 'false' }}" data-module="tna-accordion"{%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
   {%- for item in params.items %}
   <div class="tna-accordion__item" data-isopen="{{ item.open or 'false' }}">
     <h{{ params.itemHeadingLevel }} class="tna-accordion__heading tna-heading-s">

diff --git a/src/nationalarchives/components/picture/fixtures.json b/src/nationalarchives/components/picture/fixtures.json
@@ -61,7 +61,7 @@
           }
         ]
       },
-      "html": "<figure class=\"tna-picture\" data-module=\"tna-picture\"><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\"><div class=\"tna-tabs tna-tabs--small\" data-module=\"tna-tabs\"><ul class=\"tna-tabs__list\" role=\"tablist\" hidden><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"transcript-tab\" aria-controls=\"transcript\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Transcript</span></button></li><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"translation-tab\" aria-controls=\"translation\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Translation</span></button></li></ul><div class=\"tna-tabs__items\"><section id=\"transcript\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Transcript</h3><p>Lorem ipsum transcript</p></section><section id=\"translation\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Translation</h3><p>Lorem ipsum translation</p></section></div></div></div></figure>"
+      "html": "<figure class=\"tna-picture\" data-module=\"tna-picture\"><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\"><div class=\"tna-tabs tna-tabs--small\" data-module=\"tna-tabs\"><div class=\"tna-tabs__list\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-tabs__button\" id=\"transcript-tab\" aria-controls=\"transcript\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Transcript</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"translation-tab\" aria-controls=\"translation\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Translation</span></button></div><div class=\"tna-tabs__items\"><section id=\"transcript\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Transcript</h3><p>Lorem ipsum transcript</p></section><section id=\"translation\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Translation</h3><p>Lorem ipsum translation</p></section></div></div></div></figure>"
     },
     {
       "name": "custom open and close label",
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,7 +61,7 @@ @@
               }
             ]
           },
-          "html": "<figure class=\"tna-picture\" data-module=\"tna-picture\"><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\"><div class=\"tna-tabs tna-tabs--small\" data-module=\"tna-tabs\"><ul class=\"tna-tabs__list\" role=\"tablist\" hidden><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"transcript-tab\" aria-controls=\"transcript\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Transcript</span></button></li><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"translation-tab\" aria-controls=\"translation\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Translation</span></button></li></ul><div class=\"tna-tabs__items\"><section id=\"transcript\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Transcript</h3><p>Lorem ipsum transcript</p></section><section id=\"translation\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Translation</h3><p>Lorem ipsum translation</p></section></div></div></div></figure>"
+          "html": "<figure class=\"tna-picture\" data-module=\"tna-picture\"><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\"><div class=\"tna-tabs tna-tabs--small\" data-module=\"tna-tabs\"><div class=\"tna-tabs__list\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-tabs__button\" id=\"transcript-tab\" aria-controls=\"transcript\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Transcript</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"translation-tab\" aria-controls=\"translation\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Translation</span></button></div><div class=\"tna-tabs__items\"><section id=\"transcript\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Transcript</h3><p>Lorem ipsum transcript</p></section><section id=\"translation\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Translation</h3><p>Lorem ipsum translation</p></section></div></div></div></figure>"
         },
         {
           "name": "custom open and close label",
@@ Expand Down @@