Skip to content

Commit

Permalink
[#137] Make ui_tabs accessible (#139)
Browse files Browse the repository at this point in the history 
* [#137] Make ui_tabs accessible

#137
  • Loading branch information
@hannahbit
hannahbit authored Oct 23, 2024
1 parent 3a971a2 commit eb93701
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 61 deletions.
6 changes: 4 additions & 2 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

## Unreleased

- 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

- Switched bitstyles version comparisons from string comparisons to tuple comparisons, which will ensure correct output if bitstyles version ever contains a number above 9.
Expand Down Expand Up @@ -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.

Expand Down
96 changes: 37 additions & 59 deletions lib/bitstyles_phoenix/component/tabs.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-s3" 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
Expand All @@ -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-s3" 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
Expand All @@ -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-s3" 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
Expand All @@ -137,27 +119,23 @@ 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-s3",
assigns[:class]
])

extra = assigns_to_attributes(assigns, [:class, :tab, :active])
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

Expand Down Expand Up @@ -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>
"""
Expand Down

0 comments on commit eb93701

Please sign in to comment.