From bbcf026ce40c6950bed5bebb76acdff21337b0df Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Thu, 26 Aug 2021 14:17:42 +0800
Subject: [PATCH] MDL-72276 block_timeline: Make screen readers announce
 current selection

* 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.
---
 blocks/timeline/templates/nav-day-filter.mustache    | 5 +++--
 blocks/timeline/templates/nav-view-selector.mustache | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/blocks/timeline/templates/nav-day-filter.mustache b/blocks/timeline/templates/nav-day-filter.mustache
index f19264decf0..4c36eee4317 100644
--- a/blocks/timeline/templates/nav-day-filter.mustache
+++ b/blocks/timeline/templates/nav-day-filter.mustache
@@ -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}}
diff --git a/blocks/timeline/templates/nav-view-selector.mustache b/blocks/timeline/templates/nav-view-selector.mustache
index aa3910c4012..da20e44cdb5 100644
--- a/blocks/timeline/templates/nav-view-selector.mustache
+++ b/blocks/timeline/templates/nav-view-selector.mustache
@@ -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>