From d7e6ffa0859f249d2c5ffc9b49adb45755700e1b Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <andrew.hosgood@nationalarchives.gov.uk>
Date: Thu, 5 Sep 2024 10:40:56 +0100
Subject: [PATCH] Update tabs HTML to valid role structure

---
 src/nationalarchives/components/tabs/fixtures.json | 2 +-
 src/nationalarchives/components/tabs/tabs.scss     | 3 ---
 src/nationalarchives/components/tabs/template.njk  | 6 ++----
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/nationalarchives/components/tabs/fixtures.json b/src/nationalarchives/components/tabs/fixtures.json
index c65d3a9a..0400774d 100644
--- 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
index 6d9ba525..bc5517a5 100644
--- 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
index 3296edd8..39d8e19d 100644
--- 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">