From e7a160da9a06b4fc36a8cb367cb5bda989007496 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 b2a76c37d7d..172834e4bbc 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -2511,8 +2511,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);
 
@@ -2545,11 +2543,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 5fae9c213d3e1adcdaf5bd1541dab288c2cdfec2 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 215cf15d922..dcb79a7f15b 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 bg-light border-bottom text-right">
-                <a class="text-dark" data-action="closedrawer" href="#">
-                     {{#pix}} i/window_close, core, {{#str}} closebuttontitle {{/str}} {{/pix}}
+                <a class="text-dark" 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 d27c60a90a422c895ff58a2357f00c01fd107bc9 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 254aa09f40d6c86236201601692b69ba03707fc7 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 172834e4bbc..85730bfa95d 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -4242,9 +4242,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.
@@ -4257,13 +4265,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 4ac8ae1be7c5e726163dc029755e1a043aef0406 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 2acb9c67933..45dd634dd41 100644
--- a/theme/boost/scss/moodle/popover-region.scss
+++ b/theme/boost/scss/moodle/popover-region.scss
@@ -74,8 +74,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;
@@ -199,8 +199,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 8291612032d..8b4dbf94c4a 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -18698,8 +18698,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; }
@@ -18792,8 +18792,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 e7ae3b49f22..825fe8c922b 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/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; }
@@ -18974,8 +18974,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 23ed4c4440cf3ce23a527f6738f8b8b031bbd421 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 e3142ca2e2b65d578d4009c848deb8c6716f0a4f 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 85730bfa95d..5154228b973 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -4144,6 +4144,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.
@@ -4168,7 +4170,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;
 }