Replace aria-label by data-accesskey for shortcuts

As mentionned in the README, using `aria-label` for shortcuts
declaration is now **deprecated** and is replaced by `data-accesskey`
attribute. `aria-label` is still supported for retro-compatibility.

README.md

@@ -50,7 +50,9 @@ If you bind a same tooltip to many elements, and you want it to be attached in a
 <span aria-describedby="tooltip-bottom" data-tooltip-direction="left">another element for same tooltip, will appear attached to the left side</span>
 ```
 
-You can also pass extra content to the tooltip using the [`aria-label`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-label) attribute. I originally use it to describe the keyboard shortcuts bound to an element. So if a `aria-label` attribute is on the element, _aria-tips_ will append it in a `pre` element inside the tooltip when it appears.
+I originally want to describe the keyboard shortcuts bound to an element. So if a `data-accesskey` attribute is on the element, _aria-tips_ will append it in a `pre` element inside the tooltip when it appears.
+
+Note: We do *not* support `accesskey` due to its freaking implementation (as [W3C itself recommend to not using it](https://lists.w3.org/Archives/Public/www-tag/2015Apr/0025.html)). We previously support shortcut declaration using the [`aria-label`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-label) attribute, but it's a misuse of the spec. Say, using `aria-label` for this purposes is deprecated but still supported for compatibility.
 
 
 ## Styles

src/aria-tips.coffee

@@ -151,7 +151,7 @@
         label.parentNode.removeChild label for label in labels
 
         # Get label from the trigger.
-        labelText = trigger.getAttribute 'aria-label'
+        labelText = trigger.dataset.accesskey || trigger.getAttribute 'aria-label'
 
         # If there is one, append it to the tooltip.
         if labelText

test/assets/index.html

@@ -30,9 +30,9 @@ <h1>Aria Tips</h1>
 
         <ul>
             <li>
-                <pre><code class="html">&lt;button aria-describedby="tooltip-bottom" aria-label="ctrl+o"&gt;hover me ↓&lt;/button&gt;
+                <pre><code class="html">&lt;button aria-describedby="tooltip-bottom" data-accesskey="ctrl+o"&gt;hover me ↓&lt;/button&gt;
 &lt;p role="tooltip" id="tooltip-bottom" data-tooltip-direction="bottom" aria-hidden="true"&gt;this is the hover description in a tooltip :]&lt;/p&gt;</code></pre>
-                <button aria-describedby="tooltip-bottom" aria-label="ctrl+o">hover me ↓</button>
+                <button aria-describedby="tooltip-bottom" data-accesskey="ctrl+o">hover me ↓</button>
                 <p role="tooltip" id="tooltip-bottom" data-tooltip-direction="bottom" aria-hidden="true">this is the hover description in a tooltip :]</p>
             </li>
             <li>
@@ -55,7 +55,7 @@ <h1>Aria Tips</h1>
             </li>
             <li>
                 <pre><code class="html">&lt;div aria-describedby="tooltip-bottom" aria-label="ctrl+y"&gt;this one uses the same tip as the first-one&lt;/div&gt;</code></pre>
-                <div aria-describedby="tooltip-bottom" aria-label="ctrl+y">this one uses the same tip as the first-one</div>
+                <div aria-describedby="tooltip-bottom" aria-label="ctrl+y">this one uses the same tip as the first-one<br>(and declares a shortcut using <code>aria-label</code>, which is deprecated but still supported)</div>
             </li>
             <li>
                 <pre><code class="html">&lt;div aria-describedby="tooltip-left" data-tooltip-direction="top"&gt;this uses the 3rd tip but positionned on top&lt;/div&gt;</code></pre>