MDL-79007 calendar: Make screen readers read the new month name

calendar/amd/src/calendar.js

@@ -34,6 +34,7 @@ define([
     'core_calendar/crud',
     'core_calendar/selectors',
     'core/config',
+    'core/str',
 ],
 function(
     $,
@@ -45,6 +46,7 @@ function(
     CalendarCrud,
     CalendarSelectors,
     Config,
+    Str,
 ) {
 
     var SELECTORS = {
@@ -57,7 +59,9 @@ function(
         CALENDAR_MONTH_WRAPPER: ".calendarwrapper",
         TODAY: '.today',
         DAY_NUMBER_CIRCLE: '.day-number-circle',
-        DAY_NUMBER: '.day-number'
+        DAY_NUMBER: '.day-number',
+        SCREEN_READER_ANNOUNCEMENTS: '.calendar-announcements',
+        CURRENT_MONTH: '.calendar-controls .current'
     };
 
     /**
@@ -151,6 +155,12 @@ function(
         body.on(CalendarEvents.eventMoved, function() {
             CalendarViewManager.reloadCurrentMonth(root);
         });
+        // Announce the newly loaded month to screen readers.
+        body.on(CalendarEvents.monthChanged, root, async function() {
+            const monthName = body.find(SELECTORS.CURRENT_MONTH).text();
+            const monthAnnoucement = await Str.get_string('newmonthannouncement', 'calendar', monthName);
+            body.find(SELECTORS.SCREEN_READER_ANNOUNCEMENTS).html(monthAnnoucement);
+        });
 
         CalendarCrud.registerEditListeners(root, eventFormModalPromise);
     };

calendar/templates/header.mustache

@@ -39,4 +39,5 @@
         {{{filter_selector}}}
     {{/filter_selector}}
     {{> core_calendar/add_event_button}}
-</div>
+</div>
+<div aria-live="polite" class="sr-only calendar-announcements"></div>

lang/en/calendar.php

@@ -192,6 +192,7 @@ $string['moreevents'] = '{$a} more';
 $string['namewithsource'] = '{$a->name} ({$a->source})';
 $string['never'] = 'Never';
 $string['newevent'] = 'New event';
+$string['newmonthannouncement'] = 'Calendar is now set to {$a}.';
 $string['notitle'] = 'no title';
 $string['noupcomingevents'] = 'There are no upcoming events';
 $string['nocalendarsubscriptions'] = 'No calendar subscriptions yet. Do you want to {$a}';