summaryrefslogtreecommitdiffstats
path: root/extensions/BugModal
diff options
context:
space:
mode:
authorKohei Yoshino <kohei.yoshino@gmail.com>2017-01-11 05:45:58 +0100
committerDavid Lawrence <dkl@mozilla.com>2017-01-11 05:45:58 +0100
commitd3554d1f9593b7bc554f7a981139d89bff67bf9b (patch)
treeed8a3e4c520fac7fbbd76c171a24b1a910dbd0fd /extensions/BugModal
parent0c30df3fc8c42fcdfb6f7d7ee94111ff87ff6e8e (diff)
downloadbugzilla-d3554d1f9593b7bc554f7a981139d89bff67bf9b.tar.gz
bugzilla-d3554d1f9593b7bc554f7a981139d89bff67bf9b.tar.xz
Bug 1280395 - [a11y] Make the Add Comment and Preview tabs real accessible tabs
Diffstat (limited to 'extensions/BugModal')
-rw-r--r--extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl10
-rw-r--r--extensions/BugModal/web/bug_modal.css2
-rw-r--r--extensions/BugModal/web/bug_modal.js43
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