From debcb1de594f98eb973d3a33848d6c1646f416d7 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 23 Mar 2015 21:53:30 +0000
Subject: [PATCH] Callout for tooltips and keyboard/AT accessibility
Include callout explicitly mentioning tooltips should only be added to
focusable elements. Closes #16134
---
docs/_includes/js/tooltips.html | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html
index c3fe17ec24..eab9549bb8 100644
--- a/docs/_includes/js/tooltips.html
+++ b/docs/_includes/js/tooltips.html
@@ -76,6 +76,10 @@ $(function () {
<h4>Don't try to show tooltips on hidden elements</h4>
<p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
</div>
+ <div class="bs-callout bs-callout-warning" id="callout-tooltip-accessibility">
+ <h4>Accessible tooltips for keyboard and assistive technology users</h4>
+ <p>For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a <code>tabindex="0"</code> attribute.</p>
+ </div>
<div class="bs-callout bs-callout-info" id="callout-tooltip-disabled">
<h4>Tooltips on disabled elements require wrapper elements</h4>
<p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the tooltip to that <code><div></code> instead.</p>
--
GitLab