Permalink
Browse files

Added long description and example for :focusable and :tabbable selec…

…tors.
  • Loading branch information...
1 parent 896014e commit 1bb872f1d4bc388369ebb2c1cba6aefce54c7d54 @scottgonzalez scottgonzalez committed Aug 27, 2012
Showing with 54 additions and 0 deletions.
  1. +28 −0 entries/focusable-selector.xml
  2. +26 −0 entries/tabbable-selector.xml
@@ -4,5 +4,33 @@
<sample>:focusable</sample>
<signature/>
<desc>Selects elements which can be focused.</desc>
+ <longdesc>
+ <p>Some elements are natively focusable, while others require explictly setting a tab index. In all cases, the element must be visible in order to be focusable.</p>
+
+ <p>Elements of the following type are focusable if they are not disabled: <code>input</code>, <code>select</code>, <code>textarea</code>, <code>button</code>, and <code>object</code>. Anchors are focusable if they have an <code>href</code> or <code>tabindex</code> attribute. <code>area</code> elements are focusable if they are inside a named map, have an <code>href</code> attribute, and there is a visible image using the map. All other elements are focusable based solely on their <code>tabindex</code> attribute and visibility.</p>
+
+ <p><em>Note: Elements with a negative tab index are <code>:focusable</code>, but not <a href="/tabbable-selector/"><code>:tabbable</code></a>.</em></p>
+ </longdesc>
+ <example>
+ <desc>Select focusable elements and highlight them with a red border.</desc>
+ <css><![CDATA[
+ input, a, p {
+ border: 1px solid #000;
+ }
+ div {
+ padding: 5px;
+ }
+]]></css>
+ <html><![CDATA[
+<div><input value="text input"></div>
+<div><a>anchor without href</a></div>
+<div><a href="#">anchor with href</a></div>
+<div><p>paragraph without tabindex</p></div>
+<div><p tabindex="1">paragraph with tabindex</p></div>
+]]></html>
+ <code><![CDATA[
+$( ":focusable" ).css( "border-color", "red" );
+]]></code>
+ </example>
<category slug="selectors"/>
</entry>
@@ -4,5 +4,31 @@
<sample>:tabbable</sample>
<signature/>
<desc>Selects elements which the user can focus via tabbing.</desc>
+ <longdesc>
+ <p>Some elements are natively tabbable, while others require explictly setting a positive tab index. In all cases, the element must be visible in order to be tabbable.</p>
+
+ <p>Elements of the following type are tabbale if they do not have a negative tab index and are not disabled: <code>input</code>, <code>select</code>, <code>textarea</code>, <code>button</code>, and <code>object</code>. Anchors are focusable if they have an <code>href</code> or positive <code>tabindex</code> attribute. <code>area</code> elements are focusable if they are inside a named map, have an <code>href</code> attribute, and there is a visible image using the map. All other elements are tabbable based solely on their <code>tabindex</code> attribute and visibility.</p>
+
+ <p><em>Note: Elements with a negative tab index are <a href="/focusable-selector/"><code>:focusable</code></a>, but not <code>:tabbable</code>.</em></p>
+ </longdesc>
+ <example>
+ <desc>Select tabbable elements and highlight them with a red border.</desc>
+ <css><![CDATA[
+ input {
+ border: 1px solid #000;
+ }
+ div {
+ padding: 5px;
+ }
+]]></css>
+ <html><![CDATA[
+<div><input value="no tabindex"></div>
+<div><input tabindex="5" value="positive tabindex"></div>
+<div><input tabindex="-1" value="negative tabindex"></div>
+]]></html>
+ <code><![CDATA[
+$( ":tabbable" ).css( "border-color", "red" );
+]]></code>
+ </example>
<category slug="selectors"/>
</entry>

0 comments on commit 1bb872f

Please sign in to comment.