From 0113e5ca8ddb00d963a02667c9d347b4bdcde050 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 5 Jun 2025 12:35:06 +0200
Subject: [PATCH 01/26] Turn some labels into divs

---
 .../demo_web/components/layouts/admin.html.heex   |  4 ++--
 lib/backpex/html/layout.ex                        | 15 ++++++++++++---
 lib/backpex/html/resource.ex                      |  8 ++++----
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/demo/lib/demo_web/components/layouts/admin.html.heex b/demo/lib/demo_web/components/layouts/admin.html.heex
index 5fcbbdfd..cf8fca6b 100644
--- a/demo/lib/demo_web/components/layouts/admin.html.heex
+++ b/demo/lib/demo_web/components/layouts/admin.html.heex
@@ -42,9 +42,9 @@
     />
     <Backpex.HTML.Layout.topbar_dropdown class="mr-2 md:mr-0">
       <:label>
-        <label tabindex="0" class="btn btn-square btn-ghost">
+        <div class="btn btn-square btn-ghost">
           <Backpex.HTML.CoreComponents.icon name="hero-user" class="size-6" />
-        </label>
+        </div>
       </:label>
       <li>
         <.link href="https://backpex.live" class="text-error flex justify-between hover:bg-base-200">
diff --git a/lib/backpex/html/layout.ex b/lib/backpex/html/layout.ex
index 00b71f19..e2b37499 100644
--- a/lib/backpex/html/layout.ex
+++ b/lib/backpex/html/layout.ex
@@ -381,7 +381,9 @@ defmodule Backpex.HTML.Layout do
   def topbar_dropdown(assigns) do
     ~H"""
     <div class={["dropdown dropdown-end", @class]}>
-      {render_slot(@label)}
+      <div tabindex="0" role="button">
+        {render_slot(@label)}
+      </div>
       <ul tabindex="0" class="dropdown-content z-[1] menu bg-base-100 rounded-box w-52 p-2 shadow">
         {render_slot(@inner_block)}
       </ul>
@@ -583,12 +585,19 @@ defmodule Backpex.HTML.Layout do
   @doc type: :component
 
   attr :text, :string, doc: "text of the label"
+  attr :for, :any, default: nil, doc: "form element the label is bound to"
 
   def input_label(assigns) do
+    assigns =
+      case assigns.for do
+        field = %Phoenix.HTML.FormField{} -> assign(assigns, :for, field.id)
+        id -> assign(assigns, :for, id)
+      end
+
     ~H"""
-    <p class="text-content block break-words text-sm font-medium">
+    <label for={@for} class="text-content block break-words text-sm font-medium">
       {@text}
-    </p>
+    </label>
     """
   end
 
diff --git a/lib/backpex/html/resource.ex b/lib/backpex/html/resource.ex
index 4b8d56e2..d7a33c19 100644
--- a/lib/backpex/html/resource.ex
+++ b/lib/backpex/html/resource.ex
@@ -225,10 +225,10 @@ defmodule Backpex.HTML.Resource do
         <span :if={@filter_count > 0} class="indicator-item badge badge-sm badge-secondary rounded-selector">
           {@filter_count}
         </span>
-        <label tabindex="0" class="btn btn-sm btn-outline ring-base-content/10 border-0 ring-1">
+        <div role="button" tabindex="0" class="btn btn-sm btn-outline ring-base-content/10 border-0 ring-1">
           <Backpex.HTML.CoreComponents.icon name="hero-funnel-solid" class={["mr-2 h-5 w-5", @filter_icon_class]} />
           {@label}
-        </label>
+        </div>
       </div>
       <div tabindex="0" class="dropdown-content z-[1] menu bg-base-100 rounded-box p-4 shadow">
         <.index_filter_forms filters={@filters} filter_options={@filter_options} live_resource={@live_resource} />
@@ -331,7 +331,7 @@ defmodule Backpex.HTML.Resource do
 
     ~H"""
     <div class={["dropdown", @class]}>
-      <label tabindex="0" class="hover:cursor-pointer">
+      <div role="button" tabindex="0" class="hover:cursor-pointer">
         <span class="sr-only">
           {Backpex.__("Toggle columns", @live_resource)}
         </span>
@@ -340,7 +340,7 @@ defmodule Backpex.HTML.Resource do
           aria-hidden="true"
           class="text-base-content/50 h-5 w-5 hover:text-base-content"
         />
-      </label>
+      </div>
       <div tabindex="0" class="dropdown-content menu bg-base-100 rounded-box min-w-52 max-w-72 p-4 shadow">
         <.form class="w-full" method="POST" for={@form} action={Router.cookie_path(@socket)}>
           <input type="hidden" name={@form[:_resource].name} value={@form[:_resource].value} />

From ae8516134cf88aa6a98bdd6cf90e17039e28160b Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 5 Jun 2025 12:35:18 +0200
Subject: [PATCH 02/26] Add missing name to input

---
 lib/backpex/html/resource/resource_index_table.html.heex | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/backpex/html/resource/resource_index_table.html.heex b/lib/backpex/html/resource/resource_index_table.html.heex
index b6e45a66..236ad59e 100644
--- a/lib/backpex/html/resource/resource_index_table.html.heex
+++ b/lib/backpex/html/resource/resource_index_table.html.heex
@@ -3,6 +3,7 @@
     <tr id="row-headers" phx-hook="BackpexStickyActions" class="border-b-2">
       <th :if={Enum.any?(index_item_actions(@item_actions))}>
         <input
+          name="select-all-items"
           phx-click="toggle-item-selection"
           type="checkbox"
           class="checkbox checkbox-sm"

From 763b4518197d773474ee894aa3bccffeba0124f4 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 5 Jun 2025 12:35:29 +0200
Subject: [PATCH 03/26] Add missing id to select input

---
 lib/backpex/html/form.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/backpex/html/form.ex b/lib/backpex/html/form.ex
index a76c40a0..7540f063 100644
--- a/lib/backpex/html/form.ex
+++ b/lib/backpex/html/form.ex
@@ -157,7 +157,7 @@ defmodule Backpex.HTML.Form do
               @errors != [] && "[&>*]:select-error [&>*]:bg-error/10 [&>*]:text-error-content"
             ]
         }>
-          <select class={@input_class} name={@name} {@rest}>
+          <select id={@id} class={@input_class} name={@name} {@rest}>
             <option :if={@prompt} value="">{@prompt}</option>
             {Phoenix.HTML.Form.options_for_select(@options, @value)}
           </select>

From df9e13ff3a21b7cd4ad0da8969e35d03f5653c8d Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 5 Jun 2025 13:06:29 +0200
Subject: [PATCH 04/26] Turn has many label into div

---
 lib/backpex/fields/has_many.ex | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/backpex/fields/has_many.ex b/lib/backpex/fields/has_many.ex
index 900ba463..01f6e689 100644
--- a/lib/backpex/fields/has_many.ex
+++ b/lib/backpex/fields/has_many.ex
@@ -139,10 +139,11 @@ defmodule Backpex.Fields.HasMany do
           <Layout.input_label text={@field_options[:label]} />
         </:label>
         <div class="dropdown w-full">
-          <label
+          <div
             tabindex="0"
+            role="button"
             class={[
-              "input block h-fit w-full p-2",
+              "input block h-fit w-full cursor-pointer p-2",
               @errors == [] && "bg-transparent",
               @errors != [] && "input-error bg-error/10"
             ]}
@@ -167,7 +168,7 @@ defmodule Backpex.Fields.HasMany do
                 </label>
               </div>
             </div>
-          </label>
+          </div>
           <Form.error :for={msg <- @errors} class="mt-1">{msg}</Form.error>
           <div tabindex="0" class="dropdown-content z-[1] menu bg-base-100 rounded-box w-full overflow-y-auto shadow">
             <div class="max-h-72 p-2">

From f9d9f7337cdb6b5ec725052d2d231df4e5bcc8d7 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 5 Jun 2025 13:08:02 +0200
Subject: [PATCH 05/26] Turn multi select label into div

---
 lib/backpex/html/form.ex | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/backpex/html/form.ex b/lib/backpex/html/form.ex
index 7540f063..88f720c8 100644
--- a/lib/backpex/html/form.ex
+++ b/lib/backpex/html/form.ex
@@ -276,7 +276,7 @@ defmodule Backpex.HTML.Form do
 
     ~H"""
     <div class="dropdown w-full">
-      <label tabindex="0" class="input block h-fit w-full p-2">
+      <div role="button" tabindex="0" class="input block h-fit w-full p-2">
         <div class="flex h-full w-full flex-wrap items-center gap-1 px-2">
           <p :if={@selected == []} class="text-base-content p-0.5 text-sm">
             {@prompt}
@@ -296,7 +296,7 @@ defmodule Backpex.HTML.Form do
             </div>
           </div>
         </div>
-      </label>
+      </div>
       <.error :for={msg <- @errors} :if={not @hide_errors} class="mt-1">{msg}</.error>
       <div tabindex="0" class="dropdown-content z-[1] menu bg-base-100 rounded-box w-full overflow-y-auto shadow">
         <div class="max-h-72 p-2">

From 444819845f7798ed319d74c909ae73e5a4609dfa Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 5 Jun 2025 13:13:40 +0200
Subject: [PATCH 06/26] Use `dynamic_tag` for `input_label/1` component

---
 lib/backpex/html/layout.ex | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/backpex/html/layout.ex b/lib/backpex/html/layout.ex
index e2b37499..64d0e947 100644
--- a/lib/backpex/html/layout.ex
+++ b/lib/backpex/html/layout.ex
@@ -584,8 +584,10 @@ defmodule Backpex.HTML.Layout do
   """
   @doc type: :component
 
+  attr :as, :string, default: "label", doc: "html tag name"
   attr :text, :string, doc: "text of the label"
   attr :for, :any, default: nil, doc: "form element the label is bound to"
+  attr :rest, :global
 
   def input_label(assigns) do
     assigns =
@@ -595,9 +597,9 @@ defmodule Backpex.HTML.Layout do
       end
 
     ~H"""
-    <label for={@for} class="text-content block break-words text-sm font-medium">
+    <.dynamic_tag tag_name={@as} for={@for} class="text-content block break-words text-sm font-medium" {@rest}>
       {@text}
-    </label>
+    </.dynamic_tag>
     """
   end
 

From 1ef56de04133b6fd5f6cbcd24efc5998b3da34dd Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 5 Jun 2025 13:17:02 +0200
Subject: [PATCH 07/26] Pass`for` to `input_label/1` for most of the fields

---
 lib/backpex/fields/belongs_to.ex       |  2 +-
 lib/backpex/fields/boolean.ex          |  2 +-
 lib/backpex/fields/currency.ex         |  2 +-
 lib/backpex/fields/date.ex             |  4 ++--
 lib/backpex/fields/date_time.ex        |  4 ++--
 lib/backpex/fields/has_many_through.ex |  2 +-
 lib/backpex/fields/inline_crud.ex      | 11 ++++++++---
 lib/backpex/fields/number.ex           |  4 ++--
 lib/backpex/fields/select.ex           |  2 +-
 lib/backpex/fields/text.ex             |  4 ++--
 lib/backpex/fields/textarea.ex         |  4 ++--
 lib/backpex/fields/time.ex             |  4 ++--
 lib/backpex/fields/upload.ex           |  2 +-
 lib/backpex/fields/url.ex              |  2 +-
 14 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/lib/backpex/fields/belongs_to.ex b/lib/backpex/fields/belongs_to.ex
index cefdd03e..3f66485e 100644
--- a/lib/backpex/fields/belongs_to.ex
+++ b/lib/backpex/fields/belongs_to.ex
@@ -136,7 +136,7 @@ defmodule Backpex.Fields.BelongsTo do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@owner_key]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="select"
diff --git a/lib/backpex/fields/boolean.ex b/lib/backpex/fields/boolean.ex
index 503aae9c..4c9eedda 100644
--- a/lib/backpex/fields/boolean.ex
+++ b/lib/backpex/fields/boolean.ex
@@ -37,7 +37,7 @@ defmodule Backpex.Fields.Boolean do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="toggle"
diff --git a/lib/backpex/fields/currency.ex b/lib/backpex/fields/currency.ex
index a31e6b9b..778d603c 100644
--- a/lib/backpex/fields/currency.ex
+++ b/lib/backpex/fields/currency.ex
@@ -70,7 +70,7 @@ defmodule Backpex.Fields.Currency do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="number"
diff --git a/lib/backpex/fields/date.ex b/lib/backpex/fields/date.ex
index 36be982d..d82cb45d 100644
--- a/lib/backpex/fields/date.ex
+++ b/lib/backpex/fields/date.ex
@@ -103,7 +103,7 @@ defmodule Backpex.Fields.Date do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="date"
@@ -124,7 +124,7 @@ defmodule Backpex.Fields.Date do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="date"
diff --git a/lib/backpex/fields/date_time.ex b/lib/backpex/fields/date_time.ex
index 04f2aa73..be338ac5 100644
--- a/lib/backpex/fields/date_time.ex
+++ b/lib/backpex/fields/date_time.ex
@@ -103,7 +103,7 @@ defmodule Backpex.Fields.DateTime do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="datetime-local"
@@ -124,7 +124,7 @@ defmodule Backpex.Fields.DateTime do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="datetime-local"
diff --git a/lib/backpex/fields/has_many_through.ex b/lib/backpex/fields/has_many_through.ex
index 5503fb13..95be76ea 100644
--- a/lib/backpex/fields/has_many_through.ex
+++ b/lib/backpex/fields/has_many_through.ex
@@ -537,7 +537,7 @@ defmodule Backpex.Fields.HasManyThrough do
     ~H"""
     <Layout.field_container>
       <:label>
-        <Layout.input_label text={@label} />
+        <Layout.input_label for={@form[@name]} text={@label} />
       </:label>
       <BackpexForm.input
         type="select"
diff --git a/lib/backpex/fields/inline_crud.ex b/lib/backpex/fields/inline_crud.ex
index 8bd97ea9..d2103415 100644
--- a/lib/backpex/fields/inline_crud.ex
+++ b/lib/backpex/fields/inline_crud.ex
@@ -129,7 +129,7 @@ defmodule Backpex.Fields.InlineCRUD do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label id={"inline-crud-label-#{@name}"} as="p" text={@field_options[:label]} />
         </:label>
 
         <div class="flex flex-col">
@@ -141,12 +141,17 @@ defmodule Backpex.Fields.InlineCRUD do
                 :for={{child_field_name, child_field_options} <- @child_fields}
                 class={child_field_class(child_field_options, assigns)}
               >
-                <p :if={f_nested.index == 0} class="mb-1 text-xs">
+                <span
+                  :if={f_nested.index == 0}
+                  id={"inline-crud-header-label-#{@name}-#{child_field_name}"}
+                  class="mb-1 text-xs"
+                >
                   {child_field_options.label}
-                </p>
+                </span>
                 <BackpexForm.input
                   type={input_type(child_field_options) |> Atom.to_string()}
                   field={f_nested[child_field_name]}
+                  aria-labelledby={"inline-crud-header-label-#{@name}-#{child_field_name} inline-crud-label-#{@name}"}
                   translate_error_fun={Backpex.Field.translate_error_fun(child_field_options, assigns)}
                   phx-debounce={Backpex.Field.debounce(child_field_options, assigns)}
                   phx-throttle={Backpex.Field.throttle(child_field_options, assigns)}
diff --git a/lib/backpex/fields/number.ex b/lib/backpex/fields/number.ex
index 7d4e3b76..dcc4a4a9 100644
--- a/lib/backpex/fields/number.ex
+++ b/lib/backpex/fields/number.ex
@@ -45,7 +45,7 @@ defmodule Backpex.Fields.Number do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="text"
@@ -66,7 +66,7 @@ defmodule Backpex.Fields.Number do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="text"
diff --git a/lib/backpex/fields/select.ex b/lib/backpex/fields/select.ex
index 01ba7203..7e64c4a8 100644
--- a/lib/backpex/fields/select.ex
+++ b/lib/backpex/fields/select.ex
@@ -70,7 +70,7 @@ defmodule Backpex.Fields.Select do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="select"
diff --git a/lib/backpex/fields/text.ex b/lib/backpex/fields/text.ex
index fda00fdb..b8165e58 100644
--- a/lib/backpex/fields/text.ex
+++ b/lib/backpex/fields/text.ex
@@ -44,7 +44,7 @@ defmodule Backpex.Fields.Text do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :center)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="text"
@@ -66,7 +66,7 @@ defmodule Backpex.Fields.Text do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :center)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="text"
diff --git a/lib/backpex/fields/textarea.ex b/lib/backpex/fields/textarea.ex
index dcdd2134..6a8f8656 100644
--- a/lib/backpex/fields/textarea.ex
+++ b/lib/backpex/fields/textarea.ex
@@ -53,7 +53,7 @@ defmodule Backpex.Fields.Textarea do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="textarea"
@@ -76,7 +76,7 @@ defmodule Backpex.Fields.Textarea do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="textarea"
diff --git a/lib/backpex/fields/time.ex b/lib/backpex/fields/time.ex
index 7021a7c2..3907e0e6 100644
--- a/lib/backpex/fields/time.ex
+++ b/lib/backpex/fields/time.ex
@@ -76,7 +76,7 @@ defmodule Backpex.Fields.Time do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="time"
@@ -97,7 +97,7 @@ defmodule Backpex.Fields.Time do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="time"
diff --git a/lib/backpex/fields/upload.ex b/lib/backpex/fields/upload.ex
index 46df7b94..05320873 100644
--- a/lib/backpex/fields/upload.ex
+++ b/lib/backpex/fields/upload.ex
@@ -654,7 +654,7 @@ defmodule Backpex.Fields.Upload do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@upload.ref} text={@field_options[:label]} />
         </:label>
         <div
           id={"#{@name}-drop-target"}
diff --git a/lib/backpex/fields/url.ex b/lib/backpex/fields/url.ex
index 2d3c138f..d3323b4c 100644
--- a/lib/backpex/fields/url.ex
+++ b/lib/backpex/fields/url.ex
@@ -51,7 +51,7 @@ defmodule Backpex.Fields.URL do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label for={@form[@name]} text={@field_options[:label]} />
         </:label>
         <BackpexForm.input
           type="text"

From 785967ded45d3aeacaff2989a0dc30a990ec1160 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 5 Jun 2025 13:20:48 +0200
Subject: [PATCH 08/26] Use description list elements on show view

---
 lib/backpex/html/resource.ex | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/lib/backpex/html/resource.ex b/lib/backpex/html/resource.ex
index d7a33c19..e8fe8065 100644
--- a/lib/backpex/html/resource.ex
+++ b/lib/backpex/html/resource.ex
@@ -859,14 +859,16 @@ defmodule Backpex.HTML.Resource do
       <div class="card bg-base-100 mt-4 shadow-sm">
         <div class="card-body p-0">
           <div class="flex flex-col sm:divide-base-200 sm:divide-y">
-            <div :for={{name, %{label: label}} <- @panel_fields}>
+            <dl :for={{name, %{label: label}} <- @panel_fields}>
               <.field_container>
                 <:label>
-                  <.input_label text={label} />
+                  <.input_label as="dt" text={label} />
                 </:label>
-                <.resource_field name={name} {assigns} />
+                <dd>
+                  <.resource_field name={name} {assigns} />
+                </dd>
               </.field_container>
-            </div>
+            </dl>
           </div>
         </div>
       </div>

From 73e054693f458632944ee87d3bc95eb6e00b05f5 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Fri, 13 Jun 2025 09:53:59 +0200
Subject: [PATCH 09/26] Put for into rest

---
 lib/backpex/html/layout.ex | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/backpex/html/layout.ex b/lib/backpex/html/layout.ex
index 64d0e947..b2ccdf07 100644
--- a/lib/backpex/html/layout.ex
+++ b/lib/backpex/html/layout.ex
@@ -592,12 +592,12 @@ defmodule Backpex.HTML.Layout do
   def input_label(assigns) do
     assigns =
       case assigns.for do
-        field = %Phoenix.HTML.FormField{} -> assign(assigns, :for, field.id)
-        id -> assign(assigns, :for, id)
+        field = %Phoenix.HTML.FormField{} -> assign(assigns, :rest, Map.put(assigns.rest, :for, field.id))
+        id -> assign(assigns, :rest, Map.put(assigns.rest, :for, id))
       end
 
     ~H"""
-    <.dynamic_tag tag_name={@as} for={@for} class="text-content block break-words text-sm font-medium" {@rest}>
+    <.dynamic_tag tag_name={@as} class="text-content block break-words text-sm font-medium" {@rest}>
       {@text}
     </.dynamic_tag>
     """

From 2aad5bb3d9ec28d1baa853df259faeaf394961d1 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Fri, 13 Jun 2025 09:57:59 +0200
Subject: [PATCH 10/26] Update tests

---
 demo/test/demo_web/live/category_live_test.exs | 2 +-
 demo/test/demo_web/live/tag_live_test.exs      | 4 ++--
 demo/test/demo_web/live/ticket_live_test.exs   | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/demo/test/demo_web/live/category_live_test.exs b/demo/test/demo_web/live/category_live_test.exs
index a94081fc..4f830367 100644
--- a/demo/test/demo_web/live/category_live_test.exs
+++ b/demo/test/demo_web/live/category_live_test.exs
@@ -52,7 +52,7 @@ defmodule DemoWeb.Live.CategoryLiveTest do
       conn
       |> visit(~p"/admin/categories/#{category.id}/show")
       |> assert_has("h1", text: "Category", exact: true)
-      |> assert_has("p", text: "Name", exact: true)
+      |> assert_has("dt", text: "Name", exact: true)
       |> assert_has("p", text: category.name, exact: true)
     end
   end
diff --git a/demo/test/demo_web/live/tag_live_test.exs b/demo/test/demo_web/live/tag_live_test.exs
index 2137fbf8..f7c61dbc 100644
--- a/demo/test/demo_web/live/tag_live_test.exs
+++ b/demo/test/demo_web/live/tag_live_test.exs
@@ -52,8 +52,8 @@ defmodule DemoWeb.Live.TagLiveTest do
       conn
       |> visit(~p"/admin/tags/#{tag.id}/show")
       |> assert_has("h1", text: "Tag", exact: true)
-      |> assert_has("p", text: "Name", exact: true)
-      |> assert_has("p", text: "Inserted At", exact: true)
+      |> assert_has("dt", text: "Name", exact: true)
+      |> assert_has("dt", text: "Inserted At", exact: true)
       |> assert_has("p", text: tag.name, exact: true)
     end
   end
diff --git a/demo/test/demo_web/live/ticket_live_test.exs b/demo/test/demo_web/live/ticket_live_test.exs
index 5cea2230..1905da45 100644
--- a/demo/test/demo_web/live/ticket_live_test.exs
+++ b/demo/test/demo_web/live/ticket_live_test.exs
@@ -35,8 +35,8 @@ defmodule DemoWeb.TicketLiveTest do
       conn
       |> visit(~p"/admin/tickets/#{ticket.id}/show")
       |> assert_has("h1", text: "Ticket", exact: true)
-      |> assert_has("p", text: "Subject", exact: true)
-      |> assert_has("p", text: "Body", exact: true)
+      |> assert_has("dt", text: "Subject", exact: true)
+      |> assert_has("dt", text: "Body", exact: true)
       |> assert_has("p", text: ticket.subject, exact: true)
       |> assert_has("p", text: ticket.body, exact: true)
     end

From e32edbc3c9c9f561c6aba2bfb0c74b08defaf1cf Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Fri, 13 Jun 2025 10:21:16 +0200
Subject: [PATCH 11/26] Use p element for has many through label

---
 lib/backpex/fields/has_many_through.ex | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/backpex/fields/has_many_through.ex b/lib/backpex/fields/has_many_through.ex
index 95be76ea..08284fb7 100644
--- a/lib/backpex/fields/has_many_through.ex
+++ b/lib/backpex/fields/has_many_through.ex
@@ -244,11 +244,11 @@ defmodule Backpex.Fields.HasManyThrough do
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns, :top)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label id={"has-many-through-label-#{@name}"} as="p" text={@field_options[:label]} />
         </:label>
 
         <div :if={@listables != []} class="ring-base-content/10 rounded-box mb-4 overflow-x-auto ring-1">
-          <table class="table">
+          <table class="table" aria-labelledby={"has-many-through-label-#{@name}"}>
             <thead class="bg-base-200/50 text-base-content uppercase">
               <tr>
                 <th

From d6299a7a86fee9df4f72a67fb5e7354c3c7ce40b Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Fri, 13 Jun 2025 10:31:53 +0200
Subject: [PATCH 12/26] Add aria-labelledby to new-relational button

---
 lib/backpex/fields/has_many_through.ex | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/lib/backpex/fields/has_many_through.ex b/lib/backpex/fields/has_many_through.ex
index 08284fb7..e993accf 100644
--- a/lib/backpex/fields/has_many_through.ex
+++ b/lib/backpex/fields/has_many_through.ex
@@ -361,7 +361,13 @@ defmodule Backpex.Fields.HasManyThrough do
           </div>
         </.modal>
 
-        <button type="button" class="btn btn-sm btn-outline btn-primary" phx-click="new-relational" phx-target={@myself}>
+        <button
+          type="button"
+          class="btn btn-sm btn-outline btn-primary"
+          phx-click="new-relational"
+          phx-target={@myself}
+          aria-labelledby={"has-many-through-label-#{@name}"}
+        >
           {@relational_title}
         </button>
 

From 25cb43c7fe02513ee746aa4b03468b8355f0e6df Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Fri, 13 Jun 2025 11:00:57 +0200
Subject: [PATCH 13/26] Turn label for multi select fields into p-element

---
 lib/backpex/fields/has_many.ex     | 2 +-
 lib/backpex/fields/multi_select.ex | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/backpex/fields/has_many.ex b/lib/backpex/fields/has_many.ex
index 01f6e689..cc865dbd 100644
--- a/lib/backpex/fields/has_many.ex
+++ b/lib/backpex/fields/has_many.ex
@@ -136,7 +136,7 @@ defmodule Backpex.Fields.HasMany do
     <div id={@name}>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label as="p" text={@field_options[:label]} />
         </:label>
         <div class="dropdown w-full">
           <div
diff --git a/lib/backpex/fields/multi_select.ex b/lib/backpex/fields/multi_select.ex
index 840f1793..ea29290f 100644
--- a/lib/backpex/fields/multi_select.ex
+++ b/lib/backpex/fields/multi_select.ex
@@ -143,7 +143,7 @@ defmodule Backpex.Fields.MultiSelect do
     <div id={@name}>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
-          <Layout.input_label text={@field_options[:label]} />
+          <Layout.input_label as="p" text={@field_options[:label]} />
         </:label>
         <Form.multi_select
           field={@form[@name]}

From 5cd7a94ac86ccbb35a30b9bd1f4ff7831db22074 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Fri, 27 Jun 2025 13:20:50 +0200
Subject: [PATCH 14/26] Update `show_panel` and `field_container` component

---
 guides/upgrading/v0.14.md    |  4 ++++
 lib/backpex/html/layout.ex   | 20 +++++++++++++-------
 lib/backpex/html/resource.ex | 10 ++++------
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/guides/upgrading/v0.14.md b/guides/upgrading/v0.14.md
index 82d8b7b0..b88e50c7 100644
--- a/guides/upgrading/v0.14.md
+++ b/guides/upgrading/v0.14.md
@@ -68,3 +68,7 @@ We've updated the `Backpex.HTML.Form.input/1` component:
 - `legend` element was replaced by `div` element to align with Phoenix CoreComponents
 
 If you use the `input/1` make sure to update your code to accommodate these breaking changes, particularly removing any references to the deprecated `input_wrapper_class` attribute.
+
+## Other component changes
+
+- `Backpex.HTML.Layout.field_container/1` now uses a `dl` element instead of a `div` element to better align with HTML semantics.
diff --git a/lib/backpex/html/layout.ex b/lib/backpex/html/layout.ex
index b2ccdf07..df0220ee 100644
--- a/lib/backpex/html/layout.ex
+++ b/lib/backpex/html/layout.ex
@@ -492,7 +492,7 @@ defmodule Backpex.HTML.Layout do
   """
   @doc type: :component
 
-  attr :class, :string, default: "", doc: "extra classes to be added"
+  attr :class, :any, default: nil, doc: "extra classes to be added"
 
   slot :label, required: true do
     attr :align, :atom, values: [:top, :center, :bottom]
@@ -501,16 +501,22 @@ defmodule Backpex.HTML.Layout do
   slot :inner_block
 
   def field_container(assigns) do
+    assigns =
+      update(assigns, :label, fn
+        [label] -> label
+        _other -> raise ArgumentError, "Expected a single label slot, got: #{inspect(assigns.label)}"
+      end)
+
     ~H"""
-    <div class={"#{@class} flex flex-col items-stretch space-y-2 px-6 py-4 sm:flex-row sm:space-y-0 sm:py-3"}>
-      <div :for={label <- @label} class={"#{get_align_class(label[:align])} hyphens-auto break-words pr-2 sm:w-1/4"}>
+    <dl class={["flex flex-col items-stretch space-y-2 px-6 py-4 sm:flex-row sm:space-y-0 sm:py-3", @class]}>
+      <dt class={["hyphens-auto break-words pr-2 sm:w-1/4", get_align_class(@label[:align])]}>
         {render_slot(@label)}
-      </div>
+      </dt>
 
-      <div class="w-full sm:w-3/4">
+      <dd class="w-full sm:w-3/4">
         {render_slot(@inner_block)}
-      </div>
-    </div>
+      </dd>
+    </dl>
     """
   end
 
diff --git a/lib/backpex/html/resource.ex b/lib/backpex/html/resource.ex
index cee09cc0..9db92ef9 100644
--- a/lib/backpex/html/resource.ex
+++ b/lib/backpex/html/resource.ex
@@ -860,16 +860,14 @@ defmodule Backpex.HTML.Resource do
       <div class="card bg-base-100 mt-4 shadow-sm">
         <div class="card-body p-0">
           <div class="flex flex-col sm:divide-base-200 sm:divide-y">
-            <dl :for={{name, %{label: label}} <- @panel_fields}>
+            <div :for={{name, %{label: label}} <- @panel_fields}>
               <.field_container>
                 <:label>
-                  <.input_label as="dt" text={label} />
+                  <.input_label as="span" text={label} />
                 </:label>
-                <dd>
-                  <.resource_field name={name} {assigns} />
-                </dd>
+                <.resource_field name={name} {assigns} />
               </.field_container>
-            </dl>
+            </div>
           </div>
         </div>
       </div>

From b4a860e699e3a61112b5d36c382cf873aa95f98f Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Fri, 27 Jun 2025 13:26:53 +0200
Subject: [PATCH 15/26] Add screen reader support for delete button in
 InlineCRUD component

---
 lib/backpex/fields/inline_crud.ex | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/backpex/fields/inline_crud.ex b/lib/backpex/fields/inline_crud.ex
index d2103415..00d567d8 100644
--- a/lib/backpex/fields/inline_crud.ex
+++ b/lib/backpex/fields/inline_crud.ex
@@ -168,8 +168,9 @@ defmodule Backpex.Fields.InlineCRUD do
                     class="hidden"
                   />
 
-                  <div class="btn btn-outline btn-error" aria-label={Backpex.__("Delete", @live_resource)}>
+                  <div class="btn btn-outline btn-error">
                     <Backpex.HTML.CoreComponents.icon name="hero-trash" class="h-5 w-5" />
+                    <span class="sr-only">{Backpex.__("Delete", @live_resource)}</span>
                   </div>
                 </label>
               </div>

From 7c4ebe74e9ec7440d43dfc634c10d21156150a80 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Fri, 27 Jun 2025 13:30:42 +0200
Subject: [PATCH 16/26] Wrap sidebar items in ul-element

---
 lib/backpex/html/layout.ex | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/backpex/html/layout.ex b/lib/backpex/html/layout.ex
index df0220ee..b2c50dec 100644
--- a/lib/backpex/html/layout.ex
+++ b/lib/backpex/html/layout.ex
@@ -34,12 +34,12 @@ defmodule Backpex.HTML.Layout do
       <input id="menu-drawer" type="checkbox" class="drawer-toggle" />
       <div class="drawer-content">
         <div class="bg-base-200 fixed inset-0 -z-10 h-full w-full"></div>
-        <div class={[
+        <ul class={[
           "menu hidden overflow-y-scroll px-2 pt-5 pb-4 md:fixed md:inset-y-0 md:mt-16 md:block md:w-64",
           build_slot_class(@sidebar)
         ]}>
           {render_slot(@sidebar)}
-        </div>
+        </ul>
 
         <div class={["flex flex-1 flex-col", length(@sidebar) > 0 && "md:pl-64"]}>
           <div class="fixed top-0 z-30 block w-full md:-ml-64">
@@ -61,12 +61,12 @@ defmodule Backpex.HTML.Layout do
       </div>
       <div class="drawer-side z-40">
         <label for="menu-drawer" class="drawer-overlay"></label>
-        <div class={[
+        <ul class={[
           "bg-base-100 menu min-h-full w-64 flex-1 flex-col overflow-y-auto px-2 pt-5 pb-4",
           build_slot_class(@sidebar)
         ]}>
           {render_slot(@sidebar)}
-        </div>
+        </ul>
       </div>
     </div>
     """

From 9b4d17f6991a72ba1edb93ba640c08a7ea1f4b46 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Wed, 30 Jul 2025 15:36:53 +0200
Subject: [PATCH 17/26] Transform inline crud checkboxes to buttons

---
 guides/upgrading/v0.14.md         |  8 +++++++
 lib/backpex/fields/inline_crud.ex | 38 +++++++++++++++----------------
 priv/gettext/backpex.pot          |  4 ++++
 3 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/guides/upgrading/v0.14.md b/guides/upgrading/v0.14.md
index 9db9d705..bb878804 100644
--- a/guides/upgrading/v0.14.md
+++ b/guides/upgrading/v0.14.md
@@ -85,3 +85,11 @@ def changeset(change, attrs, _metadata) do
   |> Ecto.Changeset.validate_required([:field1])
 end
 ```
+
+## Add translations
+
+Make sure to add the following translations:
+
+- `"Delete row with index %{index}"`
+
+See the [the backpex.pot file for v0.14.0](https://github.com/naymspace/backpex/blob/0.14.0/priv/gettext/backpex.pot) in our GitHub repository for all available translations to match on.
diff --git a/lib/backpex/fields/inline_crud.ex b/lib/backpex/fields/inline_crud.ex
index 00d567d8..99bb38eb 100644
--- a/lib/backpex/fields/inline_crud.ex
+++ b/lib/backpex/fields/inline_crud.ex
@@ -158,33 +158,31 @@ defmodule Backpex.Fields.InlineCRUD do
                 />
               </div>
 
-              <div class={if f_nested.index == 0, do: "mt-5", else: nil}>
-                <label for={"#{@name}-checkbox-delete-#{f_nested.index}"}>
-                  <input
-                    id={"#{@name}-checkbox-delete-#{f_nested.index}"}
-                    type="checkbox"
-                    name={"change[#{@name}_delete][]"}
-                    value={f_nested.index}
-                    class="hidden"
-                  />
-
-                  <div class="btn btn-outline btn-error">
-                    <Backpex.HTML.CoreComponents.icon name="hero-trash" class="h-5 w-5" />
-                    <span class="sr-only">{Backpex.__("Delete", @live_resource)}</span>
-                  </div>
-                </label>
-              </div>
+              <button
+                type="button"
+                name={"change[#{@name}_delete][]"}
+                class={["btn btn-outline btn-error", f_nested.index == 0 && "mt-5"]}
+                phx-click={JS.dispatch("change")}
+                value={f_nested.index}
+                aria-label={Backpex.__({"Delete row with index %{index}", %{index: f_nested.index}}, @live_resource)}
+              >
+                <Backpex.HTML.CoreComponents.icon name="hero-trash" class="size-5" />
+              </button>
             </div>
           </.inputs_for>
 
           <input type="hidden" name={"change[#{@name}_delete][]"} />
         </div>
-        <input
+
+        <button
+          type="button"
           name={"change[#{@name}_order][]"}
-          type="checkbox"
-          aria-label={Backpex.__("Add entry", @live_resource)}
           class="btn btn-outline btn-sm btn-primary"
-        />
+          phx-click={JS.dispatch("change")}
+          value="new"
+        >
+          {Backpex.__("Add entry", @live_resource)}
+        </button>
 
         <%= if help_text = Backpex.Field.help_text(@field_options, assigns) do %>
           <Backpex.HTML.Form.help_text class="mt-1">{help_text}</Backpex.HTML.Form.help_text>
diff --git a/priv/gettext/backpex.pot b/priv/gettext/backpex.pot
index d19b6630..735f6efc 100644
--- a/priv/gettext/backpex.pot
+++ b/priv/gettext/backpex.pot
@@ -83,6 +83,10 @@ msgstr ""
 msgid "Delete"
 msgstr ""
 
+#, elixir-autogen, elixir-format
+msgid "Delete row with index %{index}"
+msgstr ""
+
 #, elixir-autogen, elixir-format
 msgid "Deselect all"
 msgstr ""

From 888a5a33afb01fc0834d1faa2af928e6bc151711 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Wed, 30 Jul 2025 15:41:36 +0200
Subject: [PATCH 18/26] Add text for screen readers to table action header

---
 guides/upgrading/v0.14.md                            |  1 +
 lib/backpex/fields/has_many_through.ex               | 12 ++++++++++--
 .../html/resource/resource_index_table.html.heex     |  6 +++++-
 priv/gettext/backpex.pot                             |  4 ++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/guides/upgrading/v0.14.md b/guides/upgrading/v0.14.md
index bb878804..12558706 100644
--- a/guides/upgrading/v0.14.md
+++ b/guides/upgrading/v0.14.md
@@ -91,5 +91,6 @@ end
 Make sure to add the following translations:
 
 - `"Delete row with index %{index}"`
+- `"Actions"`
 
 See the [the backpex.pot file for v0.14.0](https://github.com/naymspace/backpex/blob/0.14.0/priv/gettext/backpex.pot) in our GitHub repository for all available translations to match on.
diff --git a/lib/backpex/fields/has_many_through.ex b/lib/backpex/fields/has_many_through.ex
index 7dd1049b..ec6d0e13 100644
--- a/lib/backpex/fields/has_many_through.ex
+++ b/lib/backpex/fields/has_many_through.ex
@@ -166,7 +166,11 @@ defmodule Backpex.Fields.HasManyThrough do
             >
               {label}
             </th>
-            <th></th>
+            <th>
+              <span class="sr-only">
+                {Backpex.__("Actions", @live_resource)}
+              </span>
+            </th>
           </tr>
         </thead>
         <tbody class="text-base-content/75">
@@ -263,7 +267,11 @@ defmodule Backpex.Fields.HasManyThrough do
                 >
                   {label}
                 </th>
-                <th></th>
+                <th>
+                  <span class="sr-only">
+                    {Backpex.__("Actions", @live_resource)}
+                  </span>
+                </th>
               </tr>
             </thead>
             <tbody class="text-base-content/90">
diff --git a/lib/backpex/html/resource/resource_index_table.html.heex b/lib/backpex/html/resource/resource_index_table.html.heex
index 236ad59e..90982f56 100644
--- a/lib/backpex/html/resource/resource_index_table.html.heex
+++ b/lib/backpex/html/resource/resource_index_table.html.heex
@@ -27,7 +27,11 @@
           <% end %>
         </div>
       </th>
-      <th class={["bg-base-100", sticky_col_class()]}></th>
+      <th class={["bg-base-100", sticky_col_class()]}>
+        <span class="sr-only">
+          {Backpex.__("Actions", @live_resource)}
+        </span>
+      </th>
     </tr>
   </thead>
   <tbody>
diff --git a/priv/gettext/backpex.pot b/priv/gettext/backpex.pot
index 735f6efc..190d7391 100644
--- a/priv/gettext/backpex.pot
+++ b/priv/gettext/backpex.pot
@@ -27,6 +27,10 @@ msgstr ""
 msgid "(%{count} total)"
 msgstr ""
 
+#, elixir-autogen, elixir-format
+msgid "Actions"
+msgstr ""
+
 #, elixir-autogen, elixir-format
 msgid "Add entry"
 msgstr ""

From b1a559afc70a821310fb154ea6746306fbcb0bf3 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Wed, 30 Jul 2025 15:47:27 +0200
Subject: [PATCH 19/26] Add screenreader text to mobile theme selector

---
 lib/backpex/html/layout.ex | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/lib/backpex/html/layout.ex b/lib/backpex/html/layout.ex
index b2c50dec..89c62a46 100644
--- a/lib/backpex/html/layout.ex
+++ b/lib/backpex/html/layout.ex
@@ -278,11 +278,14 @@ defmodule Backpex.HTML.Layout do
       <%!-- Desktop Icon --%>
       <div tabindex="0" role="button" class="btn btn-ghost hidden md:flex">
         {@label}
-        <Backpex.HTML.CoreComponents.icon name="hero-chevron-down" class="h-3 w-3" />
+        <Backpex.HTML.CoreComponents.icon name="hero-chevron-down" class="size-3" />
       </div>
       <%!-- Mobile Icon --%>
       <div tabindex="0" role="button" class="btn btn-square btn-ghost md:hidden">
-        <Backpex.HTML.CoreComponents.icon name="hero-swatch" class="size-6 md:hidden" />
+        <span class="sr-only">
+          {Backpex.__("Select theme")}
+        </span>
+        <Backpex.HTML.CoreComponents.icon name="hero-swatch" class="size-6" />
       </div>
       <form
         id="backpex-theme-selector-form"

From 20417a1b0f6670c2f15107be31c06feb3be2c6c7 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Wed, 30 Jul 2025 15:49:42 +0200
Subject: [PATCH 20/26] Add missing translation

---
 guides/upgrading/v0.14.md | 1 +
 priv/gettext/backpex.pot  | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/guides/upgrading/v0.14.md b/guides/upgrading/v0.14.md
index 12558706..85f394c0 100644
--- a/guides/upgrading/v0.14.md
+++ b/guides/upgrading/v0.14.md
@@ -92,5 +92,6 @@ Make sure to add the following translations:
 
 - `"Delete row with index %{index}"`
 - `"Actions"`
+- `"Select theme"`
 
 See the [the backpex.pot file for v0.14.0](https://github.com/naymspace/backpex/blob/0.14.0/priv/gettext/backpex.pot) in our GitHub repository for all available translations to match on.
diff --git a/priv/gettext/backpex.pot b/priv/gettext/backpex.pot
index 190d7391..22f6c71d 100644
--- a/priv/gettext/backpex.pot
+++ b/priv/gettext/backpex.pot
@@ -187,6 +187,10 @@ msgstr ""
 msgid "Select options..."
 msgstr ""
 
+#, elixir-autogen, elixir-format
+msgid "Select theme"
+msgstr ""
+
 #, elixir-autogen, elixir-format
 msgid "selected"
 msgstr ""

From 1b4b500ee6b716cb229d73366dff384ac871a7c1 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 31 Jul 2025 10:28:44 +0200
Subject: [PATCH 21/26] Improve accessibility of upload input

---
 lib/backpex/fields/upload.ex | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/backpex/fields/upload.ex b/lib/backpex/fields/upload.ex
index 9ef43575..b3c07cc8 100644
--- a/lib/backpex/fields/upload.ex
+++ b/lib/backpex/fields/upload.ex
@@ -670,11 +670,11 @@ defmodule Backpex.Fields.Upload do
             <div class="flex flex-col items-center space-y-1 text-center">
               <Backpex.HTML.CoreComponents.icon name="hero-document-arrow-up" class="text-base-content/50 h-8 w-8" />
               <div class="flex text-sm">
-                <label>
-                  <a class="link link-hover link-primary font-medium">
+                <label class="focus-within:rounded-[var(--radius-box)] focus-within:ring-primary focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-1">
+                  <span class="link link-hover link-primary font-medium">
                     {Backpex.__("Upload a file", @live_resource)}
-                  </a>
-                  <.live_file_input :if={@uploads_allowed} upload={@upload} phx-target="#form-component" class="hidden" />
+                  </span>
+                  <.live_file_input :if={@uploads_allowed} upload={@upload} phx-target="#form-component" class="sr-only" />
                 </label>
                 <input
                   type="hidden"

From 513e4fe99fafc36391189d91a03a1c4df9caacfe Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 31 Jul 2025 10:31:21 +0200
Subject: [PATCH 22/26] Remove button elements from links

---
 lib/backpex/html/resource.ex                  | 25 +++++++++++--------
 .../html/resource/form_component.html.heex    |  6 ++---
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/lib/backpex/html/resource.ex b/lib/backpex/html/resource.ex
index 9db92ef9..5c9020d4 100644
--- a/lib/backpex/html/resource.ex
+++ b/lib/backpex/html/resource.ex
@@ -625,19 +625,20 @@ defmodule Backpex.HTML.Resource do
   def resource_buttons(assigns) do
     ~H"""
     <div class="mb-4 flex space-x-2">
-      <.link :if={@live_resource.can?(assigns, :new, nil)} patch={Router.get_path(@socket, @live_resource, @params, :new)}>
-        <button class="btn btn-sm btn-outline btn-primary">
-          {@create_button_label}
-        </button>
+      <.link
+        :if={@live_resource.can?(assigns, :new, nil)}
+        patch={Router.get_path(@socket, @live_resource, @params, :new)}
+        class="btn btn-sm btn-outline btn-primary"
+      >
+        {@create_button_label}
       </.link>
 
       <.link
         :for={{key, action} <- resource_actions(assigns, @resource_actions)}
         patch={Router.get_path(@socket, @live_resource, @params, :resource_action, key, @query_options)}
+        class="btn btn-sm btn-outline btn-primary"
       >
-        <button class="btn btn-sm btn-outline btn-primary">
-          {ResourceAction.name(action, :label)}
-        </button>
+        {ResourceAction.name(action, :label)}
       </.link>
 
       <div :if={display_divider?(assigns)} class="border-base-300 my-0.5 border-r-2 border-solid" />
@@ -774,10 +775,12 @@ defmodule Backpex.HTML.Resource do
             subtitle={Backpex.__("Try a different filter setting or clear all filters.", @live_resource)}
           />
           <.empty_state_content :if={not @search_active? and not @filter_active?} title={@title}>
-            <.link :if={@create_allowed} patch={Router.get_path(@socket, @live_resource, @params, :new)}>
-              <button class="btn btn-sm btn-outline btn-primary mt-6">
-                {@create_button_label}
-              </button>
+            <.link
+              :if={@create_allowed}
+              patch={Router.get_path(@socket, @live_resource, @params, :new)}
+              class="btn btn-sm btn-outline btn-primary mt-6"
+            >
+              {@create_button_label}
             </.link>
           </.empty_state_content>
         </div>
diff --git a/lib/backpex/html/resource/form_component.html.heex b/lib/backpex/html/resource/form_component.html.heex
index 1a2daf0c..faed05b6 100644
--- a/lib/backpex/html/resource/form_component.html.heex
+++ b/lib/backpex/html/resource/form_component.html.heex
@@ -60,10 +60,8 @@
             {@action_to_confirm.module.confirm_label(assigns)}
           </button>
         <% else %>
-          <.link navigate={@live_resource.return_to(@socket, assigns, @live_action, :cancel, @item)}>
-            <button type="button" class="btn">
-              {Backpex.__("Cancel", @live_resource)}
-            </button>
+          <.link navigate={@live_resource.return_to(@socket, assigns, @live_action, :cancel, @item)} class="btn">
+            {Backpex.__("Cancel", @live_resource)}
           </.link>
           <button
             :if={@continue_label}

From c15d89ed85008777ef6c836d1c7ddec96ec4cf71 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 31 Jul 2025 10:34:33 +0200
Subject: [PATCH 23/26] Fix wrong key is being used in select_relational_field

---
 lib/backpex/fields/has_many_through.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/backpex/fields/has_many_through.ex b/lib/backpex/fields/has_many_through.ex
index ec6d0e13..ae003b52 100644
--- a/lib/backpex/fields/has_many_through.ex
+++ b/lib/backpex/fields/has_many_through.ex
@@ -551,7 +551,7 @@ defmodule Backpex.Fields.HasManyThrough do
     ~H"""
     <Layout.field_container>
       <:label>
-        <Layout.input_label for={@form[@name]} text={@label} />
+        <Layout.input_label for={@form[@owner_key]} text={@label} />
       </:label>
       <BackpexForm.input
         type="select"

From 89750da8f85813771cd4cb7dd2205ed43fa58c9f Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Thu, 31 Jul 2025 10:38:47 +0200
Subject: [PATCH 24/26] Adapt tests to new html structure

---
 demo/test/demo_web/live/category_live_test.exs | 6 +++---
 demo/test/demo_web/live/tag_live_test.exs      | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/demo/test/demo_web/live/category_live_test.exs b/demo/test/demo_web/live/category_live_test.exs
index 4f830367..2d2a4a35 100644
--- a/demo/test/demo_web/live/category_live_test.exs
+++ b/demo/test/demo_web/live/category_live_test.exs
@@ -12,7 +12,7 @@ defmodule DemoWeb.Live.CategoryLiveTest do
       conn
       |> visit(~p"/admin/categories")
       |> assert_has("h1", text: "Categories", exact: true)
-      |> assert_has("button", text: "New Category", exact: true)
+      |> assert_has("a", text: "New Category", exact: true)
       |> assert_has("button[disabled]", text: "Delete", exact: true)
       |> assert_has("div", text: "Items 1 to 3 (3 total)", exact: true)
       |> assert_has("table tbody tr", count: 3)
@@ -64,7 +64,7 @@ defmodule DemoWeb.Live.CategoryLiveTest do
       conn
       |> visit(~p"/admin/categories/#{category.id}/edit")
       |> assert_has("h1", text: "Edit Category", exact: true)
-      |> assert_has("button", text: "Cancel", exact: true)
+      |> assert_has("a", text: "Cancel", exact: true)
       |> assert_has("button", text: "Save", exact: true)
     end
 
@@ -89,7 +89,7 @@ defmodule DemoWeb.Live.CategoryLiveTest do
       conn
       |> visit(~p"/admin/categories/new")
       |> assert_has("h1", text: "New Category", exact: true)
-      |> assert_has("button", text: "Cancel", exact: true)
+      |> assert_has("a", text: "Cancel", exact: true)
       |> assert_has("button", text: "Save", exact: true)
     end
 
diff --git a/demo/test/demo_web/live/tag_live_test.exs b/demo/test/demo_web/live/tag_live_test.exs
index f7c61dbc..64b0a47e 100644
--- a/demo/test/demo_web/live/tag_live_test.exs
+++ b/demo/test/demo_web/live/tag_live_test.exs
@@ -12,7 +12,7 @@ defmodule DemoWeb.Live.TagLiveTest do
       conn
       |> visit(~p"/admin/tags")
       |> assert_has("h1", text: "Tags", exact: true)
-      |> assert_has("button", text: "New Tag", exact: true)
+      |> assert_has("a", text: "New Tag", exact: true)
       |> assert_has("button[disabled]", text: "Delete", exact: true)
       |> assert_has("div", text: "Items 1 to 3 (3 total)", exact: true)
       |> assert_has("table tbody tr", count: 3)
@@ -65,7 +65,7 @@ defmodule DemoWeb.Live.TagLiveTest do
       conn
       |> visit(~p"/admin/tags/#{tag.id}/edit")
       |> assert_has("h1", text: "Edit Tag", exact: true)
-      |> assert_has("button", text: "Cancel", exact: true)
+      |> assert_has("a", text: "Cancel", exact: true)
       |> assert_has("button", text: "Save", exact: true)
     end
 
@@ -90,7 +90,7 @@ defmodule DemoWeb.Live.TagLiveTest do
       conn
       |> visit(~p"/admin/tags/new")
       |> assert_has("h1", text: "New Tag", exact: true)
-      |> assert_has("button", text: "Cancel", exact: true)
+      |> assert_has("a", text: "Cancel", exact: true)
       |> assert_has("button", text: "Save", exact: true)
     end
 

From 9cefd8089ef7045ac436278fc9b63518a677a6a8 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Fri, 1 Aug 2025 09:04:45 +0200
Subject: [PATCH 25/26] Move changes to v0.15 upgrade guide

---
 guides/upgrading/v0.14.md | 24 +++++-------------------
 guides/upgrading/v0.15.md | 27 +++++++++++++++++++++++++++
 mix.exs                   |  1 +
 3 files changed, 33 insertions(+), 19 deletions(-)
 create mode 100644 guides/upgrading/v0.15.md

diff --git a/guides/upgrading/v0.14.md b/guides/upgrading/v0.14.md
index b3709791..1d9f5ee7 100644
--- a/guides/upgrading/v0.14.md
+++ b/guides/upgrading/v0.14.md
@@ -5,11 +5,11 @@
 Update Backpex to the latest version:
 
 ```elixir
-  defp deps do
-    [
-      {:backpex, "~> 0.14.0"}
-    ]
-  end
+defp deps do
+  [
+    {:backpex, "~> 0.14.0"}
+  ]
+end
 ```
 
 ## Filter callback functions have been changed
@@ -69,10 +69,6 @@ We've updated the `Backpex.HTML.Form.input/1` component:
 
 If you use the `input/1` make sure to update your code to accommodate these breaking changes, particularly removing any references to the deprecated `input_wrapper_class` attribute.
 
-## Other component changes
-
-- `Backpex.HTML.Layout.field_container/1` now uses a `dl` element instead of a `div` element to better align with HTML semantics.
-
 ## Item Actions with form require `changeset/3` callback
 
 All item actions that define fields (basically all item actions with a form) must also implement `c:Backpex.ItemAction.changeset/3`. This is necessary for validating and casting the parameters received from the form.
@@ -104,13 +100,3 @@ end
 ```
 
 See the [Readonly guide](readonly.md) for more details.
-
-## Add translations
-
-Make sure to add the following translations:
-
-- `"Delete row with index %{index}"`
-- `"Actions"`
-- `"Select theme"`
-
-See the [the backpex.pot file for v0.14.0](https://github.com/naymspace/backpex/blob/0.14.0/priv/gettext/backpex.pot) in our GitHub repository for all available translations to match on.
diff --git a/guides/upgrading/v0.15.md b/guides/upgrading/v0.15.md
new file mode 100644
index 00000000..eb277e34
--- /dev/null
+++ b/guides/upgrading/v0.15.md
@@ -0,0 +1,27 @@
+# Upgrading to v0.14
+
+## Bump Your Deps
+
+Update Backpex to the latest version:
+
+```elixir
+defp deps do
+  [
+    {:backpex, "~> 0.15.0"}
+  ]
+end
+```
+
+## Component changes
+
+- `Backpex.HTML.Layout.field_container/1` now uses a `dl` element instead of a `div` element to better align with HTML semantics.
+
+## Add translations
+
+Make sure to add the following translations:
+
+- `"Delete row with index %{index}"`
+- `"Actions"`
+- `"Select theme"`
+
+See the [the backpex.pot file for v0.14.0](https://github.com/naymspace/backpex/blob/0.14.0/priv/gettext/backpex.pot) in our GitHub repository for all available translations to match on.
diff --git a/mix.exs b/mix.exs
index 02371419..b145775c 100644
--- a/mix.exs
+++ b/mix.exs
@@ -181,6 +181,7 @@ defmodule Backpex.MixProject do
       "guides/translations/translations.md",
 
       # Upgrade Guides
+      "guides/upgrading/v0.15.md",
       "guides/upgrading/v0.14.md",
       "guides/upgrading/v0.13.md",
       "guides/upgrading/v0.12.md",

From 0e881fed05f5e8b07a983c3dd9bff3be07a1f691 Mon Sep 17 00:00:00 2001
From: Florian Arens <60519307+Flo0807@users.noreply.github.com>
Date: Fri, 22 Aug 2025 15:20:34 +0200
Subject: [PATCH 26/26] Add title and aria-label to topbar dropdown

---
 demo/lib/demo_web/components/layouts/admin.html.heex | 2 +-
 guides/get_started/installation.md                   | 2 +-
 lib/backpex/html/layout.ex                           | 3 ++-
 priv/templates/layouts/admin.html.heex               | 4 ++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/demo/lib/demo_web/components/layouts/admin.html.heex b/demo/lib/demo_web/components/layouts/admin.html.heex
index cf8fca6b..a6cfc6bf 100644
--- a/demo/lib/demo_web/components/layouts/admin.html.heex
+++ b/demo/lib/demo_web/components/layouts/admin.html.heex
@@ -40,7 +40,7 @@
         {"Sunset", "sunset"}
       ]}
     />
-    <Backpex.HTML.Layout.topbar_dropdown class="mr-2 md:mr-0">
+    <Backpex.HTML.Layout.topbar_dropdown class="mr-2 md:mr-0" title="User menu" aria-label="Open user menu">
       <:label>
         <div class="btn btn-square btn-ghost">
           <Backpex.HTML.CoreComponents.icon name="hero-user" class="size-6" />
diff --git a/guides/get_started/installation.md b/guides/get_started/installation.md
index c32542ef..ea68f7e7 100644
--- a/guides/get_started/installation.md
+++ b/guides/get_started/installation.md
@@ -142,7 +142,7 @@ To get you started quickly, we provide a layout you can copy & paste into your a
   <:topbar>
     <Backpex.HTML.Layout.topbar_branding />
 
-    <Backpex.HTML.Layout.topbar_dropdown class="mr-2 md:mr-0">
+    <Backpex.HTML.Layout.topbar_dropdown class="mr-2 md:mr-0" title="User menu" aria-label="Open user menu">
       <:label>
         <label tabindex="0" class="btn btn-square btn-ghost">
           <Backpex.HTML.CoreComponents.icon name="hero-user" class="size-6" />
diff --git a/lib/backpex/html/layout.ex b/lib/backpex/html/layout.ex
index 89c62a46..f2cddbc0 100644
--- a/lib/backpex/html/layout.ex
+++ b/lib/backpex/html/layout.ex
@@ -378,13 +378,14 @@ defmodule Backpex.HTML.Layout do
   @doc type: :component
 
   attr :class, :string, required: false, default: nil, doc: "additional class that will be added to the component"
+  attr :rest, :global, doc: "attributes that will be added to the dropdown button"
 
   slot :label, required: true, doc: "label of the dropdown"
 
   def topbar_dropdown(assigns) do
     ~H"""
     <div class={["dropdown dropdown-end", @class]}>
-      <div tabindex="0" role="button">
+      <div tabindex="0" role="button" {@rest}>
         {render_slot(@label)}
       </div>
       <ul tabindex="0" class="dropdown-content z-[1] menu bg-base-100 rounded-box w-52 p-2 shadow">
diff --git a/priv/templates/layouts/admin.html.heex b/priv/templates/layouts/admin.html.heex
index 8ec6ae03..7a01c9f5 100644
--- a/priv/templates/layouts/admin.html.heex
+++ b/priv/templates/layouts/admin.html.heex
@@ -2,7 +2,7 @@
   <:topbar>
     <Backpex.HTML.Layout.topbar_branding />
 
-    <Backpex.HTML.Layout.topbar_dropdown>
+    <Backpex.HTML.Layout.topbar_dropdown title="User menu" aria-label="Open user menu">
       <:label>
         <label tabindex="0" class="btn btn-square btn-ghost">
           <.icon name="hero-user" class="size-6" />
@@ -24,4 +24,4 @@
   </:sidebar>
   <Backpex.HTML.Layout.flash_messages flash={@flash} />
     {@inner_content}
-</Backpex.HTML.Layout.app_shell>
\ No newline at end of file
+</Backpex.HTML.Layout.app_shell>