From b0b3a535215abdd113f1df504d7c52c76cab1d54 Mon Sep 17 00:00:00 2001
From: Shamim Rezaie <shamim@moodle.com>
Date: Sat, 5 Dec 2020 00:57:47 +1100
Subject: [PATCH 1/7] MDL-70173 output: use an empty alt to hide user pic from
 screen readers

There is no need to use WAI-ARIA to hide images from screen readers.
See https://www.w3.org/WAI/tutorials/images/decorative/
---
 blocks/online_users/block_online_users.php | 3 ++-
 lib/outputrenderers.php                    | 5 +----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/blocks/online_users/block_online_users.php b/blocks/online_users/block_online_users.php
index dbdf802097b..e44468cae6a 100644
--- a/blocks/online_users/block_online_users.php
+++ b/blocks/online_users/block_online_users.php
@@ -126,7 +126,8 @@ class block_online_users extends block_base {
                 } else { // Not a guest user.
                     $this->content->text .= '<div class="user">';
                     $this->content->text .= '<a href="'.$CFG->wwwroot.'/user/view.php?id='.$user->id.'&amp;course='.$this->page->course->id.'" title="'.$timeago.'">';
-                    $this->content->text .= $OUTPUT->user_picture($user, array('size'=>16, 'alttext'=>false, 'link'=>false)) .$user->fullname.'</a></div>';
+                    $avataroptions = ['size' => 16, 'visibletoscreenreaders' => false, 'link' => false];
+                    $this->content->text .= $OUTPUT->user_picture($user, $avataroptions) . $user->fullname . '</a></div>';
 
                     if ($USER->id == $user->id) {
                         if ($CFG->block_online_users_onlinestatushiding) {
diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index 222eaf33b69..6dc864ffbbc 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -2523,8 +2523,6 @@ class core_renderer extends renderer_base {
      * @return string
      */
     protected function render_user_picture(user_picture $userpicture) {
-        global $CFG, $DB;
-
         $user = $userpicture->user;
         $canviewfullnames = has_capability('moodle/site:viewfullnames', $this->page->context);
 
@@ -2557,11 +2555,10 @@ class core_renderer extends renderer_base {
         $attributes = array('src' => $src, 'class' => $class, 'width' => $size, 'height' => $size);
         if (!$userpicture->visibletoscreenreaders) {
             $alt = '';
-            $attributes['aria-hidden'] = 'true';
         }
+        $attributes['alt'] = $alt;
 
         if (!empty($alt)) {
-            $attributes['alt'] = $alt;
             $attributes['title'] = $alt;
         }
 

From a6578dd64fbb6e9621a818c9007816a58ea9aed7 Mon Sep 17 00:00:00 2001
From: Shamim Rezaie <shamim@moodle.com>
Date: Sat, 5 Dec 2020 03:59:51 +1100
Subject: [PATCH 2/7] MDL-70173 message: Fix empty link

---
 message/templates/message_drawer.mustache | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/message/templates/message_drawer.mustache b/message/templates/message_drawer.mustache
index c29d841aa78..c3440ba08f0 100644
--- a/message/templates/message_drawer.mustache
+++ b/message/templates/message_drawer.mustache
@@ -37,8 +37,10 @@
     {{$drawercontent}}
         <div id="message-drawer-{{uniqid}}" class="message-app" data-region="message-drawer" role="region">
             <div class="closewidget text-right pr-2">
-                <a class="text-dark btn-link" data-action="closedrawer" href="#">
-                     {{#pix}} i/window_close, core, {{#str}} closebuttontitle {{/str}} {{/pix}}
+                <a class="text-dark btn-link" data-action="closedrawer" href="#"
+                   title="{{#str}} closebuttontitle {{/str}}" aria-label="{{#str}} closebuttontitle {{/str}}"
+                >
+                    {{#pix}} i/window_close, core {{/pix}}
                 </a>
             </div>
             <div class="header-container position-relative" data-region="header-container">

From 3a9fa051c36a5dcdfe686aeb4cf5d7b233828b3d Mon Sep 17 00:00:00 2001
From: Shamim Rezaie <shamim@moodle.com>
Date: Mon, 7 Dec 2020 01:43:45 +1100
Subject: [PATCH 3/7] MDL-70173 dashboard: ARIA role presentation conflicted
 the empty alt

The markup <img role="presentation" alt="alt text"> is contradictory.

According to https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/presentation/PresentationRoleExamples.html
 It is recommended that authors instead use empty alt text (alt="")
 where they use role="presentation".
---
 .../templates/recentlyaccessedcourses-view.mustache            | 3 +--
 blocks/timeline/templates/event-list.mustache                  | 3 +--
 blocks/timeline/templates/view-courses.mustache                | 3 +--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache b/blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache
index 9a0bdb4db2c..0b2ef5d4eaf 100644
--- a/blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache
+++ b/blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache
@@ -45,8 +45,7 @@
     <div class="hidden text-xs-center text-center mt-3" data-region="empty-message">
         <img class="empty-placeholder-image-lg mt-1"
             src="{{nocoursesimgurl}}"
-            alt="{{#str}} nocourses, block_recentlyaccessedcourses {{/str}}"
-            role="presentation">
+            alt="">
         <p class="text-muted mt-3">{{#str}} nocourses, block_recentlyaccessedcourses {{/str}}</p>
     </div>
 </div>
diff --git a/blocks/timeline/templates/event-list.mustache b/blocks/timeline/templates/event-list.mustache
index 83c3b8aa3dd..999d1fba766 100644
--- a/blocks/timeline/templates/event-list.mustache
+++ b/blocks/timeline/templates/event-list.mustache
@@ -46,8 +46,7 @@
     <div class="hidden text-xs-center text-center mt-3" data-region="empty-message">
         <img
             src="{{urls.noevents}}"
-            alt="{{#str}} noevents, block_timeline {{/str}}"
-            role="presentation"
+            alt=""
             style="height: 70px; width: 70px"
         >
         <p class="text-muted mt-1">{{#str}} noevents, block_timeline {{/str}}</p>
diff --git a/blocks/timeline/templates/view-courses.mustache b/blocks/timeline/templates/view-courses.mustache
index c3bfbe2c12e..83844f6789e 100644
--- a/blocks/timeline/templates/view-courses.mustache
+++ b/blocks/timeline/templates/view-courses.mustache
@@ -41,8 +41,7 @@
 <div class="hidden text-xs-center text-center mt-3" data-region="no-courses-empty-message">
     <img
         src="{{urls.noevents}}"
-        alt="{{#str}} nocoursesinprogress, block_timeline {{/str}}"
-        role="presentation"
+        alt=""
         style="height: 70px; width: 70px"
     >
     <p class="text-muted mt-1">{{#str}} nocoursesinprogress, block_timeline {{/str}}</p>

From c0e3a4108cdabf1032495bc4f559c038c91be11c Mon Sep 17 00:00:00 2001
From: Shamim Rezaie <shamim@moodle.com>
Date: Mon, 7 Dec 2020 02:41:06 +1100
Subject: [PATCH 4/7] MDL-70173 output: All pages should have a heading

In MDL-63040, it was decided that the page header for the dashboad page
should be removed.
However, Based on Success Criteria 1.3.1 and 2.4.6 from the WebAIM's
WCAG 2 Checklist, all pages should have an <h1> element.
So I put an sr-only heading on the dashboard and all other pages, where
no page header is shown.
---
 lib/outputrenderers.php | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index 6dc864ffbbc..c645d6fd454 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -4240,9 +4240,17 @@ EOD;
       */
     protected function render_context_header(context_header $contextheader) {
 
+        // Generate the heading first and before everything else as we might have to do an early return.
+        if (!isset($contextheader->heading)) {
+            $heading = $this->heading($this->page->heading, $contextheader->headinglevel);
+        } else {
+            $heading = $this->heading($contextheader->heading, $contextheader->headinglevel);
+        }
+
         $showheader = empty($this->page->layout_options['nocontextheader']);
         if (!$showheader) {
-            return '';
+            // Return the heading wrapped in an sr-only element so it is only visible to screen-readers.
+            return html_writer::div($heading, 'sr-only');
         }
 
         // All the html stuff goes here.
@@ -4255,13 +4263,7 @@ EOD;
         }
 
         // Headings.
-        if (!isset($contextheader->heading)) {
-            $headings = $this->heading($this->page->heading, $contextheader->headinglevel);
-        } else {
-            $headings = $this->heading($contextheader->heading, $contextheader->headinglevel);
-        }
-
-        $html .= html_writer::tag('div', $headings, array('class' => 'page-header-headings'));
+        $html .= html_writer::tag('div', $heading, array('class' => 'page-header-headings'));
 
         // Buttons.
         if (isset($contextheader->additionalbuttons)) {

From 97b0401443f797f1b59a6fb24a4d45210571091e Mon Sep 17 00:00:00 2001
From: Shamim Rezaie <shamim@moodle.com>
Date: Mon, 7 Dec 2020 04:25:17 +1100
Subject: [PATCH 5/7] MDL-70173 theme_boost: Increase the size of notification
 counter

WAVE considers any text with the size of 10px or below really small.
Increasing the font size of the navbar counter by 1px should not make a
big negative impact on the design, but improves accessibility.
---
 theme/boost/scss/moodle/popover-region.scss | 8 ++++----
 theme/boost/style/moodle.css                | 8 ++++----
 theme/classic/style/moodle.css              | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/theme/boost/scss/moodle/popover-region.scss b/theme/boost/scss/moodle/popover-region.scss
index 8bf151b2f3d..cd4b72674bb 100644
--- a/theme/boost/scss/moodle/popover-region.scss
+++ b/theme/boost/scss/moodle/popover-region.scss
@@ -73,8 +73,8 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
     border-radius: 2px;
     background-color: red;
     color: white;
-    font-size: 10px;
-    line-height: 10px;
+    font-size: 11px;
+    line-height: 11px;
     position: absolute;
     top: 5px;
     right: 0;
@@ -191,8 +191,8 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
         border-radius: 2px;
         background-color: red;
         color: white;
-        font-size: 10px;
-        line-height: 10px;
+        font-size: 11px;
+        line-height: 11px;
         position: absolute;
         top: 5px;
         right: 0;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index ed2ef7f5876..ce346d505b9 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -18880,8 +18880,8 @@ body {
   border-radius: 2px;
   background-color: red;
   color: white;
-  font-size: 10px;
-  line-height: 10px;
+  font-size: 11px;
+  line-height: 11px;
   position: absolute;
   top: 5px;
   right: 0; }
@@ -18968,8 +18968,8 @@ body {
   border-radius: 2px;
   background-color: red;
   color: white;
-  font-size: 10px;
-  line-height: 10px;
+  font-size: 11px;
+  line-height: 11px;
   position: absolute;
   top: 5px;
   right: 0; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 444295682e5..7cdfba1f72b 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -19061,8 +19061,8 @@ body {
   border-radius: 2px;
   background-color: red;
   color: white;
-  font-size: 10px;
-  line-height: 10px;
+  font-size: 11px;
+  line-height: 11px;
   position: absolute;
   top: 5px;
   right: 0; }
@@ -19149,8 +19149,8 @@ body {
   border-radius: 2px;
   background-color: red;
   color: white;
-  font-size: 10px;
-  line-height: 10px;
+  font-size: 11px;
+  line-height: 11px;
   position: absolute;
   top: 5px;
   right: 0; }

From 805df4f84698c9546f9ccb9debf9b306b5c88078 Mon Sep 17 00:00:00 2001
From: Shamim Rezaie <shamim@moodle.com>
Date: Tue, 8 Dec 2020 05:00:27 +1100
Subject: [PATCH 6/7] MDL-70173 theme_boost: Fix empty link issue on the "Go to
 top" button

On behat, we have to use a more specific test step if we are looking
for a "Go" button on a modal. The reason is that the html of the modal
content is put after the html of the "Go to top" button, so behat
may find the "Go to top" button if we just look for "Go".
---
 mod/quiz/tests/behat/editing_add.feature        | 4 ++--
 mod/quiz/tests/behat/editing_repaginate.feature | 6 +++---
 theme/boost/templates/footer.mustache           | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/mod/quiz/tests/behat/editing_add.feature b/mod/quiz/tests/behat/editing_add.feature
index 41071b64cab..2952285fc0f 100644
--- a/mod/quiz/tests/behat/editing_add.feature
+++ b/mod/quiz/tests/behat/editing_add.feature
@@ -77,7 +77,7 @@ Feature: Edit quiz page - adding things
     When I press "Repaginate"
     Then I should see "Repaginate with"
     And I set the field "menuquestionsperpage" to "2"
-    When I press "Go"
+    When I click on "Go" "button" in the "Repaginate" "dialogue"
     And I should see "Essay 01 new" on quiz page "1"
     And I should see "Essay 02 new" on quiz page "1"
     And I should see "Essay 03 new" on quiz page "2"
@@ -231,7 +231,7 @@ Feature: Edit quiz page - adding things
     When I press "Repaginate"
     Then I should see "Repaginate with"
     And I set the field "menuquestionsperpage" to "1"
-    When I press "Go"
+    When I click on "Go" "button" in the "Repaginate" "dialogue"
     And I should see "Essay 03" on quiz page "1"
     And I should see "Essay 01" on quiz page "2"
     And I should see "Essay 02" on quiz page "3"
diff --git a/mod/quiz/tests/behat/editing_repaginate.feature b/mod/quiz/tests/behat/editing_repaginate.feature
index 0fe66564419..37e4ac78057 100644
--- a/mod/quiz/tests/behat/editing_repaginate.feature
+++ b/mod/quiz/tests/behat/editing_repaginate.feature
@@ -107,7 +107,7 @@ Feature: Edit quiz page - pagination
     # Repaginate one question per page.
     When I press "Repaginate"
     And I set the field "menuquestionsperpage" to "1"
-    And I press "Go"
+    And I click on "Go" "button" in the "Repaginate" "dialogue"
     Then I should see "Essay 01 new" on quiz page "1"
     And I should see "Essay 02 new" on quiz page "2"
     And I should see "Essay 03 new" on quiz page "3"
@@ -136,7 +136,7 @@ Feature: Edit quiz page - pagination
     # Repaginate with 2 questions per page.
     When I press "Repaginate"
     And I set the field "menuquestionsperpage" to "2"
-    And I press "Go"
+    And I click on "Go" "button" in the "Repaginate" "dialogue"
     Then I should see "Essay 01 new" on quiz page "1"
     And I should see "Essay 02 new" on quiz page "1"
     And I should see "Essay 03 new" on quiz page "2"
@@ -145,7 +145,7 @@ Feature: Edit quiz page - pagination
     # Repaginate with unlimited questions per page (All questions on Page 1).
     When I press "Repaginate"
     And I set the field "menuquestionsperpage" to "Unlimited"
-    And I press "Go"
+    And I click on "Go" "button" in the "Repaginate" "dialogue"
     Then I should see "Essay 01 new" on quiz page "1"
     And I should see "Essay 02 new" on quiz page "1"
     And I should see "Essay 03 new" on quiz page "1"
diff --git a/theme/boost/templates/footer.mustache b/theme/boost/templates/footer.mustache
index 2655fd4635c..fca4e060938 100644
--- a/theme/boost/templates/footer.mustache
+++ b/theme/boost/templates/footer.mustache
@@ -19,8 +19,8 @@
 }}
 <div id="goto-top-link">
     {{! go to top is sticky to footer so needs to be sibling }}
-    <a class="btn btn-light" role="button" href="#">
-        {{#pix}} i/up, core, {{#str}} totop, theme_boost {{/str}}{{/pix}}
+    <a class="btn btn-light" role="button" href="#" aria-label="{{#str}} totop, theme_boost {{/str}}">
+        {{#pix}} i/up, core{{/pix}}
     </a>
 </div>
 <footer id="page-footer" class="py-3 bg-dark text-light">

From 6df239900e1c22e1444a2c574167f8a3a2ab9dc6 Mon Sep 17 00:00:00 2001
From: Shamim Rezaie <shamim@moodle.com>
Date: Thu, 21 Jan 2021 22:34:40 +1100
Subject: [PATCH 7/7] MDL-70173 core: Use a meaningful first level header

---
 lib/outputrenderers.php | 4 +++-
 my/index.php            | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index c645d6fd454..6ee2a4a1b81 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -4142,6 +4142,8 @@ EOD;
         // Make sure to use the heading if it has been set.
         if (isset($headerinfo['heading'])) {
             $heading = $headerinfo['heading'];
+        } else {
+            $heading = $this->page->heading;
         }
 
         // The user context currently has images and buttons. Other contexts may follow.
@@ -4166,7 +4168,7 @@ EOD;
 
             if (user_can_view_profile($user, $course)) {
                 // Use the user's full name if the heading isn't set.
-                if (!isset($heading)) {
+                if (empty($heading)) {
                     $heading = fullname($user);
                 }
 
diff --git a/my/index.php b/my/index.php
index 9722450fe89..331954b73c9 100644
--- a/my/index.php
+++ b/my/index.php
@@ -62,14 +62,15 @@ if (isguestuser()) {  // Force them to see system default, no editing allowed
     $USER->editing = $edit = 0;  // Just in case
     $context = context_system::instance();
     $PAGE->set_blocks_editing_capability('moodle/my:configsyspages');  // unlikely :)
-    $header = "$SITE->shortname: $strmymoodle (GUEST)";
+    $strguest = get_string('guest');
+    $header = "$SITE->shortname: $strmymoodle ($strguest)";
     $pagetitle = $header;
 
 } else {        // We are trying to view or edit our own My Moodle page
     $userid = $USER->id;  // Owner of the page
     $context = context_user::instance($USER->id);
     $PAGE->set_blocks_editing_capability('moodle/my:manageblocks');
-    $header = fullname($USER);
+    $header = "$SITE->shortname: $strmymoodle";
     $pagetitle = $strmymoodle;
 }