Bug 1280384 - [a11y] Make the different module titles headings and their expand/collapse thingie accessible

3 files changed, 43 insertions, 18 deletions

diff --git a/extensions/BugModal/template/en/default/bug_modal/module.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/module.html.tmpl
index 92b37543a..e322cba0e 100644
--- a/extensions/BugModal/template/en/default/bug_modal/module.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/module.html.tmpl
@@ -21,7 +21,7 @@
   #   not be remembered between page loads
   #%]
 
-<div class="module
+<section class="module
     [%~ " edit-hide" IF hide_on_edit %]
     [%~ " edit-show" IF hide_on_view && !hide_on_edit %]"
     [% IF hide_on_view +%] style="display:none"[% END %]
@@ -29,12 +29,18 @@
     [%~ ' data-non-stick="1"' IF no_collapse_persist %]
 >
   [% IF title %]
-    <div class="module-header">
-      <div class="module-latch">
-        <div class="module-spinner">[% collapsed ? "&#9656;" : "&#9662;" %]</div>
-        <div class="module-title">[% title FILTER html %]</div>
+    <header id="module-[% title.replace FILTER id %]-header" class="module-header">
+      <div class="module-latch"
+           data-label-expanded="Collapse [% title FILTER html %] section"
+           data-label-collapsed="Expand [% title FILTER html %] section">
+        <div class="module-spinner" role="button" tabindex="0"
+             aria-controls="module-[% title.replace FILTER id %]-content"
+             aria-expanded="[% collapsed ? "false" : "true" %]"
+             aria-labeledby="module-[% title.replace FILTER id %]-title"
+             aria-describedby="module-[% title.replace FILTER id %]-subtitle"></div>
+        <h2 class="module-title" id="module-[% title.replace FILTER id %]-title">[% title FILTER html %]</h2>
         [% IF subtitle != "" && subtitle.size %]
-          <div class="module-subtitle">
+          <h3 class="module-subtitle" id="module-[% title.replace FILTER id %]-subtitle">
             ([% FOREACH st IN subtitle.list %]
               [% IF st.unfiltered.defined %]
                 [% st.unfiltered FILTER none %]
@@ -43,12 +49,15 @@
               [% END %]
               [% ", " UNLESS loop.last %]
             [% END %])
-          </div>
+          </h3>
         [% END %]
       </div>
-    </div>
+    </header>
   [% END %]
-  <div class="module-content" [% ' style="display:none"' IF collapsed %] >
+  <div class="module-content"
+      [%~ IF title %] id="module-[% title.replace FILTER id %]-content"[% END %]
+      [%~ ' style="display:none"' IF collapsed %]
+  >
     [% content FILTER none %]
   </div>
-</div>
+</section>
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index 2ef56619e..d1509fd7d 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -107,8 +107,6 @@ a.activity-ref {
 
 .module-header {
     background: #eee;
-    padding: 2px 5px;
-    cursor: pointer;
     -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
@@ -119,9 +117,8 @@ a.activity-ref {
 }
 
 .module-latch {
-    display: table-cell;
-    padding-left: 5px;
-    padding-right: 5px;
+    padding: 2px 10px;
+    cursor: pointer;
 }
 
 .module-spinner {
@@ -130,11 +127,20 @@ a.activity-ref {
     width: 10px;
 }
 
+.module-spinner::before {
+    content: "\25BE";
+}
+
+.module-spinner[aria-expanded="false"]::before {
+    content: "\25B8";
+}
+
 .module-title {
     font-weight: bold;
 }
 
 .module-title, .module-subtitle {
+    font-size: 13px;
     display: table-cell;
     padding-left: 5px;
 }
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index cfeec2271..894745016 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -10,13 +10,16 @@ function slide_module(module, action, fast) {
     if (!module.attr('id'))
         return;
     var latch = module.find('.module-latch');
-    var spinner = $(latch.children('.module-spinner')[0]);
+    var spinner = module.find('.module-spinner');
     var content = $(module.children('.module-content')[0]);
     var duration = fast ? 0 : 200;
 
     function slide_done() {
         var is_visible = content.is(':visible');
-        spinner.html(is_visible ? '&#9662;' : '&#9656;');
+        spinner.attr({
+            'aria-expanded': is_visible,
+            'aria-label': is_visible ? latch.data('label-expanded') : latch.data('label-collapsed'),
+        });
         if (BUGZILLA.user.settings.remember_collapsed)
             localStorage.setItem(module.attr('id') + '.visibility', is_visible ? 'show' : 'hide');
     }
@@ -94,10 +97,17 @@ $(function() {
     }
 
     // expand/colapse module
-    $('.module-header')
+    $('.module-latch')
         .click(function(event) {
             event.preventDefault();
             slide_module($(this).parents('.module'));
+        })
+        .keydown(function(event) {
+            // expand/colapse module with the enter or space key
+            if (event.keyCode === 13 || event.keyCode === 32) {
+                event.preventDefault();
+                slide_module($(this).parents('.module'));
+            }
         });
 
     // toggle obsolete attachments