From 93e1bac76266c3fd0dcc614fa4937e53861e5c30 Mon Sep 17 00:00:00 2001
From: Issermann Hannah <hannah.issermann@orange.com>
Date: Mon, 5 Dec 2022 15:12:27 +0100
Subject: [PATCH 1/2] Use aria-labelledby to associate form-text (helper) with
 input field when it contains mandatory info (e.g. data format)

---
 site/content/docs/5.2/forms/overview.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/5.2/forms/overview.md b/site/content/docs/5.2/forms/overview.md
index f38ad90354c3..609fdb706398 100644
--- a/site/content/docs/5.2/forms/overview.md
+++ b/site/content/docs/5.2/forms/overview.md
@@ -58,14 +58,15 @@ Block-level or inline-level form text can be created using `.form-text`.
 {{< callout warning >}}
 ##### Associating form text with form controls
 
-Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
+Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute.
+This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
 {{< /callout >}}
 
 Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
 
 {{< example >}}
 <label for="inputPassword5" class="form-label">Password</label>
-<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
+<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
 <div id="passwordHelpBlock" class="form-text">
   Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
 </div>
@@ -79,7 +80,7 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
     <label for="inputPassword6" class="col-form-label">Password</label>
   </div>
   <div class="col-auto">
-    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
+    <input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline">
   </div>
   <div class="col-auto">
     <span id="passwordHelpInline" class="form-text">

From 6f8336289cd6b18bbc9f64944fb23f954550f668 Mon Sep 17 00:00:00 2001
From: Issermann Hannah <hannah.issermann@orange.com>
Date: Tue, 6 Dec 2022 11:52:35 +0100
Subject: [PATCH 2/2] Example in input-group needs aria-describedby (or
 aria-labelledby) too

---
 site/content/docs/5.2/forms/input-group.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.2/forms/input-group.md b/site/content/docs/5.2/forms/input-group.md
index 01be5cffed59..59b478d4c140 100644
--- a/site/content/docs/5.2/forms/input-group.md
+++ b/site/content/docs/5.2/forms/input-group.md
@@ -25,9 +25,9 @@ Place one add-on or button on either side of an input. You may also place one on
   <label for="basic-url" class="form-label">Your vanity URL</label>
   <div class="input-group">
     <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
-    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4">
   </div>
-  <div class="form-text">Example help text goes outside the input group.</div>
+  <div class="form-text" id="basic-addon4">Example help text goes outside the input group.</div>
 </div>
 
 <div class="input-group mb-3">