From a404ac33bb9e78323b84d0840735445579634b9e Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Wed, 16 May 2012 19:09:57 -0700
Subject: modal accessibility tab control

---
 docs/javascript.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index 7ad42ae81..3a1f151cd 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -223,8 +223,9 @@
 
           <h2>Live demo</h2>
           <p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
+
           <!-- sample modal content -->
-          <div id="myModal" class="modal hide fade">
+          <div id="myModal" class="modal hide fade" tabindex=0>
             <div class="modal-header">
               <button class="close" data-dismiss="modal">&times;</button>
               <h3>Modal Heading</h3>
@@ -233,6 +234,11 @@
               <h4>Text in a modal</h4>
               <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
 
+              <form class="well">
+                <label>Label name</label>
+                <input type="text" class="span3" placeholder="Type something…">
+              </form>
+
               <h4>Popover in a modal</h4>
               <p>This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
 
-- 
cgit v1.2.3


From 10c6db4b14e5eb26bd663996233e3ac3075d5cb4 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Wed, 16 May 2012 19:43:22 -0700
Subject: add proper role to dialog markup and cleanup modal logging

---
 docs/javascript.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index 07e95f284..923df9e01 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -201,10 +201,10 @@
           <p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
 
           <!-- sample modal content -->
-          <div id="myModal" class="modal hide fade" tabindex=0>
+          <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModal-label">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
-              <h3>Modal Heading</h3>
+              <h3 id="myModal-label">Modal Heading</h3>
             </div>
             <div class="modal-body">
               <h4>Text in a modal</h4>
-- 
cgit v1.2.3


From a7b49a7d92a0efa640179b775e309002afc50390 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Thu, 17 May 2012 00:23:11 -0700
Subject: nearly everything working with activedescendant... then decide it's
 wrong.

---
 docs/javascript.html | 117 +++++++++++++++++++++++++--------------------------
 1 file changed, 57 insertions(+), 60 deletions(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index 923df9e01..ff0302bb2 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -201,22 +201,17 @@
           <p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
 
           <!-- sample modal content -->
-          <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModal-label">
+          <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
-              <h3 id="myModal-label">Modal Heading</h3>
+              <h3 id="myModalLabel">Modal Heading</h3>
             </div>
             <div class="modal-body">
               <h4>Text in a modal</h4>
               <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
 
-              <form class="well">
-                <label>Label name</label>
-                <input type="text" class="span3" placeholder="Type something…">
-              </form>
-
               <h4>Popover in a modal</h4>
-              <p>This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
+              <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
 
               <h4>Tooltips in a modal</h4>
               <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
@@ -233,8 +228,8 @@
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
             </div>
             <div class="modal-footer">
-              <a href="#" class="btn" data-dismiss="modal" >Close</a>
-              <a href="#" class="btn btn-primary">Save changes</a>
+              <a href="#" role="button" class="btn" data-dismiss="modal" >Close</a>
+              <a href="#" role="button" class="btn btn-primary">Save changes</a>
             </div>
           </div>
           <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
@@ -279,24 +274,25 @@
           <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p>
           <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p>
 <pre class="prettyprint linenums">
-&lt;a class="btn" data-toggle="modal" href="#myModal" &gt;Launch Modal&lt;/a&gt;
+&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch Modal&lt;/a&gt;
 </pre>
 
 <pre class="prettyprint linenums">
-&lt;div class="modal" id="myModal"&gt;
+&lt;div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
   &lt;div class="modal-header"&gt;
     &lt;button type="button" class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
-    &lt;h3&gt;Modal header&lt;/h3&gt;
+    &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
   &lt;/div&gt;
   &lt;div class="modal-body"&gt;
     &lt;p&gt;One fine body…&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="modal-footer"&gt;
-    &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
-    &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
+    &lt;a href="#" role="button" class="btn"&gt;Close&lt;/a&gt;
+    &lt;a href="#" role="button" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
+
           <div class="alert alert-info">
             <strong>Heads up!</strong> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js.
           </div>
@@ -370,41 +366,42 @@ $('#myModal').on('hidden', function () {
         <div class="span9 columns">
           <h2>Examples</h2>
           <p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p>
+
           <div id="navbar-example" class="navbar navbar-static">
             <div class="navbar-inner">
               <div class="container" style="width: auto;">
                 <a class="brand" href="#">Project Name</a>
-                <ul class="nav">
+                <ul class="nav" role="navigation">
                   <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                      <li><a href="#">Action</a></li>
-                      <li><a href="#">Another action</a></li>
-                      <li><a href="#">Something else here</a></li>
+                    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                    <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop1">
+                      <li><a tabindex="-1" href="http://google.com">Action</a></li>
+                      <li><a tabindex="-1" href="#anotherAction">Another action</a></li>
+                      <li><a tabindex="-1" href="#">Something else here</a></li>
                       <li class="divider"></li>
-                      <li><a href="#">Separated link</a></li>
+                      <li><a tabindex="-1" href="#">Separated link</a></li>
                     </ul>
                   </li>
                   <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                      <li><a href="#">Action</a></li>
-                      <li><a href="#">Another action</a></li>
-                      <li><a href="#">Something else here</a></li>
+                    <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
+                    <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop2">
+                      <li><a tabindex="-1" href="#">Action</a></li>
+                      <li><a tabindex="-1" href="#">Another action</a></li>
+                      <li><a tabindex="-1" href="#">Something else here</a></li>
                       <li class="divider"></li>
-                      <li><a href="#">Separated link</a></li>
+                      <li><a tabindex="-1" href="#">Separated link</a></li>
                     </ul>
                   </li>
                 </ul>
                 <ul class="nav pull-right">
                   <li id="fat-menu" class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                      <li><a href="#">Action</a></li>
-                      <li><a href="#">Another action</a></li>
-                      <li><a href="#">Something else here</a></li>
+                    <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
+                    <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop3">
+                      <li><a tabindex="-1" href="#">Action</a></li>
+                      <li><a tabindex="-1" href="#">Another action</a></li>
+                      <li><a tabindex="-1" href="#">Something else here</a></li>
                       <li class="divider"></li>
-                      <li><a href="#">Separated link</a></li>
+                      <li><a tabindex="-1" href="#">Separated link</a></li>
                     </ul>
                   </li>
                 </ul>
@@ -415,33 +412,33 @@ $('#myModal').on('hidden', function () {
           <ul class="nav nav-pills">
             <li class="active"><a href="#">Regular link</a></li>
             <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
-              <ul id="menu1" class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
+              <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+              <ul id="menu1" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop4">
+                <li><a tabindex="-1" href="#">Action</a></li>
+                <li><a tabindex="-1" href="#">Another action</a></li>
+                <li><a tabindex="-1" href="#">Something else here</a></li>
                 <li class="divider"></li>
-                <li><a href="#">Separated link</a></li>
+                <li><a tabindex="-1" href="#">Separated link</a></li>
               </ul>
             </li>
             <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
-              <ul id="menu2" class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
+              <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
+              <ul id="menu2" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5">
+                <li><a tabindex="-1" href="#">Action</a></li>
+                <li><a tabindex="-1" href="#">Another action</a></li>
+                <li><a tabindex="-1" href="#">Something else here</a></li>
                 <li class="divider"></li>
-                <li><a href="#">Separated link</a></li>
+                <li><a tabindex="-1" href="#">Separated link</a></li>
               </ul>
             </li>
             <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
-              <ul id="menu3" class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
+              <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
+              <ul id="menu3" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5">
+                <li><a tabindex="-1" href="#">Action</a></li>
+                <li><a tabindex="-1" href="#">Another action</a></li>
+                <li><a tabindex="-1" href="#">Something else here</a></li>
                 <li class="divider"></li>
-                <li><a href="#">Separated link</a></li>
+                <li><a tabindex="-1" href="#">Separated link</a></li>
               </ul>
             </li>
           </ul> <!-- /tabs -->
@@ -461,16 +458,16 @@ $('#myModal').on('hidden', function () {
 &lt;ul class="nav nav-pills"&gt;
   &lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;
   &lt;li class="dropdown" id="menu1"&gt;
-    &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
+    &lt;a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
       Dropdown
       &lt;b class="caret"&gt;&lt;/b&gt;
     &lt;/a&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
+    &lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt;
+      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
       &lt;li class="divider"&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/li&gt;
   ...
@@ -479,11 +476,11 @@ $('#myModal').on('hidden', function () {
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills"&gt;
   &lt;li class="dropdown"&gt;
-    &lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
+    &lt;a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"&gt;
       Dropdown
       &lt;b class="caret"&gt;&lt;/b&gt;
     &lt;/a&gt;
-    &lt;ul class="dropdown-menu"&gt;
+    &lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt;
       ...
     &lt;/ul&gt;
   &lt;/li&gt;
-- 
cgit v1.2.3


From 9889948f5851f5ce19668073b1f88eb4b6082ea6 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Thu, 17 May 2012 00:39:14 -0700
Subject: abandon activedescendant because it was awful

---
 docs/javascript.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'docs/javascript.html')

diff --git a/docs/javascript.html b/docs/javascript.html
index ff0302bb2..966a645dc 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -374,7 +374,7 @@ $('#myModal').on('hidden', function () {
                 <ul class="nav" role="navigation">
                   <li class="dropdown">
                     <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-                    <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop1">
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                       <li><a tabindex="-1" href="http://google.com">Action</a></li>
                       <li><a tabindex="-1" href="#anotherAction">Another action</a></li>
                       <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -384,7 +384,7 @@ $('#myModal').on('hidden', function () {
                   </li>
                   <li class="dropdown">
                     <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
-                    <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop2">
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                       <li><a tabindex="-1" href="#">Action</a></li>
                       <li><a tabindex="-1" href="#">Another action</a></li>
                       <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -396,7 +396,7 @@ $('#myModal').on('hidden', function () {
                 <ul class="nav pull-right">
                   <li id="fat-menu" class="dropdown">
                     <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
-                    <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop3">
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
                       <li><a tabindex="-1" href="#">Action</a></li>
                       <li><a tabindex="-1" href="#">Another action</a></li>
                       <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -413,7 +413,7 @@ $('#myModal').on('hidden', function () {
             <li class="active"><a href="#">Regular link</a></li>
             <li class="dropdown">
               <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
-              <ul id="menu1" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop4">
+              <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
                 <li><a tabindex="-1" href="#">Action</a></li>
                 <li><a tabindex="-1" href="#">Another action</a></li>
                 <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -423,7 +423,7 @@ $('#myModal').on('hidden', function () {
             </li>
             <li class="dropdown">
               <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
-              <ul id="menu2" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5">
+              <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
                 <li><a tabindex="-1" href="#">Action</a></li>
                 <li><a tabindex="-1" href="#">Another action</a></li>
                 <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -433,7 +433,7 @@ $('#myModal').on('hidden', function () {
             </li>
             <li class="dropdown">
               <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
-              <ul id="menu3" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5">
+              <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5">
                 <li><a tabindex="-1" href="#">Action</a></li>
                 <li><a tabindex="-1" href="#">Another action</a></li>
                 <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -462,7 +462,7 @@ $('#myModal').on('hidden', function () {
       Dropdown
       &lt;b class="caret"&gt;&lt;/b&gt;
     &lt;/a&gt;
-    &lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt;
+    &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
       &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
@@ -480,7 +480,7 @@ $('#myModal').on('hidden', function () {
       Dropdown
       &lt;b class="caret"&gt;&lt;/b&gt;
     &lt;/a&gt;
-    &lt;ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"&gt;
+    &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
       ...
     &lt;/ul&gt;
   &lt;/li&gt;
-- 
cgit v1.2.3