From: Mark Otto <markd.otto@gmail.com>
Date: Tue, 22 Apr 2025 04:03:10 +0000 (-0700)
Subject: Alternate for #41142, disabled list group items (#41397)
X-Git-Tag: v5.3.6~14
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=1a6175a1c6ac2a99de64d84c9a72159b370f9c4d;p=thirdparty%2Fbootstrap.git

Alternate for #41142, disabled list group items (#41397)
---

diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx
index 311c0a041c..59827ddd41 100644
--- a/site/src/content/docs/components/list-group.mdx
+++ b/site/src/content/docs/components/list-group.mdx
@@ -30,22 +30,12 @@ Add `.active` to a `.list-group-item` to indicate the current active selection.
     <li class="list-group-item">And a fifth one</li>
   </ul>`} />
 
-## Disabled items
-
-Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that some elements with `.disabled` will also require custom JavaScript to fully disable their click events (e.g., links).
-
-<Example code={`<ul class="list-group">
-    <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
-    <li class="list-group-item">A second item</li>
-    <li class="list-group-item">A third item</li>
-    <li class="list-group-item">A fourth item</li>
-    <li class="list-group-item">And a fifth one</li>
-  </ul>`} />
-
 ## Links and buttons
 
 Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `.list-group-item-action`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don’t provide a click or tap affordance.
 
+Make `.list-group-item-action` instances _appear_ disabled by adding `.disabled`, and `aria-disabled="true"` to inform assistive technologies that the element is disabled. You may require additional JavaScript to fully disable links and buttons.
+
 Be sure to **not use the standard `.btn` classes here**.
 
 <Example code={`<div class="list-group">
@@ -55,7 +45,7 @@ Be sure to **not use the standard `.btn` classes here**.
     <a href="#" class="list-group-item list-group-item-action">A second link item</a>
     <a href="#" class="list-group-item list-group-item-action">A third link item</a>
     <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
-    <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
+    <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
   </div>`} />
 
 With `<button>`s, you can also make use of the `disabled` attribute instead of the `.disabled` class. Sadly, `<a>`s don’t support the disabled attribute.