]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Add keyboard-focusable elements for popover on disabled button (#32490)
authorFlorian Lacreuse <florianlacreuse@users.noreply.github.com>
Sun, 20 Dec 2020 18:28:58 +0000 (19:28 +0100)
committerGitHub <noreply@github.com>
Sun, 20 Dec 2020 18:28:58 +0000 (20:28 +0200)
site/content/docs/5.0/components/popovers.md

index 10072ad62c07493feab55411e579bdd7ff7605ff..ccaf1f63f9f4cf77889abe00a6f8528db7f05f1e 100644 (file)
@@ -99,12 +99,12 @@ var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'),
 
 ### Disabled elements
 
-Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`.
+Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
 
-For disabled popover triggers, you may also prefer `data-bs-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
+For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
 
 {{< example >}}
-<span class="d-inline-block" data-bs-toggle="popover" data-bs-content="Disabled popover">
+<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
   <button class="btn btn-primary" type="button" disabled>Disabled button</button>
 </span>
 {{< /example >}}