Merge pull request #1576 from naymspace/feature/improve-input-label-component

pehbehbeh · web-flow · commit d145eb577519 · 2025-09-30T08:13:12.000Z
Improve `input_label/1` component
diff --git a/guides/fields/custom-fields.md b/guides/fields/custom-fields.md
@@ -33,7 +33,7 @@ def render_form(assigns) do
 <div>
     <Layout.field_container>
     <:label>
-        <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/guides/fields/readonly.md b/guides/fields/readonly.md
@@ -58,7 +58,7 @@ def render_form(assigns) do
 <div>
   <Layout.field_container>
     <:label>
-        <Layout.input_label text={@field[:label]} />
+        <Layout.input_label for={@form[@name]} text={@field[:label]} />
     </:label>
     <BackpexForm.input
       type="text"
diff --git a/guides/upgrading/v0.16.md b/guides/upgrading/v0.16.md
@@ -14,4 +14,5 @@ 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.
+- `Backpex.HTML.Layout.field_container/1` now uses a `dl` element instead of a `div` element to better align with HTML semantics
+- `Backpex.HTML.Layout.input_label/1` has been enhanced by adding `as`, `for` and `rest` attribute
diff --git 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
@@ -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
@@ -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
@@ -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"
diff --git 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"
diff --git a/lib/backpex/fields/email.ex b/lib/backpex/fields/email.ex
@@ -44,7 +44,7 @@ defmodule Backpex.Fields.Email 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="email"
diff --git 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="span" text={@field_options[:label]} />
         </:label>
         <div class="dropdown w-full">
           <label
diff --git a/lib/backpex/fields/has_many_through.ex b/lib/backpex/fields/has_many_through.ex
@@ -238,11 +238,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="span" 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
@@ -535,7 +535,7 @@ defmodule Backpex.Fields.HasManyThrough do
     ~H"""
     <Layout.field_container>
       <:label>
-        <Layout.input_label text={@label} />
+        <Layout.input_label for={@form[@owner_key]} text={@label} />
       </:label>
       <BackpexForm.input
         type="select"
diff --git 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="span" 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/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="span" text={@field_options[:label]} />
         </:label>
         <Form.multi_select
           field={@form[@name]}
diff --git 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="number"
diff --git 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
@@ -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"
diff --git 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"
diff --git 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"
diff --git a/lib/backpex/fields/upload.ex b/lib/backpex/fields/upload.ex
@@ -656,7 +656,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
@@ -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"
diff --git a/lib/backpex/html/layout.ex b/lib/backpex/html/layout.ex
@@ -598,13 +598,22 @@ 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 =
+      case assigns.for do
+        %Phoenix.HTML.FormField{} = field -> assign(assigns, :rest, Map.put(assigns.rest, :for, field.id))
+        id -> assign(assigns, :rest, Map.put(assigns.rest, :for, id))
+      end
+
     ~H"""
-    <p class="text-content block break-words text-sm font-medium">
+    <.dynamic_tag tag_name={@as} class="text-content block break-words text-sm font-medium" {@rest}>
       {@text}
-    </p>
+    </.dynamic_tag>
     """
   end
 
diff --git a/lib/backpex/html/resource.ex b/lib/backpex/html/resource.ex
@@ -866,7 +866,7 @@ defmodule Backpex.HTML.Resource do
             <div :for={{name, %{label: label}} <- @panel_fields}>
               <.field_container>
                 <:label>
-                  <.input_label text={label} />
+                  <.input_label as="span" text={label} />
                 </:label>
                 <.resource_field name={name} {assigns} />
               </.field_container>
