From e92760b71ce39e4a5808976a51f315de0deea664 Mon Sep 17 00:00:00 2001
From: Hannah Voget <hannah@bitcrowd.net>
Date: Thu, 10 Oct 2024 14:04:36 +0200
Subject: [PATCH 1/4] [#137] Make ui_tabs accessible

https://github.com/bitcrowd/bitstyles_phoenix/issues/137
---
 lib/bitstyles_phoenix/component/tabs.ex | 96 ++++++++++---------------
 1 file changed, 37 insertions(+), 59 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/tabs.ex b/lib/bitstyles_phoenix/component/tabs.ex
index 183e6c8..18ce98a 100644
--- a/lib/bitstyles_phoenix/component/tabs.ex
+++ b/lib/bitstyles_phoenix/component/tabs.ex
@@ -40,23 +40,17 @@ defmodule BitstylesPhoenix.Component.Tabs do
     ''',
     '''
         """
-        <ul class="u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
-          <li class="u-margin-s2-right">
-            <button type="button" class="a-button a-button--tab">
-              Foo
-            </button>
-          </li>
-          <li class="u-margin-s2-right">
-            <button type="button" class="a-button a-button--tab">
-              Bar
-            </button>
-          </li>
-          <li class="u-margin-s2-right">
-            <button type="button" class="a-button a-button--tab">
-              Baz
-            </button>
-          </li>
-        </ul>
+        <div class="u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s2" role="tablist">
+          <button type="button" class="a-button a-button--tab" role="tab">
+            Foo
+          </button>
+          <button type="button" class="a-button a-button--tab" role="tab">
+            Bar
+          </button>
+          <button type="button" class="a-button a-button--tab" role="tab">
+            Baz
+          </button>
+        </div>
         """
     ''',
     transparent: false
@@ -76,23 +70,17 @@ defmodule BitstylesPhoenix.Component.Tabs do
     ''',
     '''
         """
-        <ul class="u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
-          <li class="u-margin-s2-right">
-            <button type="button" aria-selected="true" class="a-button a-button--tab">
-              Foo
-            </button>
-          </li>
-          <li class="u-margin-s2-right">
-            <button type="button" aria-selected="false" class="a-button a-button--tab">
-              Bar
-            </button>
-          </li>
-          <li class="u-margin-s2-right">
-            <button type="button" aria-selected="false" class="a-button a-button--tab">
-              Baz
-            </button>
-          </li>
-        </ul>
+        <div class="u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s2" role="tablist">
+          <button type="button" aria-selected="true" class="a-button a-button--tab" role="tab">
+            Foo
+          </button>
+          <button type="button" aria-selected="false" class="a-button a-button--tab" role="tab">
+            Bar
+          </button>
+          <button type="button" aria-selected="false" class="a-button a-button--tab" role="tab">
+            Baz
+          </button>
+        </div>
         """
     ''',
     transparent: false
@@ -112,23 +100,17 @@ defmodule BitstylesPhoenix.Component.Tabs do
     ''',
     '''
         """
-        <ul class="u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist">
-          <li class="u-margin-s2-right">
-            <button type="button" aria-selected="true" class="a-button a-button--tab">
-              Foo
-            </button>
-          </li>
-          <li class="u-margin-s2-right">
-            <button type="button" aria-selected="false" class="a-button a-button--tab">
-              Bar
-            </button>
-          </li>
-          <li class="u-margin-s2-right">
-            <a href="#" aria-selected="false" class="a-button a-button--tab extra">
-              Baz
-            </a>
-          </li>
-        </ul>
+        <div class="u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s2" role="tablist">
+          <button type="button" aria-selected="true" class="a-button a-button--tab" role="tab">
+            Foo
+          </button>
+          <button type="button" aria-selected="false" class="a-button a-button--tab" role="tab">
+            Bar
+          </button>
+          <a href="#" aria-selected="false" class="a-button a-button--tab extra" role="tab">
+            Baz
+          </a>
+        </div>
         """
     ''',
     transparent: false
@@ -137,7 +119,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
   def ui_tabs(assigns) do
     class =
       classnames([
-        "u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom",
+        "u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s2",
         assigns[:class]
       ])
 
@@ -145,19 +127,15 @@ defmodule BitstylesPhoenix.Component.Tabs do
     assigns = assign(assigns, class: class, extra: extra)
 
     ~H"""
-    <ul class={@class} role="tablist" {@extra}>
+    <div class={@class} role="tablist" {@extra}>
       <%= for tab <- @tab do %>
         <%= if Map.get(tab, :show, true) do %>
-          <li
-            class={classnames(["u-margin-s2-right"])}
-          >
             <.ui_tab_button {button_options(tab, assigns[:active])}>
               <%= render_slot(tab) %>
             </.ui_tab_button>
-          </li>
         <% end %>
       <% end %>
-    </ul>
+    </div>
     """
   end
 
@@ -193,7 +171,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
     assigns = assign(assigns, extra: Keyword.merge(extra, active))
 
     ~H"""
-    <.ui_button {@extra} color="tab" shape="tab">
+    <.ui_button {@extra} role="tab" color="tab" shape="tab">
       <%= render_slot(@inner_block) %>
     </.ui_button>
     """

From cafbfc2fa80582adc7b40031f255b5956768a531 Mon Sep 17 00:00:00 2001
From: Hannah Voget <hannah@bitcrowd.net>
Date: Wed, 16 Oct 2024 12:42:51 +0200
Subject: [PATCH 2/4] Use u-gap-s3

---
 lib/bitstyles_phoenix/component/tabs.ex | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/tabs.ex b/lib/bitstyles_phoenix/component/tabs.ex
index 18ce98a..2f4b437 100644
--- a/lib/bitstyles_phoenix/component/tabs.ex
+++ b/lib/bitstyles_phoenix/component/tabs.ex
@@ -40,7 +40,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
     ''',
     '''
         """
-        <div class="u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s2" role="tablist">
+        <div class="u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s3" role="tablist">
           <button type="button" class="a-button a-button--tab" role="tab">
             Foo
           </button>
@@ -70,7 +70,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
     ''',
     '''
         """
-        <div class="u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s2" role="tablist">
+        <div class="u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s3" role="tablist">
           <button type="button" aria-selected="true" class="a-button a-button--tab" role="tab">
             Foo
           </button>
@@ -100,7 +100,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
     ''',
     '''
         """
-        <div class="u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s2" role="tablist">
+        <div class="u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s3" role="tablist">
           <button type="button" aria-selected="true" class="a-button a-button--tab" role="tab">
             Foo
           </button>
@@ -119,7 +119,7 @@ defmodule BitstylesPhoenix.Component.Tabs do
   def ui_tabs(assigns) do
     class =
       classnames([
-        "u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s2",
+        "u-flex u-flex-wrap u-items-end u-margin-m-bottom u-gap-s3",
         assigns[:class]
       ])
 

From ae79638d25ba718c4160ee721f83e9252e418908 Mon Sep 17 00:00:00 2001
From: Hannah Voget <hannah@bitcrowd.net>
Date: Thu, 17 Oct 2024 10:45:41 +0200
Subject: [PATCH 3/4] Update changelog

---
 CHANGELOG.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e4bf3d..7514ffd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- Changed `ui_tabs` and `ui_tab_button` to follow accessibility guidelines. As a side effect the gap between the tabs is now a little smaller.
+
 ## v2.5.0 - 2024-09-25
 
 - Switched bitstyles version comparisons from string comparisons to tuple comparisons, which will ensure correct output if bitstyles version ever contains a number above 9.
@@ -48,9 +50,9 @@ The `variant` attribute of the `Button` component is deprecated in bitstyles `v5
 
 - Add `heading_class` option to `ui_section_title` to set classes on the heading
 - `ui_dl_items` now aligns the items to the baseline (following the Bitstyles examples)
-- Updated to bitstyles `v4.3.0`. 
+- Updated to bitstyles `v4.3.0`.
 
-### Added 
+### Added
 
 - Inputs now render a required label *. This can be configured via `required_label` config. If you do not want this new behaviour, define an empty component as required label.
 

From 88cd30cde36a59f55160180d5f82a7ff6571135d Mon Sep 17 00:00:00 2001
From: Hannah Voget <85163502+hannahbit@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:07:08 +0200
Subject: [PATCH 4/4] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7514ffd..bb2806b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-- Changed `ui_tabs` and `ui_tab_button` to follow accessibility guidelines. As a side effect the gap between the tabs is now a little smaller.
+- Changed `ui_tabs` and `ui_tab_button` to follow accessibility guidelines: replaced the `<ul>` with a `<div role="tablist">` and instead of nesting the buttons inside `<li>`s they are now the direct children of the `div` and have a `role="tab"` set. As a side effect the gap between the tabs is now a little smaller.
 
 ## v2.5.0 - 2024-09-25