From c768148f9facf779d572145236453e50e99bee1d Mon Sep 17 00:00:00 2001
From: David Lawrence <dkl@mozilla.com>
Date: Thu, 26 Jan 2017 00:37:06 +0000
Subject: Bug 1280397 - [a11y] Make the component, product, and other latches
 accessible

---
 .../template/en/default/bug_modal/edit.html.tmpl   | 45 ++++++++++++++--------
 1 file changed, 28 insertions(+), 17 deletions(-)

(limited to 'extensions/BugModal/template/en/default')

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>
-- 
cgit v1.2.3-24-g4f1b