summaryrefslogtreecommitdiffstats
path: root/extensions/BugModal
diff options
context:
space:
mode:
authorDavid Lawrence <dkl@mozilla.com>2017-02-17 18:30:16 +0100
committerDavid Lawrence <dkl@mozilla.com>2017-02-17 18:30:16 +0100
commit2b95a515dddeef68250765e2a096fdd646880479 (patch)
tree9338ceb384eb8eeb42f92097570bdfa587f2ba2f /extensions/BugModal
parentc4dd84748813da48cd6105cffbee20456232c89b (diff)
downloadbugzilla-2b95a515dddeef68250765e2a096fdd646880479.tar.gz
bugzilla-2b95a515dddeef68250765e2a096fdd646880479.tar.xz
Bug 1280384 - [a11y] Make the different module titles headings and their expand/collapse thingie accessible
Diffstat (limited to 'extensions/BugModal')
-rw-r--r--extensions/BugModal/template/en/default/bug_modal/module.html.tmpl29
-rw-r--r--extensions/BugModal/web/bug_modal.css16
-rw-r--r--extensions/BugModal/web/bug_modal.js16
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