feat: increased accessibility

lib/mv_web/components/core_components.ex

@@ -153,7 +153,14 @@ defmodule MvWeb.CoreComponents do
       |> assign_new(:id, fn -> "dropdown-menu" end)
 
     ~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
         type="button"
         tabindex="0"
@@ -164,9 +171,12 @@ defmodule MvWeb.CoreComponents do
         class="btn btn-ghost"
         phx-click="toggle_dropdown"
         phx-target={@phx_target}
+        data-testid="dropdown-button"
       >
-        <%= if @icon do %><.icon name={@icon} /><% end %>
-        <span><%= @button_label %></span>
+        <%= if @icon do %>
+          <.icon name={@icon} />
+        <% end %>
+        <span>{@button_label}</span>
       </button>
 
       <ul
@@ -175,8 +185,6 @@ defmodule MvWeb.CoreComponents do
         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"
         tabindex="0"
-        phx-window-keydown="close_dropdown"
-        phx-key="Escape"
         phx-target={@phx_target}
       >
         <li :if={@show_select_buttons} role="none">
@@ -211,27 +219,31 @@ defmodule MvWeb.CoreComponents do
 
         <%= for item <- @items do %>
           <li role="none">
-            <label
+            <button
+              type="button"
               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"
-              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-keydown="select_item"
+              phx-key="Enter Space"
               phx-value-item={item.value}
               phx-target={@phx_target}
             >
               <%= if @checkboxes do %>
-                <input
-                  type="checkbox"
-                  class="checkbox checkbox-sm"
-                  checked={Map.get(@selected, item.value, true)}
-                  tabindex="-1"
+                <span
+                  role="presentation"
                   aria-hidden="true"
-                  readonly
-                />
+                  class="checkbox checkbox-sm"
+                  aria-checked={if Map.get(@selected, item.value, true), do: "true", else: "false"}
+                >
+                </span>
               <% end %>
-              <span><%= item.label %></span>
-            </label>
+              <span>{item.label}</span>
+            </button>
           </li>
         <% end %>
       </ul>