diff options
| -rw-r--r-- | extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl | 10 | ||||
| -rw-r--r-- | extensions/BugModal/web/bug_modal.css | 2 | ||||
| -rw-r--r-- | extensions/BugModal/web/bug_modal.js | 43 |
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 |