diff options
| -rw-r--r-- | extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl | 68 | ||||
| -rw-r--r-- | extensions/BugModal/web/bug_modal.js | 81 |
2 files changed, 95 insertions, 54 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 ef2922181..a33cc541a 100644 --- a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl +++ b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl @@ -352,13 +352,17 @@ hide_on_edit = can_edit_product help = "describecomponents.cgi?product=$filtered_product" %] - <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"> - [% bug.product FILTER html %] - </div> - <div id="product-info" style="display:none"> - [% bug.product_obj.description FILTER html_light %] - </div> + <span aria-owns="product-name product-latch"> + <span role="button" aria-label="show product information" aria-expanded="false" tabindex="0" + class="spin-latch" id="product-latch" data-latch="product" data-for="product">▸</span> + <div title="show product information" tabindex="0" class="spin-toggle" + id="product-name" data-latch="product" data-for="product"> + [% bug.product FILTER html %] + </div> + <div id="product-info" style="display:none"> + [% bug.product_obj.description FILTER html_light %] + </div> + </span> [% END %] [% WRAPPER bug_modal/field.html.tmpl field = bug_fields.product @@ -391,16 +395,20 @@ help = "describecomponents.cgi?product=$filtered_product&component=$filtered_component#$filtered_component" %] - <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 %] - </div> - <div id="component-info" style="display:none"> - <div>[% bug.component_obj.description FILTER html_light %]</div> - <a href="buglist.cgi?component=[% bug.component FILTER uri %]& - [%~ %]product=[% bug.product FILTER uri %]& - [%~ %]bug_status=__open__" target="_blank">Other [% terms.Bugs %]</a> - </div> + <span aria-owns="component-name component-latch"> + <span role="button" aria-label="show component description" aria-expanded="false" tabindex="0" + class="spin-latch" id="component-latch" data-latch="component" data-for="component">▸</span> + <div title="show component information" tabindex="0" 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> + <a href="buglist.cgi?component=[% bug.component FILTER uri %]& + [%~ %]product=[% bug.product FILTER uri %]& + [%~ %]bug_status=__open__" target="_blank">Other [% terms.Bugs %]</a> + </div> + </span> [% END %] [%# importance %] @@ -697,18 +705,20 @@ [% 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-summary cc-latch"> + [% 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" 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 8d908873e..25a9d1a73 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 = latch.attr('aria-label'); + + if (latch.data('expanded')) { + label = label.replace(/^hide/, 'show'); + latch.data('expanded', false).html('▸'); + latch.attr('aria-expanded', false); + info.hide(); + } + else { + label = label.replace(/^show/, 'hide'); + latch.data('expanded', true).html('▾'); + latch.attr('aria-expanded', true); + info.show(); + } + latch.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() { |