diff options
author | David Lawrence <dkl@mozilla.com> | 2017-02-17 18:30:16 +0100 |
---|---|---|
committer | David Lawrence <dkl@mozilla.com> | 2017-02-17 18:30:16 +0100 |
commit | 2b95a515dddeef68250765e2a096fdd646880479 (patch) | |
tree | 9338ceb384eb8eeb42f92097570bdfa587f2ba2f /extensions/BugModal/web | |
parent | c4dd84748813da48cd6105cffbee20456232c89b (diff) | |
download | bugzilla-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/web')
-rw-r--r-- | extensions/BugModal/web/bug_modal.css | 16 | ||||
-rw-r--r-- | extensions/BugModal/web/bug_modal.js | 16 |
2 files changed, 24 insertions, 8 deletions
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 ? '▾' : '▸'); + 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 |