Improve a11y in form example

site/content/docs/5.3/examples/form/form.js

@@ -16,6 +16,16 @@
         // Focus on first error
         const invalidItems = form.querySelectorAll(':invalid')
         invalidItems[0].focus()
+        // Add the id of the corresponding invalid message to each invalid field
+        invalidItems.forEach(element => {
+          const valuesArray = [`${element.id}Label`, `${element.id}Feedback`].join(' ')
+          element.setAttribute('aria-labelledby', valuesArray)
+        })
+        // Remove the id of the corresponding invalid message to each valid field
+        const validItems = form.querySelectorAll(':valid')
+        validItems.forEach(element => {
+          element.setAttribute('aria-labelledby', `${element.id}Label`)
+        })
       }
 
       form.classList.add('was-validated')

site/content/docs/5.3/examples/form/index.html

@@ -94,7 +94,7 @@ <h1 class="display-1">Become a reseller</h1>
             </div>
             <div class="col-sm-4 col-md-6 mb-3">
               <label for="selectTitle" id="selectTitleLabel" class="form-label is-required">Title</label>
-              <select class="form-select" id="selectTitle" aria-labelledby="selectTitleLabel selectTitleFeedback" autocomplete="sex" required>
+              <select class="form-select" id="selectTitle" aria-labelledby="selectTitleLabel" autocomplete="sex" required>
                 <option selected disabled value="" aria-hidden="true">Select a title</option>
                 <option value="1">Miss</option>
                 <option value="2">Mr.</option>
@@ -112,7 +112,7 @@ <h1 class="display-1">Become a reseller</h1>
             <div class="col-12">
               <div class="mb-3">
                 <label for="firstName" id="firstNameLabel" class="form-label is-required">First name</label>
-                <input type="text" class="form-control" id="firstName" aria-labelledby="firstNameLabel firstNameFeedback" autocomplete="given-name" required>
+                <input type="text" class="form-control" id="firstName" aria-labelledby="firstNameLabel" autocomplete="given-name" required>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
@@ -122,7 +122,7 @@ <h1 class="display-1">Become a reseller</h1>
               </div>
               <div class="mb-3">
                 <label for="lastName" id="lastNameLabel" class="form-label is-required">Last name</label>
-                <input type="text" class="form-control" id="lastName" aria-labelledby="lastNameLabel lastNameFeedback" autocomplete="family-name" required>
+                <input type="text" class="form-control" id="lastName" aria-labelledby="lastNameLabel" autocomplete="family-name" required>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
@@ -132,7 +132,7 @@ <h1 class="display-1">Become a reseller</h1>
               </div>
               <div class="mb-3">
                 <label for="email" id="emailLabel" class="form-label is-required">Email</label>
-                <input type="email" class="form-control" id="email" aria-labelledby="emailLabel emailFeedback" autocomplete="email" required>
+                <input type="email" class="form-control" id="email" aria-labelledby="emailLabel" autocomplete="email" required>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
@@ -142,7 +142,7 @@ <h1 class="display-1">Become a reseller</h1>
               </div>
               <div class="mb-3">
                 <label for="country" id="countryLabel" class="form-label is-required">Country</label>
-                <select class="form-select" id="country" aria-labelledby="countryLabel countryFeedback" autocomplete="country-name" required>
+                <select class="form-select" id="country" aria-labelledby="countryLabel" autocomplete="country-name" required>
                   <option selected disabled value="" aria-hidden="true">Select a country</option>
                   <option value="1">Australia</option>
                   <option value="2">Canada</option>
@@ -158,7 +158,7 @@ <h1 class="display-1">Become a reseller</h1>
               </div>
               <div class="mb-3">
                 <label for="company" id="companyLabel" class="form-label is-required">Name of company</label>
-                <input type="text" class="form-control" id="company" aria-labelledby="companyLabel companyFeedback" required>
+                <input type="text" class="form-control" id="company" aria-labelledby="companyLabel" required>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
@@ -168,7 +168,7 @@ <h1 class="display-1">Become a reseller</h1>
               </div>
               <div class="mb-3">
                 <label for="business" id="businessLabel" class="form-label is-required">Business type</label>
-                <select class="form-select" id="business" aria-labelledby="businessLabel businessFeedback" required>
+                <select class="form-select" id="business" aria-labelledby="businessLabel" required>
                   <option selected disabled value="" aria-hidden="true">Select a type</option>
                   <option value="1">Corporation</option>
                   <option value="2">Limited liability company</option>
@@ -184,7 +184,7 @@ <h1 class="display-1">Become a reseller</h1>
               </div>
               <div class="mb-3">
                 <label for="website" id="websiteLabel" class="form-label">Website</label>
-                <input type="text" class="form-control" id="website" aria-labelledby="websiteLabel websiteFeedback">
+                <input type="text" class="form-control" id="website" aria-labelledby="websiteLabel">
                 <div class="valid-feedback">
                   Looks good!
                 </div>
@@ -197,7 +197,7 @@ <h1 class="display-1">Become a reseller</h1>
                 <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for text area">
                   <span class="visually-hidden">Helper for text area</span>
                 </button>
-                <textarea class="form-control" id="message" rows="5" placeholder="Describe your business and your motivation in becoming an Orange reseller" aria-labelledby="messageLabel messageFeedback" required></textarea>
+                <textarea class="form-control" id="message" rows="5" placeholder="Describe your business and your motivation in becoming an Orange reseller" aria-labelledby="messageLabel" required></textarea>
                 <div class="valid-feedback">
                   Looks good!
                 </div>