diff options
| -rw-r--r-- | extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl | 45 | ||||
| -rw-r--r-- | extensions/BugModal/web/bug_modal.js | 81 |
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">▸</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">▸</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">▸</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">▸</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">▸</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">▸</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('▸'); - el_for.hide(); - } - else { - latch.data('expanded', true).html('▾'); - 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('▸'); + name.attr('aria-expanded', false); + info.hide(); + } + else { + label = label.replace(/^show/, 'hide'); + latch.data('expanded', true).html('▾'); + 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('▸'); - $('#cc-list').hide(); - } - else { - latch.data('expanded', true).html('▾'); - $('#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('▸'); + $('#cc-list').hide(); + } + else { + latch.data('expanded', true).html('▾'); + 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() { |