L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-72276 block_timeline: Make screen readers announce current selection

Browse Source 
* Have the currently selected dropdown menu item serve as the dropdown's
description in order for screen readers to announce its current
selection.
 - JAWS and NVDA both read this as "[element name] [selected value]".
 - Chrome screen reader (formerly ChromeVox) does not announce the
description.
* Add a title attribute so the dropdown's element name can be shown by
browsers on hover.
This commit is contained in:
Jun Pataleta
2021-10-04 11:30:36 +08:00
parent 04392abd53
commit bbcf026ce4
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocks/timeline/templates/nav-day-filter.mustache
+3 -2
View File
@@ -24,8 +24,9 @@
}}
<div data-region="day-filter" class="dropdown mb-1">
<button type="button" class="btn btn-outline-secondary dropdown-toggle icon-no-margin" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
aria-label="{{#str}} ariadayfilter, block_timeline {{/str}}" aria-controls="menudayfilter">
<span data-active-item-text>
aria-label="{{#str}} ariadayfilter, block_timeline {{/str}}" aria-controls="menudayfilter"
title="{{#str}} ariadayfilter, block_timeline{{/str}}" aria-describedby="timeline-day-filter-current-selection">
<span id="timeline-day-filter-current-selection" data-active-item-text>
{{#all}} {{#str}} all, core {{/str}} {{/all}}
{{#overdue}} {{#str}} overdue, block_timeline {{/str}} {{/overdue}}
{{#next7days}} {{#str}}next7days, block_timeline {{/str}} {{/next7days}}
blocks/timeline/templates/nav-view-selector.mustache
+3 -2
View File
@@ -24,8 +24,9 @@
}}
<div data-region="view-selector" class="btn-group mb-1">
<button type="button" class="btn btn-outline-secondary dropdown-toggle icon-no-margin" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
aria-label="{{#str}} ariaviewselector, block_timeline{{/str}}" aria-controls="menusortby">
<span data-active-item-text>
aria-label="{{#str}} ariaviewselector, block_timeline{{/str}}" aria-controls="menusortby"
title="{{#str}} ariaviewselector, block_timeline{{/str}}" aria-describedby="timeline-view-selector-current-selection">
<span id="timeline-view-selector-current-selection" data-active-item-text>
{{#sorttimelinecourses}}{{#str}} sortbycourses, block_timeline{{/str}}{{/sorttimelinecourses}}
{{#sorttimelinedates}}{{#str}} sortbydates, block_timeline {{/str}}{{/sorttimelinedates}}
</span>