From ffea9af1bdf68e6b2b872b92d5abfad274f4cee8 Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Wed, 22 Mar 2023 17:20:07 +0100
Subject: [PATCH 1/8] Improve a11y in form example

---
 site/content/docs/5.3/examples/form/form.js    | 10 ++++++++++
 site/content/docs/5.3/examples/form/index.html | 18 +++++++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/site/content/docs/5.3/examples/form/form.js b/site/content/docs/5.3/examples/form/form.js
index a655b6eacc..6b9e33aac6 100644
--- a/site/content/docs/5.3/examples/form/form.js
+++ b/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 => {
+          let 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')
diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index 61fcf77e23..2ee636d44a 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/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>

From 39562f9e59ee670dabbe9e36b4c802be9d50f5df Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Wed, 22 Mar 2023 19:19:20 +0100
Subject: [PATCH 2/8] Fix js

---
 site/content/docs/5.3/examples/form/form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/examples/form/form.js b/site/content/docs/5.3/examples/form/form.js
index 6b9e33aac6..482f4cc965 100644
--- a/site/content/docs/5.3/examples/form/form.js
+++ b/site/content/docs/5.3/examples/form/form.js
@@ -18,7 +18,7 @@
         invalidItems[0].focus()
         // Add the id of the corresponding invalid message to each invalid field
         invalidItems.forEach(element => {
-          let valuesArray = [element.id + 'Label', element.id + 'Feedback'].join(' ')
+          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

From c52754c123d2e278dd362079dd53e44bc2de266d Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Wed, 22 Mar 2023 19:28:02 +0100
Subject: [PATCH 3/8] Fix prefer-template

---
 site/content/docs/5.3/examples/form/form.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.3/examples/form/form.js b/site/content/docs/5.3/examples/form/form.js
index 482f4cc965..e84eafe364 100644
--- a/site/content/docs/5.3/examples/form/form.js
+++ b/site/content/docs/5.3/examples/form/form.js
@@ -18,13 +18,13 @@
         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(' ')
+          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')
+          element.setAttribute('aria-labelledby', `${element.id}Label`)
         })
       }
 

From 36fd5a9db9576ac096ae177c4d010e009705715f Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Wed, 29 Mar 2023 15:39:58 +0200
Subject: [PATCH 4/8] Js improvement

---
 site/content/docs/5.3/examples/form/form.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/5.3/examples/form/form.js b/site/content/docs/5.3/examples/form/form.js
index e84eafe364..df9af2b6b8 100644
--- a/site/content/docs/5.3/examples/form/form.js
+++ b/site/content/docs/5.3/examples/form/form.js
@@ -18,13 +18,16 @@
         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(' ')
+          const closestLabel = element.closest('.mb-3').querySelector('.form-label').getAttribute('id')
+          const closestInvalidFeedback = element.closest('.mb-3').querySelector('.invalid-feedback').getAttribute('id')
+          const valuesArray = [closestLabel, closestInvalidFeedback].join(' ')
           element.setAttribute('aria-labelledby', valuesArray)
         })
         // Remove the id of the corresponding invalid message to each valid field
-        const validItems = form.querySelectorAll(':valid')
+        const validItems = form.querySelectorAll(':valid:not([type=\'submit\'])')
         validItems.forEach(element => {
-          element.setAttribute('aria-labelledby', `${element.id}Label`)
+          const closestLabel = element.closest('.mb-3').querySelector('.form-label').getAttribute('id')
+          element.setAttribute('aria-labelledby', closestLabel)
         })
       }
 

From 92eaed6f22d759e5f0bd018ab8102ae845bdb8c2 Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Wed, 29 Mar 2023 19:26:10 +0200
Subject: [PATCH 5/8] Add role alert

---
 site/content/docs/5.3/examples/form/index.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index 2ee636d44a..ac0bed6d7e 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/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" autocomplete="sex" required>
+              <select class="form-select" id="selectTitle" aria-labelledby="selectTitleLabel" autocomplete="sex" role="alert" 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" autocomplete="given-name" required>
+                <input type="text" class="form-control" id="firstName" aria-labelledby="firstNameLabel" autocomplete="given-name" role="alert" 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" autocomplete="family-name" required>
+                <input type="text" class="form-control" id="lastName" aria-labelledby="lastNameLabel" autocomplete="family-name" role="alert" 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" autocomplete="email" required>
+                <input type="email" class="form-control" id="email" aria-labelledby="emailLabel" autocomplete="email" role="alert" 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" autocomplete="country-name" required>
+                <select class="form-select" id="country" aria-labelledby="countryLabel" autocomplete="country-name" role="alert" 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" required>
+                <input type="text" class="form-control" id="company" aria-labelledby="companyLabel" role="alert" 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" required>
+                <select class="form-select" id="business" aria-labelledby="businessLabel" role="alert" required>
                   <option selected disabled value="" aria-hidden="true">Select a type</option>
                   <option value="1">Corporation</option>
                   <option value="2">Limited liability company</option>
@@ -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" 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" role="alert" required></textarea>
                 <div class="valid-feedback">
                   Looks good!
                 </div>

From 1f025f68e8d8084c1c35413ea86e2c35aa169727 Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Thu, 30 Mar 2023 09:41:24 +0200
Subject: [PATCH 6/8] Fix markup

---
 .../content/docs/5.3/examples/form/index.html | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/site/content/docs/5.3/examples/form/index.html b/site/content/docs/5.3/examples/form/index.html
index ac0bed6d7e..e8ad276fb0 100644
--- a/site/content/docs/5.3/examples/form/index.html
+++ b/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" autocomplete="sex" role="alert" 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>
@@ -105,44 +105,44 @@ <h1 class="display-1">Become a reseller</h1>
               <div class="valid-feedback">
                 Looks good!
               </div>
-              <div id="selectTitleFeedback" class="invalid-feedback">
+              <div id="selectTitleFeedback" class="invalid-feedback" role="alert">
                 Please select a valid title.
               </div>
             </div>
             <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" autocomplete="given-name" role="alert" required>
+                <input type="text" class="form-control" id="firstName" aria-labelledby="firstNameLabel" autocomplete="given-name" required>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
-                <div id="firstNameFeedback" class="invalid-feedback">
+                <div id="firstNameFeedback" class="invalid-feedback" role="alert">
                   Please enter a valid first name.
                 </div>
               </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" autocomplete="family-name" role="alert" required>
+                <input type="text" class="form-control" id="lastName" aria-labelledby="lastNameLabel" autocomplete="family-name" required>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
-                <div id="lastNameFeedback" class="invalid-feedback">
+                <div id="lastNameFeedback" class="invalid-feedback" role="alert">
                   Please enter a valid last name.
                 </div>
               </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" autocomplete="email" role="alert" required>
+                <input type="email" class="form-control" id="email" aria-labelledby="emailLabel" autocomplete="email" required>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
-                <div id="emailFeedback" class="invalid-feedback">
+                <div id="emailFeedback" class="invalid-feedback" role="alert">
                   Please provide a valid email.
                 </div>
               </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" autocomplete="country-name" role="alert" 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>
@@ -152,23 +152,23 @@ <h1 class="display-1">Become a reseller</h1>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
-                <div id="countryFeedback" class="invalid-feedback">
+                <div id="countryFeedback" class="invalid-feedback" role="alert">
                   Please select a valid country.
                 </div>
               </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" role="alert" required>
+                <input type="text" class="form-control" id="company" aria-labelledby="companyLabel" required>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
-                <div id="companyFeedback" class="invalid-feedback">
+                <div id="companyFeedback" class="invalid-feedback" role="alert">
                   Please enter a valid company name.
                 </div>
               </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" role="alert" 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>
@@ -178,7 +178,7 @@ <h1 class="display-1">Become a reseller</h1>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
-                <div id="businessFeedback" class="invalid-feedback">
+                <div id="businessFeedback" class="invalid-feedback" role="alert">
                   Please select a valid business type.
                 </div>
               </div>
@@ -188,7 +188,7 @@ <h1 class="display-1">Become a reseller</h1>
                 <div class="valid-feedback">
                   Looks good!
                 </div>
-                <div id="websiteFeedback" class="invalid-feedback">
+                <div id="websiteFeedback" class="invalid-feedback" role="alert">
                   Please enter a valid website.
                 </div>
               </div>
@@ -197,11 +197,11 @@ <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" role="alert" 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>
-                <div id="messageFeedback" class="invalid-feedback">
+                <div id="messageFeedback" class="invalid-feedback" role="alert">
                   Please enter a valid message.
                 </div>
               </div>

From 27befc7812a207b34f9f670d995b2975ef9f7493 Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Fri, 31 Mar 2023 17:53:10 +0200
Subject: [PATCH 7/8] Improve Js performance

---
 site/content/docs/5.3/examples/form/form.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.3/examples/form/form.js b/site/content/docs/5.3/examples/form/form.js
index df9af2b6b8..7ca27bda7c 100644
--- a/site/content/docs/5.3/examples/form/form.js
+++ b/site/content/docs/5.3/examples/form/form.js
@@ -18,9 +18,9 @@
         invalidItems[0].focus()
         // Add the id of the corresponding invalid message to each invalid field
         invalidItems.forEach(element => {
-          const closestLabel = element.closest('.mb-3').querySelector('.form-label').getAttribute('id')
+          const linkedLabel = element.getAttribute('aria-labelledby')
           const closestInvalidFeedback = element.closest('.mb-3').querySelector('.invalid-feedback').getAttribute('id')
-          const valuesArray = [closestLabel, closestInvalidFeedback].join(' ')
+          const valuesArray = [linkedLabel, closestInvalidFeedback].join(' ')
           element.setAttribute('aria-labelledby', valuesArray)
         })
         // Remove the id of the corresponding invalid message to each valid field

From b1f35e573fbc43b21d9bdcf9eff5865ecce3f41a Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Mon, 3 Apr 2023 18:12:33 +0200
Subject: [PATCH 8/8] Fix

---
 site/content/docs/5.3/examples/form/form.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/content/docs/5.3/examples/form/form.js b/site/content/docs/5.3/examples/form/form.js
index 7ca27bda7c..a6967d1f1c 100644
--- a/site/content/docs/5.3/examples/form/form.js
+++ b/site/content/docs/5.3/examples/form/form.js
@@ -18,15 +18,15 @@
         invalidItems[0].focus()
         // Add the id of the corresponding invalid message to each invalid field
         invalidItems.forEach(element => {
-          const linkedLabel = element.getAttribute('aria-labelledby')
-          const closestInvalidFeedback = element.closest('.mb-3').querySelector('.invalid-feedback').getAttribute('id')
-          const valuesArray = [linkedLabel, closestInvalidFeedback].join(' ')
+          const closestLabel = element.parentElement.querySelector('.form-label').getAttribute('id')
+          const closestInvalidFeedback = element.parentElement.querySelector('.invalid-feedback').getAttribute('id')
+          const valuesArray = [closestLabel, closestInvalidFeedback].join(' ')
           element.setAttribute('aria-labelledby', valuesArray)
         })
         // Remove the id of the corresponding invalid message to each valid field
-        const validItems = form.querySelectorAll(':valid:not([type=\'submit\'])')
+        const validItems = form.querySelectorAll(':valid:not([type="submit"])')
         validItems.forEach(element => {
-          const closestLabel = element.closest('.mb-3').querySelector('.form-label').getAttribute('id')
+          const closestLabel = element.parentElement.querySelector('.form-label').getAttribute('id')
           element.setAttribute('aria-labelledby', closestLabel)
         })
       }