summaryrefslogtreecommitdiffstats
path: root/extensions
diff options
context:
space:
mode:
authorDavid Lawrence <dkl@mozilla.com>2017-01-26 01:37:06 +0100
committerDavid Lawrence <dkl@mozilla.com>2017-01-26 01:37:06 +0100
commitc768148f9facf779d572145236453e50e99bee1d (patch)
treedd1f342a5f2e2b547a57a8adcbfdf901aec5d3de /extensions
parent3c1d21ede18e5cc55c4c094a1c5db8bf5e85e1ef (diff)
downloadbugzilla-c768148f9facf779d572145236453e50e99bee1d.tar.gz
bugzilla-c768148f9facf779d572145236453e50e99bee1d.tar.xz
Bug 1280397 - [a11y] Make the component, product, and other latches accessible
Diffstat (limited to 'extensions')
-rw-r--r--extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl45
-rw-r--r--extensions/BugModal/web/bug_modal.js81
2 files changed, 84 insertions, 42 deletions
diff --git a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
index d81fb9e92..314db7c3a 100644
--- a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
@@ -346,8 +346,12 @@
hide_on_edit = can_edit_product
help = "describecomponents.cgi"
%]
- <span class="spin-latch" id="product-latch" data-latch="#product-latch" data-for="#product-info">&#9656;</span>
- <div class="spin-toggle" data-latch="#product-latch" data-for="#product-info">
+ <span aria-hidden="true" class="spin-latch" id="product-latch"
+ data-latch="product" data-for="product">&#9656;</span>
+ <div role="button" aria-label="show product information"
+ title="show product information" tabindex="0"
+ aria-expanded="false" class="spin-toggle" id="product-name"
+ data-latch="product" data-for="product">
[% bug.product FILTER html %]
</div>
<div id="product-info" style="display:none">
@@ -384,9 +388,13 @@
field_type = constants.FIELD_TYPE_SINGLE_SELECT
help = "describecomponents.cgi"
%]
- <span class="spin-latch" id="component-latch" data-latch="#component-latch" data-for="#component-info">&#9656;</span>
- <div class="spin-toggle" data-latch="#component-latch" data-for="#component-info">
- [% bug.component FILTER html %]
+ <span aria-hidden="true" class="spin-latch" id="component-latch"
+ data-latch="component" data-for="component">&#9656;</span>
+ <div role="button" aria-label="show component description"
+ title="show component information" tabindex="0"
+ aria-expanded="false" class="spin-toggle" id="component-name"
+ data-latch="#component-latch" data-for="component">
+ [% bug.component FILTER html %]
</div>
<div id="component-info" style="display:none">
<div>[% bug.component_obj.description FILTER html_light %]</div>
@@ -675,18 +683,21 @@
[% END %]
[% IF bug.cc && bug.cc.size %]
- [% IF user.id %]
- <input type="hidden" name="removecc" id="removecc">
- <span id="cc-latch">&#9656;</span>
- [% END %]
- <span id="cc-summary" data-count="[% bug.cc.size FILTER none %]">
- [%
- IF bug.cc.size == 1;
- is_cced ? "Just you" : "1 person";
- ELSE;
- bug.cc.size _ " people";
- END;
- %]
+ <span aria-owns="cc-latch cc-summary">
+ [% IF user.id %]
+ <input type="hidden" name="removecc" id="removecc">
+ <span role="button" aria-label="show cc list" tabindex="0" id="cc-latch">&#9656;</span>
+ [% END %]
+ <span role="button" aria-label="show cc list" tabindex="0"
+ id="cc-summary" data-count="[% bug.cc.size FILTER none %]">
+ [%
+ IF bug.cc.size == 1;
+ is_cced ? "Just you" : "1 person";
+ ELSE;
+ bug.cc.size _ " people";
+ END;
+ %]
+ </span>
</span>
[% ELSE %]
<i>Nobody</i>
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index 01be1fd2c..40d3cd6dd 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -163,20 +163,38 @@ $(function() {
// product/component info
$('.spin-toggle, #product-latch, #component-latch')
.click(function(event) {
- event.preventDefault();
- var latch = $($(event.target).data('latch'));
- var el_for = $($(event.target).data('for'));
-
- if (latch.data('expanded')) {
- latch.data('expanded', false).html('&#9656;');
- el_for.hide();
- }
- else {
- latch.data('expanded', true).html('&#9662;');
- el_for.show();
+ spin_toggle(event);
+ }).keydown(function(event) {
+ // allow space or enter to toggle visibility
+ if (event.keyCode == 13 || event.keyCode == 32) {
+ spin_toggle(event);
}
});
+ function spin_toggle(event) {
+ event.preventDefault();
+ var type = $(event.target).data('for');
+ var latch = $('#' + type + '-latch');
+ var name = $('#' + type + '-name');
+ var info = $('#' + type + '-info');
+ var label = name.attr('aria-label');
+
+ if (latch.data('expanded')) {
+ label = label.replace(/^hide/, 'show');
+ latch.data('expanded', false).html('&#9656;');
+ name.attr('aria-expanded', false);
+ info.hide();
+ }
+ else {
+ label = label.replace(/^show/, 'hide');
+ latch.data('expanded', true).html('&#9662;');
+ name.attr('aria-expanded', true);
+ info.show();
+ }
+ name.attr('aria-label', label);
+ name.attr('title', label);
+ }
+
// cc list
function ccListLoading() {
@@ -230,24 +248,37 @@ $(function() {
$('#cc-summary').addClass('cc-loadable');
$('#cc-latch, #cc-summary')
.click(function(event) {
- event.preventDefault();
- var latch = $('#cc-latch');
-
- if (latch.data('expanded')) {
- latch.data('expanded', false).html('&#9656;');
- $('#cc-list').hide();
- }
- else {
- latch.data('expanded', true).html('&#9662;');
- $('#cc-list').show();
- if (!latch.data('fetched')) {
- ccListLoading();
- ccListUpdate();
- }
+ cc_toggle(event);
+ }).keydown(function(event) {
+ // allow space or enter to toggle visibility
+ if (event.keyCode == 13 || event.keyCode == 32) {
+ cc_toggle(event);
}
});
}
+ function cc_toggle(event) {
+ event.preventDefault();
+ var latch = $('#cc-latch');
+ var label = latch.attr('aria-label');
+ if (latch.data('expanded')) {
+ label = label.replace(/^hide/, 'show');
+ latch.data('expanded', false).html('&#9656;');
+ $('#cc-list').hide();
+ }
+ else {
+ latch.data('expanded', true).html('&#9662;');
+ label = label.replace(/^show/, 'hide');
+ $('#cc-list').show();
+ if (!latch.data('fetched')) {
+ ccListLoading();
+ ccListUpdate();
+ }
+ }
+ latch.attr('aria-label', label);
+ $('#cc-summary').attr('aria-label', label);
+ }
+
// copy summary to clipboard
function clipboardSummary() {