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/template | |
| 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/template')
| -rw-r--r-- | extensions/BugModal/template/en/default/bug_modal/module.html.tmpl | 29 |
1 files changed, 19 insertions, 10 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 ? "▸" : "▾" %]</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> |