Add htmlFor and aria-label attributes to form labels to improve accessibility

Author: ihabadham

client/app/bundles/comments/rescript/CommentForm/forms/HorizontalForm.res

@@ -1,8 +1,8 @@
 @react.component
 let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmit, ~disabled) => {
-  <form className="form-horizontal flex flex-col gap-4" onSubmit=handleSubmit disabled>
+  <form className="form-horizontal flex flex-col gap-4" onSubmit=handleSubmit disabled aria-label="Comment submission form">
     <div className="flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
-      <label className="w-full lg:w-2/12 lg:text-end shrink-0"> {"Name"->React.string} </label>
+      <label htmlFor="comment_author" className="w-full lg:w-2/12 lg:text-end shrink-0"> {"Name"->React.string} </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
@@ -11,10 +11,12 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_author"
         onChange=handleAuthorChange
         value={author}
+        aria-label="Author name"
+        aria-required="true"
       />
     </div>
     <div className="flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
-      <label className="w-full lg:w-2/12 lg:text-end shrink-0"> {"Text"->React.string} </label>
+      <label htmlFor="comment_text" className="w-full lg:w-2/12 lg:text-end shrink-0"> {"Text"->React.string} </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
@@ -23,6 +25,8 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_text"
         onChange=handleTextChange
         value={text}
+        aria-label="Comment text"
+        aria-required="true"
       />
     </div>
     <div className="flex flex-col gap-0 lg:gap-4 lg:flex-row">
@@ -31,6 +35,7 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         type_="submit"
         className="self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800"
         value="Post"
+        aria-label="Submit comment"
       />
     </div>
   </form>

client/app/bundles/comments/rescript/CommentForm/forms/InlineForm.res

@@ -3,9 +3,10 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
   <form
     className="form-inline flex flex-col lg:flex-row flex-wrap gap-4"
     onSubmit=handleSubmit
-    disabled>
+    disabled
+    aria-label="Comment submission form">
     <div className="flex gap-2 items-center">
-      <label> {"Name"->React.string} </label>
+      <label> htmlFor="comment_author" {"Name"->React.string} </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded"
@@ -14,10 +15,12 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_author"
         value={author}
         onChange=handleAuthorChange
+        aria-label="Author name"
+        aria-required="true"
       />
     </div>
     <div className="flex gap-2 items-center">
-      <label> {"Text"->React.string} </label>
+      <label> htmlFor="comment_text" {"Text"->React.string} </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded"
@@ -26,13 +29,16 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_text"
         onChange=handleTextChange
         value={text}
+        aria-label="Comment text"
+        aria-required="true"
       />
     </div>
     <div className="flex gap-2">
       <input
         type_="submit"
         className="self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800"
         value="Post"
+        aria-label="Submit comment"
       />
     </div>
   </form>

client/app/bundles/comments/rescript/CommentForm/forms/StackedFrom.res

@@ -1,8 +1,8 @@
 @react.component
 let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmit, ~disabled) => {
-  <form onSubmit=handleSubmit disabled className="flex flex-col gap-4">
+  <form onSubmit=handleSubmit disabled className="flex flex-col gap-4" aria-label="Comment submission form">
     <div className="flex flex-col gap-0">
-      <label className="w-full"> {"Name"->React.string} </label>
+      <label htmlFor="comment_author" className="w-full"> {"Name"->React.string} </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
@@ -11,10 +11,12 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_author"
         onChange=handleAuthorChange
         value={author}
+        aria-label="Author name"
+        aria-required="true"
       />
     </div>
     <div className="flex flex-col gap-0">
-      <label className="w-full"> {"Text"->React.string} </label>
+      <label htmlFor="comment_text" className="w-full"> {"Text"->React.string} </label>
       <input
         type_="text"
         className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
@@ -23,13 +25,16 @@ let make = (~author, ~handleAuthorChange, ~text, ~handleTextChange, ~handleSubmi
         id="comment_text"
         onChange=handleTextChange
         value={text}
+        aria-label="Comment text"
+        aria-required="true"
       />
     </div>
     <div className="flex flex-col gap-0">
       <input
         type_="submit"
         className="self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800"
         value="Post"
+        aria-label="Submit comment"
       />
     </div>
   </form>