From: Patrick H. Lauke <redux@splintered.co.uk>
Date: Mon, 23 Mar 2015 21:53:30 +0000 (+0000)
Subject: Callout for tooltips and keyboard/AT accessibility
X-Git-Tag: v3.3.5~194^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=debcb1de594f98eb973d3a33848d6c1646f416d7;p=thirdparty%2Fbootstrap.git

Callout for tooltips and keyboard/AT accessibility

Include callout explicitly mentioning tooltips should only be added to
focusable elements. Closes #16134
---

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>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p>