local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 51 Pull requests 14 Projects 1 Releases Packages 1 Activity Actions

feat: increased accessibility

Browse source
This commit is contained in:
carla 2025-12-03 14:55:31 +01:00
parent 064c0df701
commit 8d1d04fa05
1 changed files with 29 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

46
lib/mv_web/components/core_components.ex
View file

@ -153,7 +153,14 @@ defmodule MvWeb.CoreComponents do
|> assign_new(:id, fn -> "dropdown-menu" end) |> assign_new(:id, fn -> "dropdown-menu" end)
~H""" ~H"""
<div class="relative" phx-click-away="close_dropdown" phx-target={@phx_target}> <div
class="relative"
phx-click-away="close_dropdown"
phx-target={@phx_target}
phx-window-keydown="close_dropdown"
phx-key="Escape"
data-testid="dropdown-menu"
>
<button <button
type="button" type="button"
tabindex="0" tabindex="0"
@ -164,9 +171,12 @@ defmodule MvWeb.CoreComponents do
class="btn btn-ghost" class="btn btn-ghost"
phx-click="toggle_dropdown" phx-click="toggle_dropdown"
phx-target={@phx_target} phx-target={@phx_target}
data-testid="dropdown-button"
> >
<%= if @icon do %><.icon name={@icon} /><% end %> <%= if @icon do %>
<span><%= @button_label %></span> <.icon name={@icon} />
<% end %>
<span>{@button_label}</span>
</button> </button>
<ul <ul
@ -175,8 +185,6 @@ defmodule MvWeb.CoreComponents do
role="menu" role="menu"
class="absolute right-0 mt-2 bg-base-100 z-[100] p-2 shadow-lg rounded-box w-64 max-h-96 overflow-y-auto border border-base-300" class="absolute right-0 mt-2 bg-base-100 z-[100] p-2 shadow-lg rounded-box w-64 max-h-96 overflow-y-auto border border-base-300"
tabindex="0" tabindex="0"
phx-window-keydown="close_dropdown"
phx-key="Escape"
phx-target={@phx_target} phx-target={@phx_target}
> >
<li :if={@show_select_buttons} role="none"> <li :if={@show_select_buttons} role="none">
@ -211,27 +219,31 @@ defmodule MvWeb.CoreComponents do
<%= for item <- @items do %> <%= for item <- @items do %>
<li role="none"> <li role="none">
<label <button
type="button"
role={if @checkboxes, do: "menuitemcheckbox", else: "menuitem"} role={if @checkboxes, do: "menuitemcheckbox", else: "menuitem"}
aria-checked={@checkboxes && Map.get(@selected, item.value, true)} aria-checked={
if @checkboxes, do: to_string(Map.get(@selected, item.value, true)), else: nil
}
tabindex="0" tabindex="0"
class="flex items-center gap-2 px-2 py-1 rounded cursor-pointer hover:bg-base-200" class="flex items-center gap-2 px-2 py-1 rounded cursor-pointer hover:bg-base-200 w-full text-left"
phx-click="select_item" phx-click="select_item"
phx-keydown="select_item"
phx-key="Enter Space"
phx-value-item={item.value} phx-value-item={item.value}
phx-target={@phx_target} phx-target={@phx_target}
> >
<%= if @checkboxes do %> <%= if @checkboxes do %>
<input <span
type="checkbox" role="presentation"
class="checkbox checkbox-sm"
checked={Map.get(@selected, item.value, true)}
tabindex="-1"
aria-hidden="true" aria-hidden="true"
readonly class="checkbox checkbox-sm"
/> aria-checked={if Map.get(@selected, item.value, true), do: "true", else: "false"}
>
</span>
<% end %> <% end %>
<span><%= item.label %></span> <span>{item.label}</span>
</label> </button>
</li> </li>
<% end %> <% end %>
</ul> </ul>