Bug 1280395 - [a11y] Make the Add Comment and Preview tabs real accessible tabs

3 files changed, 38 insertions, 17 deletions

diff --git a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
index e76e422bc..60bf2b29a 100644
--- a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
@@ -30,21 +30,21 @@
     </div>
   [% END %]
 
-  <ul id="comment-tabs">
-    <li id="comment-edit-tab" data-tab="comment-tab-add" data-focus="comment" class="current">
+  <ul id="comment-tabs" role="tablist">
+    <li id="comment-edit-tab" data-focus="comment" role="tab" tabindex="0" aria-controls="comment-edit-tabpanel" aria-selected="true">
       Add Comment
     </li>
     [%~ ~%]
-    <li id="comment-preview-tab" data-tab="comment-tab-preview" data-focus="">
+    <li id="comment-preview-tab" role="tab" tabindex="-1" aria-controls="comment-preview-tabpanel" aria-selected="false">
       Preview
       <img id="preview-throbber" src="extensions/BugModal/web/throbber.gif" width="16" height="11" style="display:none">
     </li>
   </ul>
 
-  <div id="comment-tab-add" class="comment-tab">
+  <div id="comment-edit-tabpanel" class="comment-tabpanel" role="tabpanel" aria-labelledby="comment-edit-tab">
     <textarea rows="5" cols="80" name="comment" id="comment"></textarea>
   </div>
-  <div id="comment-tab-preview" class="comment-tab" style="display:none">
+  <div id="comment-preview-tabpanel" class="comment-tabpanel" role="tabpanel" aria-labelledby="comment-preview-tab" style="display:none">
     <pre id="comment-preview" class="comment-text"></pre>
   </div>
 
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index e6b31992c..b3b991807 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -725,7 +725,7 @@ h3.change-name {
     border-top-right-radius: 2px;
 }
 
-#comment-tabs li.current {
+#comment-tabs li[aria-selected="true"] {
     background: #fff;
     border-bottom: 1px solid #fff;
 }
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index 140625631..d77821929 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -1276,7 +1276,7 @@ $(function() {
     var last_comment_text = '';
     $('#comment-tabs li').click(function() {
         var that = $(this);
-        if (that.hasClass('current'))
+        if (that.attr('aria-selected') === 'true')
             return;
 
         // ensure preview's height matches the comment
@@ -1285,22 +1285,18 @@ $(function() {
         var comment_height = comment[0].offsetHeight;
 
         // change tabs
-        $('#comment-tabs li').removeClass('current').attr('aria-selected', false);
-        $('.comment-tab').hide();
-        that.addClass('current').attr('aria-selected', true);
-        var tab = that.attr('data-tab');
-        $('#' + tab).show();
+        $('#comment-tabs li').attr({ tabindex: -1, 'aria-selected': false });
+        $('.comment-tabpanel').hide();
+        that.attr({ tabindex: 0, 'aria-selected': true });
+        var tabpanel = $('#' + that.attr('aria-controls')).show();
         var focus = that.data('focus');
-        if (focus === '') {
-            document.activeElement.blur();
-        }
-        else {
+        if (focus !== '') {
             $('#' + focus).focus();
         }
 
         // update preview
         preview.css('height', comment_height + 'px');
-        if (tab != 'comment-tab-preview' || last_comment_text == comment.val())
+        if (tabpanel.attr('id') != 'comment-preview-tabpanel' || last_comment_text == comment.val())
             return;
         $('#preview-throbber').show();
         preview.html('');
@@ -1324,6 +1320,31 @@ $(function() {
             }
         );
         last_comment_text = comment.val();
+    }).keydown(function(event) {
+        var that = $(this);
+        var tabs = $('#comment-tabs li');
+        var target;
+
+        // enable keyboard navigation on tabs
+        switch (event.keyCode) {
+            case 35: // End
+                target = tabs.last();
+                break;
+            case 36: // Home
+                target = tabs.first();
+                break;
+            case 37: // Left arrow
+                target = that.prev('[role="tab"]');
+                break;
+            case 39: // Right arrow
+                target = that.next('[role="tab"]');
+                break;
+        }
+
+        if (target && target.length) {
+            event.preventDefault();
+            target.click().focus();
+        }
     });
 
     // dirty field tracking