1 files changed, 32 insertions, 11 deletions

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