Update CoreComponents, add explicit label association

[matt-savvy]

Description

Currently, the inputs generated in CoreComponents uses nesting to implicitly associate the label with the input.
This works fine in most cases but there are a couple drawbacks

• Some assistive technologies have limitations or issues when labels are only implicitly associated. The WAI recommends always using explicit association when possible.
• Someone tweaking their core components might move the input to be a sibling of the label, breaking the implicit association and unintentionally cause accessibility problems. If they are using PhoenixTest, this would also break any tests that fill in these inputs, since the majority of the functions rely on a working label.

For more info, see

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label
• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/for
• https://www.w3.org/WAI/tutorials/forms/labels/#associating-labels-explicitly

Changes

Update CoreComponents templates for inputs. Add for={@id} to explicitly associate a label element with its input element.

Diff of the generated CoreComponents with these changes:

     ~H"""
     <div class="fieldset mb-2">
-      <label>
+      <label for={@id}>
         <input
           type="hidden"
           name={@name}
@@ -234,7 +234,7 @@ defmodule SomeTestProjectWeb.CoreComponents do
   def input(%{type: "select"} = assigns) do
     ~H"""
     <div class="fieldset mb-2">
-      <label>
+      <label for={@id}>
         <span :if={@label} class="label mb-1">{@label}</span>
         <select
           id={@id}
@@ -255,7 +255,7 @@ defmodule SomeTestProjectWeb.CoreComponents do
   def input(%{type: "textarea"} = assigns) do
     ~H"""
     <div class="fieldset mb-2">
-      <label>
+      <label for={@id}>
         <span :if={@label} class="label mb-1">{@label}</span>
         <textarea
           id={@id}
@@ -276,7 +276,7 @@ defmodule SomeTestProjectWeb.CoreComponents do
   def input(assigns) do
     ~H"""
     <div class="fieldset mb-2">
-      <label>
+      <label for={@id}>
         <span :if={@label} class="label mb-1">{@label}</span>
         <input
           type={@type}

[SteffenDE]

Thank you again! 🙌🏻