From 8da1c376d3ca24cd0403ba19c07bf8587ddc7dd3 Mon Sep 17 00:00:00 2001
From: Neeraj Kumar Das <nkdas91@gmail.com>
Date: Wed, 29 Jun 2022 21:02:13 +0530
Subject: [PATCH 1/4] Add examples for Radios in List Group

---
 .../content/docs/5.2/components/list-group.md | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md
index 5c78ddfe507f..879d48928a5c 100644
--- a/site/content/docs/5.2/components/list-group.md
+++ b/site/content/docs/5.2/components/list-group.md
@@ -269,6 +269,31 @@ Place Bootstrap's checkboxes and radios within list group items and customize as
 </ul>
 {{< /example >}}
 
+{{< example >}}
+<ul class="list-group">
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" aria-label="...">
+    First radio
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" aria-label="...">
+    Second radio
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" aria-label="...">
+    Third radio
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" aria-label="...">
+    Fourth radio
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" aria-label="...">
+    Fifth radio
+  </li>
+</ul>
+{{< /example >}}
+
 And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
 
 {{< example >}}
@@ -296,6 +321,31 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
 </div>
 {{< /example >}}
 
+{{< example >}}
+<div class="list-group">
+  <label class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio2" value="">
+    First radio
+  </label>
+  <label class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio2" value="">
+    Second radio
+  </label>
+  <label class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio2" value="">
+    Third radio
+  </label>
+  <label class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio2" value="">
+    Fourth radio
+  </label>
+  <label class="list-group-item">
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio2" value="">
+    Fifth radio
+  </label>
+</div>
+{{< /example >}}
+
 ## CSS
 
 ### Variables

From 2d5740b2c0fc0c8105a642c87c8926a141bedfb5 Mon Sep 17 00:00:00 2001
From: Neeraj Kumar Das <nkdas91@gmail.com>
Date: Thu, 30 Jun 2022 07:01:16 +0530
Subject: [PATCH 2/4] Reduce the number of checkboxes and radios to 3 for
 consistency Drop aria-label on inputs and use label Use class stretched-link
 on labels to cover the whole list group item Check the first radio by default
 Remove radios from streched link examples

---
 .../content/docs/5.2/components/list-group.md | 99 +++++--------------
 1 file changed, 25 insertions(+), 74 deletions(-)

diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md
index 879d48928a5c..b0cb64ebb970 100644
--- a/site/content/docs/5.2/components/list-group.md
+++ b/site/content/docs/5.2/components/list-group.md
@@ -247,24 +247,16 @@ Place Bootstrap's checkboxes and radios within list group items and customize as
 {{< example >}}
 <ul class="list-group">
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
-    First checkbox
+    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
+    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
   </li>
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
-    Second checkbox
+    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
+    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
   </li>
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
-    Third checkbox
-  </li>
-  <li class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
-    Fourth checkbox
-  </li>
-  <li class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
-    Fifth checkbox
+    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
+    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
   </li>
 </ul>
 {{< /example >}}
@@ -272,77 +264,36 @@ Place Bootstrap's checkboxes and radios within list group items and customize as
 {{< example >}}
 <ul class="list-group">
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" aria-label="...">
-    First radio
-  </li>
-  <li class="list-group-item">
-    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" aria-label="...">
-    Second radio
-  </li>
-  <li class="list-group-item">
-    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" aria-label="...">
-    Third radio
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
+    <label class="form-check-label" for="firstRadio">First radio</label>
   </li>
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" aria-label="...">
-    Fourth radio
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
+    <label class="form-check-label" for="secondRadio">Second radio</label>
   </li>
   <li class="list-group-item">
-    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" aria-label="...">
-    Fifth radio
+    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
+    <label class="form-check-label" for="thirdRadio">Third radio</label>
   </li>
 </ul>
 {{< /example >}}
 
-And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
+You can use `.stretched-link` on `<label>`s to make the whole list group item clickable.
 
 {{< example >}}
 <div class="list-group">
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="">
-    First checkbox
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="">
-    Second checkbox
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="">
-    Third checkbox
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="">
-    Fourth checkbox
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="checkbox" value="">
-    Fifth checkbox
-  </label>
-</div>
-{{< /example >}}
-
-{{< example >}}
-<div class="list-group">
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="radio" name="listGroupRadio2" value="">
-    First radio
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="radio" name="listGroupRadio2" value="">
-    Second radio
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="radio" name="listGroupRadio2" value="">
-    Third radio
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="radio" name="listGroupRadio2" value="">
-    Fourth radio
-  </label>
-  <label class="list-group-item">
-    <input class="form-check-input me-1" type="radio" name="listGroupRadio2" value="">
-    Fifth radio
-  </label>
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
+    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
+    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
+  </li>
+  <li class="list-group-item">
+    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
+    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
+  </li>
 </div>
 {{< /example >}}
 

From 98f260d3df543ab0c2a7bc4476936e166b004c0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Thu, 30 Jun 2022 08:11:25 +0200
Subject: [PATCH 3/4] Update site/content/docs/5.2/components/list-group.md

---
 site/content/docs/5.2/components/list-group.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md
index b0cb64ebb970..206683bdf682 100644
--- a/site/content/docs/5.2/components/list-group.md
+++ b/site/content/docs/5.2/components/list-group.md
@@ -281,7 +281,7 @@ Place Bootstrap's checkboxes and radios within list group items and customize as
 You can use `.stretched-link` on `<label>`s to make the whole list group item clickable.
 
 {{< example >}}
-<div class="list-group">
+<ul class="list-group">
   <li class="list-group-item">
     <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
     <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>

From effda5d704e6416dacad9b5439b953445263a297 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Thu, 30 Jun 2022 08:11:30 +0200
Subject: [PATCH 4/4] Update site/content/docs/5.2/components/list-group.md

---
 site/content/docs/5.2/components/list-group.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md
index 206683bdf682..563d5b5276c9 100644
--- a/site/content/docs/5.2/components/list-group.md
+++ b/site/content/docs/5.2/components/list-group.md
@@ -294,7 +294,7 @@ You can use `.stretched-link` on `<label>`s to make the whole list group item cl
     <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
     <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
   </li>
-</div>
+</ul>
 {{< /example >}}
 
 ## CSS