From 2fbf57cf6eac51a960ace1caf684738478ab704b Mon Sep 17 00:00:00 2001
From: Florian Kraft <f.kraft@finn.de>
Date: Tue, 7 Apr 2015 16:42:26 +0200
Subject: [PATCH] add tabindices to show tooltips when associated item is
 tabbed to

---
 app/assets/stylesheets/content/_tooltips.md   | 20 +++++++++++++++++--
 app/assets/stylesheets/content/_tooltips.sass |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/content/_tooltips.md b/app/assets/stylesheets/content/_tooltips.md
index fc346a2561..e1817955cc 100644
--- a/app/assets/stylesheets/content/_tooltips.md
+++ b/app/assets/stylesheets/content/_tooltips.md
@@ -51,12 +51,26 @@ These can contain simple texts but are not suitable for HTML within the Tooltip.
         <input type="text" placeholder="First name" class="form--text-field" id="kurosaki" >
       </div>
       <div class="form--tooltip-container">
-        <span class="tooltip-right" data-tooltip="First name of the father">
+        <span class="tooltip-right" tabindex="0" data-tooltip="First name of the son">
           <i class="icon icon-help"></i>
         </span>
       </div>
     </div>
   </div>
+  <div class="form--field">
+    <label for="bankai" class="form--label">Bankai</label>
+    <div class="form--field-container">
+      <div class="form--select-container">
+        <select name="bankai" id="bankai" class="form--select">
+          <option value="hakka">Hakka no togame</option>
+          <option value="tensa">Tensa zangetsu</option>
+          <option value="zanka">Zanka no tachi</option>
+          <option value="kokujo">Kokujō Tengen Myō'ō</option>
+          <option value="tekken">Tekken tachikaze</option>
+        </select>
+      </div>
+    </div>
+  </div>
   <div class="form--field">
     <label for="kuchiki" class="form--label">Kuchiki</label>
     <div class="form--field-container">
@@ -64,7 +78,7 @@ These can contain simple texts but are not suitable for HTML within the Tooltip.
         <input type="text" class="form--text-field" placeholder="First name" id="kuchiki">
       </div>
       <div class="form--tooltip-container">
-        <span class="tooltip-right" data-tooltip="First name of a captain">
+        <span class="tooltip-right" tabindex="0" data-tooltip="First name of a captain">
           <i class="icon icon-help1"></i>
         </span>
       </div>
@@ -73,6 +87,8 @@ These can contain simple texts but are not suitable for HTML within the Tooltip.
 </form>
 ```
 
+Note that the tabindex has to be set manually on the `<span>` and not the containing element. `tabindex="0"` makes the item tabbable at all.
+
 ### Inline text
 
 ```
diff --git a/app/assets/stylesheets/content/_tooltips.sass b/app/assets/stylesheets/content/_tooltips.sass
index ee272b9bd8..74c2bb027d 100644
--- a/app/assets/stylesheets/content/_tooltips.sass
+++ b/app/assets/stylesheets/content/_tooltips.sass
@@ -91,7 +91,7 @@ $tooltipArrowSize: 6px
 
   &:hover, &:focus
     background-color: transparent
-    &:before, &:after
+    &::before, &::after
       opacity: 1
       visibility: visible
   +colorize