Update tabs HTML to valid role structure

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

Hide file tree

Showing 3 changed files with 3 additions and 8 deletions.
diff --git a/src/nationalarchives/components/tabs/fixtures.json b/src/nationalarchives/components/tabs/fixtures.json
@@ -23,7 +23,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-tabs\" 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=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></button></li><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></button></li><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></button></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
+      "html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><div class=\"tna-tabs__list\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></button></div><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/tabs/tabs.scss b/src/nationalarchives/components/tabs/tabs.scss
@@ -28,9 +28,6 @@
     gap: spacing.space(0.25);
   }
 
-  &__list-item {
-  }
-
   &__button {
     padding: borders.$thick-border-width 0;
 

diff --git a/src/nationalarchives/components/tabs/template.njk b/src/nationalarchives/components/tabs/template.njk
@@ -4,17 +4,15 @@
 {%- 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" role="tablist" hidden>
+  <div class="tna-tabs__list" role="tablist" hidden>
   {%- for item in params.items %}
-    <li class="tna-tabs__list-item">
       <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>
   <div class="tna-tabs__items">
   {%- for item in params.items %}
     <section id="{{ item.id }}" class="tna-tabs__item">
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,7 @@ @@
               }
             ]
           },
-          "html": "<div class=\"tna-tabs\" 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=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></button></li><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></button></li><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></button></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
+          "html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><div class=\"tna-tabs__list\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></button></div><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
         }
       ]
     }