From b44acfecd2f3a9f8186deb471121dd9e07c0847d Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Fri, 21 Jun 2024 16:43:07 +0800
Subject: [PATCH 01/10] MDL-67683 theme: Do not use section for #region-main

The #region-main container should not be a <section> tag (which has a
default landmark role of "region") as it contains the container with
the "main" role which should be a top-level landmark.

Read more at:
https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/
---
 theme/boost/templates/columns1.mustache      | 4 ++--
 theme/boost/templates/columns2.mustache      | 4 ++--
 theme/boost/templates/drawers.mustache       | 4 ++--
 theme/boost/templates/login.mustache         | 4 ++--
 theme/boost/templates/maintenance.mustache   | 4 ++--
 theme/boost/templates/secure.mustache        | 4 ++--
 theme/classic/templates/columns.mustache     | 4 ++--
 theme/classic/templates/contentonly.mustache | 4 ++--
 theme/classic/templates/secure.mustache      | 4 ++--
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/theme/boost/templates/columns1.mustache b/theme/boost/templates/columns1.mustache
index d2965a73b71..5285d6213d6 100644
--- a/theme/boost/templates/columns1.mustache
+++ b/theme/boost/templates/columns1.mustache
@@ -48,7 +48,7 @@
     <div id="page" class="container-fluid d-print-block">
         <div id="page-content" class="row pb-3 d-print-block">
             <div id="region-main-box" class="col-12">
-                <section id="region-main" aria-label="{{#str}}content{{/str}}">
+                <div id="region-main">
                     {{{ output.course_content_header }}}
                     {{#headercontent}}
                         {{> core/activity_header }}
@@ -56,7 +56,7 @@
                     {{{ output.main_content }}}
                     {{{ output.activity_navigation }}}
                     {{{ output.course_content_footer }}}
-                </section>
+                </div>
             </div>
         </div>
     </div>
diff --git a/theme/boost/templates/columns2.mustache b/theme/boost/templates/columns2.mustache
index 463f5e55f6d..a5f3db4f938 100644
--- a/theme/boost/templates/columns2.mustache
+++ b/theme/boost/templates/columns2.mustache
@@ -73,7 +73,7 @@
                     <div> {{{ regionmainsettingsmenu }}} </div>
                 </div>
                 {{/hasregionmainsettingsmenu}}
-                <section id="region-main" {{#hasblocks}}class="has-blocks mb-3"{{/hasblocks}} aria-label="{{#str}}content{{/str}}">
+                <div id="region-main" {{#hasblocks}}class="has-blocks mb-3"{{/hasblocks}}>
 
                     {{#hasregionmainsettingsmenu}}
                         <div class="region_main_settings_menu_proxy"></div>
@@ -89,7 +89,7 @@
                     {{{ output.activity_navigation }}}
                     {{{ output.course_content_footer }}}
 
-                </section>
+                </div>
                 {{#hasblocks}}
                 <section data-region="blocks-column" class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
                     {{{ addblockbutton }}}
diff --git a/theme/boost/templates/drawers.mustache b/theme/boost/templates/drawers.mustache
index 69447565c08..679332b2781 100644
--- a/theme/boost/templates/drawers.mustache
+++ b/theme/boost/templates/drawers.mustache
@@ -142,7 +142,7 @@
                         <div> {{{ regionmainsettingsmenu }}} </div>
                     </div>
                     {{/hasregionmainsettingsmenu}}
-                    <section id="region-main" aria-label="{{#str}}content{{/str}}">
+                    <div id="region-main">
 
                         {{#hasregionmainsettingsmenu}}
                             <div class="region_main_settings_menu_proxy"></div>
@@ -162,7 +162,7 @@
                         {{{ output.activity_navigation }}}
                         {{{ output.course_content_footer }}}
 
-                    </section>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/theme/boost/templates/login.mustache b/theme/boost/templates/login.mustache
index 48428fd2f61..9014343f524 100644
--- a/theme/boost/templates/login.mustache
+++ b/theme/boost/templates/login.mustache
@@ -41,13 +41,13 @@
     <div id="page" class="container-fluid pt-5 mt-0">
         <div id="page-content" class="row">
             <div id="region-main-box" class="col-12">
-                <section id="region-main" class="col-12 h-100" aria-label="{{#str}}content{{/str}}">
+                <div id="region-main" class="col-12 h-100">
                 <div class="login-wrapper">
                     <div class="login-container">
                     {{{ output.main_content }}}
                     </div>
                 </div>
-                </section>
+                </div>
             </div>
         </div>
     </div>
diff --git a/theme/boost/templates/maintenance.mustache b/theme/boost/templates/maintenance.mustache
index d3dc36eec2e..d952db3b778 100644
--- a/theme/boost/templates/maintenance.mustache
+++ b/theme/boost/templates/maintenance.mustache
@@ -57,9 +57,9 @@
         </div>
 
         <div id="page-content" class="row">
-            <section id="region-main" class="col-12" aria-label="{{#str}}content{{/str}}">
+            <div id="region-main" class="col-12">
                 {{{ output.main_content }}}
-            </section>
+            </div>
         </div>
 
     </div>
diff --git a/theme/boost/templates/secure.mustache b/theme/boost/templates/secure.mustache
index e5334304a3c..c35d11225b6 100644
--- a/theme/boost/templates/secure.mustache
+++ b/theme/boost/templates/secure.mustache
@@ -60,7 +60,7 @@
 
         <div id="page-content" class="row">
             <div id="region-main-box" class="col-12">
-                <section id="region-main" {{#hasblocks}}class="has-blocks"{{/hasblocks}} aria-label="{{#str}}content{{/str}}">
+                <div id="region-main" {{#hasblocks}}class="has-blocks"{{/hasblocks}}>
 
                     {{{ output.course_content_header }}}
                     {{#headercontent}}
@@ -69,7 +69,7 @@
                     {{{ output.main_content }}}
                     {{{ output.course_content_footer }}}
 
-                </section>
+                </div>
                 {{#hasblocks}}
                 <section data-region="blocks-column" aria-label="{{#str}}blocks{{/str}}">
                     {{{ sidepreblocks }}}
diff --git a/theme/classic/templates/columns.mustache b/theme/classic/templates/columns.mustache
index 36b54558b05..2fdfa234fb3 100644
--- a/theme/classic/templates/columns.mustache
+++ b/theme/classic/templates/columns.mustache
@@ -66,7 +66,7 @@
                     <div> {{{ output.region_main_settings_menu }}} </div>
                 </div>
                 {{/hasregionmainsettingsmenu}}
-                <section id="region-main" class="region-main-content" aria-label="{{#str}}content{{/str}}">
+                <div id="region-main" class="region-main-content">
                     {{#hasregionmainsettingsmenu}}
                         <div class="region_main_settings_menu_proxy"></div>
                     {{/hasregionmainsettingsmenu}}
@@ -77,7 +77,7 @@
                     {{{ output.main_content }}}
                     {{{ output.activity_navigation }}}
                     {{{ output.course_content_footer }}}
-                </section>
+                </div>
             </div>
             <div class="columnleft blockcolumn {{#haspreblocks}} has-blocks {{/haspreblocks}}">
                 <section data-region="blocks-column" class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
diff --git a/theme/classic/templates/contentonly.mustache b/theme/classic/templates/contentonly.mustache
index b4045d64225..5efb2aa1c7d 100644
--- a/theme/classic/templates/contentonly.mustache
+++ b/theme/classic/templates/contentonly.mustache
@@ -54,7 +54,7 @@
     <div id="page" class="container-fluid">
         <div id="page-content" class="row">
             <div id="region-main-box" class="col-12">
-                <section id="region-main" aria-label="{{#str}}content{{/str}}">
+                <div id="region-main">
                     {{{ output.course_content_header }}}
                     {{#headercontent}}
                         {{> core/activity_header }}
@@ -62,7 +62,7 @@
                     {{{ output.main_content }}}
                     {{{ output.activity_navigation }}}
                     {{{ output.course_content_footer }}}
-                </section>
+                </div>
             </div>
         </div>
     </div>
diff --git a/theme/classic/templates/secure.mustache b/theme/classic/templates/secure.mustache
index 37b539dd0f2..74aaaa93913 100644
--- a/theme/classic/templates/secure.mustache
+++ b/theme/classic/templates/secure.mustache
@@ -71,7 +71,7 @@
 
         <div id="page-content" class="row {{#haspreblocks}} blocks-pre {{/haspreblocks}} {{#haspostblocks}} blocks-post {{/haspostblocks}}">
             <div id="region-main-box" class="region-main">
-                <section id="region-main" aria-label="{{#str}}content{{/str}}">
+                <div id="region-main">
                     <div class="card">
                         <div class="card-body">
                             {{{ output.course_content_header }}}
@@ -82,7 +82,7 @@
                             {{{ output.course_content_footer }}}
                         </div>
                     </div>
-                </section>
+                </div>
             </div>
             <div class="columnleft {{#haspreblocks}} has-blocks {{/haspreblocks}}">
                 <section data-region="blocks-column" class="d-print-none" aria-label="{{#str}}blocks{{/str}}">

From 03adce20fc52cbdc99ac49015eff9ff6faab461e Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Fri, 21 Jun 2024 16:52:22 +0800
Subject: [PATCH 02/10] MDL-67683 theme: Do not use section for block
 containers

The containers for the blocks in layout templates should not be using a
<section> tag (which has a default landmark role of "region") as the
blocks are already contained in an <aside> tag that has the default
"complementary" role which should be a top-level landmark.

Read more at:
https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/
---
 theme/boost/templates/columns2.mustache  | 4 ++--
 theme/boost/templates/drawers.mustache   | 4 ++--
 theme/boost/templates/embedded.mustache  | 4 ++--
 theme/boost/templates/secure.mustache    | 4 ++--
 theme/classic/templates/columns.mustache | 8 ++++----
 theme/classic/templates/secure.mustache  | 8 ++++----
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/theme/boost/templates/columns2.mustache b/theme/boost/templates/columns2.mustache
index a5f3db4f938..12eae717834 100644
--- a/theme/boost/templates/columns2.mustache
+++ b/theme/boost/templates/columns2.mustache
@@ -91,10 +91,10 @@
 
                 </div>
                 {{#hasblocks}}
-                <section data-region="blocks-column" class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
+                <div data-region="blocks-column" class="d-print-none">
                     {{{ addblockbutton }}}
                     {{{ sidepreblocks }}}
-                </section>
+                </div>
                 {{/hasblocks}}
             </div>
         </div>
diff --git a/theme/boost/templates/drawers.mustache b/theme/boost/templates/drawers.mustache
index 679332b2781..bd4cf97099d 100644
--- a/theme/boost/templates/drawers.mustache
+++ b/theme/boost/templates/drawers.mustache
@@ -79,10 +79,10 @@
             {{$id}}theme_boost-drawers-blocks{{/id}}
             {{$drawerclasses}}drawer drawer-right{{#blockdraweropen}} show{{/blockdraweropen}}{{/drawerclasses}}
             {{$drawercontent}}
-                <section class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
+                <div class="d-print-none">
                     {{{ addblockbutton }}}
                     {{{ sidepreblocks }}}
-                </section>
+                </div>
             {{/drawercontent}}
             {{$drawerpreferencename}}drawer-open-block{{/drawerpreferencename}}
             {{$forceopen}}{{#forceblockdraweropen}}1{{/forceblockdraweropen}}{{/forceopen}}
diff --git a/theme/boost/templates/embedded.mustache b/theme/boost/templates/embedded.mustache
index fe8dff905a7..167ddd63953 100644
--- a/theme/boost/templates/embedded.mustache
+++ b/theme/boost/templates/embedded.mustache
@@ -56,9 +56,9 @@
 {{{ output.standard_top_of_body_html }}}
 <div id="page" {{#hasfakeblocks}}class="has-fake-blocks"{{/hasfakeblocks}}>
     {{#hasfakeblocks}}
-        <section class="embedded-blocks" aria-label="{{#str}}blocks{{/str}}">
+        <div class="embedded-blocks">
             {{{ fakeblocks }}}
-        </section>
+        </div>
     {{/hasfakeblocks}}
     <section class="embedded-main">
         {{#headercontent}}
diff --git a/theme/boost/templates/secure.mustache b/theme/boost/templates/secure.mustache
index c35d11225b6..75fe1a0e2c6 100644
--- a/theme/boost/templates/secure.mustache
+++ b/theme/boost/templates/secure.mustache
@@ -71,9 +71,9 @@
 
                 </div>
                 {{#hasblocks}}
-                <section data-region="blocks-column" aria-label="{{#str}}blocks{{/str}}">
+                <div data-region="blocks-column">
                     {{{ sidepreblocks }}}
-                </section>
+                </div>
                 {{/hasblocks}}
             </div>
         </div>
diff --git a/theme/classic/templates/columns.mustache b/theme/classic/templates/columns.mustache
index 2fdfa234fb3..bac5c5595e5 100644
--- a/theme/classic/templates/columns.mustache
+++ b/theme/classic/templates/columns.mustache
@@ -80,15 +80,15 @@
                 </div>
             </div>
             <div class="columnleft blockcolumn {{#haspreblocks}} has-blocks {{/haspreblocks}}">
-                <section data-region="blocks-column" class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
+                <div data-region="blocks-column" class="d-print-none">
                     {{{ sidepreblocks }}}
-                </section>
+                </div>
             </div>
 
             <div class="columnright blockcolumn {{#haspostblocks}} has-blocks {{/haspostblocks}}">
-                <section data-region="blocks-column" class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
+                <div data-region="blocks-column" class="d-print-none">
                     {{{ sidepostblocks }}}
-                </section>
+                </div>
             </div>
         </div>
     </div>
diff --git a/theme/classic/templates/secure.mustache b/theme/classic/templates/secure.mustache
index 74aaaa93913..9ba4aee7d87 100644
--- a/theme/classic/templates/secure.mustache
+++ b/theme/classic/templates/secure.mustache
@@ -85,15 +85,15 @@
                 </div>
             </div>
             <div class="columnleft {{#haspreblocks}} has-blocks {{/haspreblocks}}">
-                <section data-region="blocks-column" class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
+                <div data-region="blocks-column" class="d-print-none">
                     {{{ sidepreblocks }}}
-                </section>
+                </div>
             </div>
 
             <div class="columnright {{#haspostblocks}} has-blocks {{/haspostblocks}}">
-                <section data-region="blocks-column" class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
+                <div data-region="blocks-column" class="d-print-none">
                     {{{ sidepostblocks }}}
-                </section>
+                </div>
             </div>
         </div>
     </div>

From 4262d0c1eceadba37b09a19877f972eb38a4361d Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Fri, 21 Jun 2024 17:23:17 +0800
Subject: [PATCH 03/10] MDL-67683 blocks: Do not assign a complementary role
 for blocks

Blocks are contained in an <aside> which has a default ARIA role of
"complementary", a top-level landmark. So assigning a "complementary"
role for block instances is not needed. As blocks are already in a
<section> tag which has a default role of "region", there's no need
to override the ARIA role, unless specified by the block plugin.

Read more at:
https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/
---
 blocks/moodleblock.class.php         | 16 +++++++++-------
 lib/classes/output/core_renderer.php |  2 +-
 lib/templates/block.mustache         |  4 ++--
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/blocks/moodleblock.class.php b/blocks/moodleblock.class.php
index 44fcf568d03..1696b4730bd 100644
--- a/blocks/moodleblock.class.php
+++ b/blocks/moodleblock.class.php
@@ -446,8 +446,11 @@ class block_base {
         $attributes = array(
             'id' => 'inst' . $this->instance->id,
             'class' => 'block_' . $this->name() . ' block',
-            'role' => $this->get_aria_role()
         );
+        $ariarole = $this->get_aria_role();
+        if ($ariarole) {
+            $attributes['role'] = $ariarole;
+        }
         if ($this->hide_header()) {
             $attributes['class'] .= ' no-header';
         }
@@ -739,20 +742,19 @@ EOD;
      * a landmark child.
      *
      * Options are as follows:
+     *    - application
      *    - landmark
-     *      - application
-     *      - banner
-     *      - complementary
-     *      - contentinfo
      *      - form
-     *      - main
      *      - navigation
      *      - search
      *
+     * Please do not use top-level landmark roles such as 'banner', 'complementary', 'contentinfo', or 'main'. Read more at
+     * {@link https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/ ARIA Authoring Practices Guide - Landmark Regions}
+     *
      * @return string
      */
     public function get_aria_role() {
-        return 'complementary';
+        return 'region';
     }
 
     /**
diff --git a/lib/classes/output/core_renderer.php b/lib/classes/output/core_renderer.php
index 1409906f4c7..c3095d28878 100644
--- a/lib/classes/output/core_renderer.php
+++ b/lib/classes/output/core_renderer.php
@@ -1503,7 +1503,7 @@ class core_renderer extends renderer_base {
         $context->skiptitle = strip_tags($bc->title);
         $context->showskiplink = !empty($context->skiptitle);
         $context->arialabel = $bc->arialabel;
-        $context->ariarole = !empty($bc->attributes['role']) ? $bc->attributes['role'] : 'complementary';
+        $context->ariarole = !empty($bc->attributes['role']) ? $bc->attributes['role'] : '';
         $context->class = $bc->attributes['class'];
         $context->type = $bc->attributes['data-block'];
         $context->title = $bc->title;
diff --git a/lib/templates/block.mustache b/lib/templates/block.mustache
index 61808eb7867..2c3fccc0a50 100644
--- a/lib/templates/block.mustache
+++ b/lib/templates/block.mustache
@@ -7,7 +7,7 @@
         "class": "block block_html",
         "showskiplink": true,
         "type": "html",
-        "ariarole": "complementary",
+        "ariarole": "",
         "title": "Test block",
         "blockinstanceid": 1,
         "content": "<p>Hello block world!</p>"
@@ -22,7 +22,7 @@
 {{! Start Block Container }}
 <section id="{{id}}"
      class="{{#hidden}}hidden{{/hidden}} {{class}} {{#hascontrols}}block_with_controls{{/hascontrols}} card mb-3"
-     role="{{ariarole}}"
+     {{#ariarole}}role="{{.}}"{{/ariarole}}
      data-block="{{type}}"
      data-instance-id="{{blockinstanceid}}"
      {{#arialabel}}

From 96fae5a6528ee2289a88a88a39c21e57915d9a53 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Fri, 21 Jun 2024 20:50:54 +0800
Subject: [PATCH 04/10] MDL-67683 behat: Update xpath selector for #region-main

---
 lib/tests/behat/behat_navigation.php                            | 2 +-
 .../tests/behat/behat_theme_classic_behat_navigation.php        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/tests/behat/behat_navigation.php b/lib/tests/behat/behat_navigation.php
index 1269400f752..ea49cb85e49 100644
--- a/lib/tests/behat/behat_navigation.php
+++ b/lib/tests/behat/behat_navigation.php
@@ -1168,7 +1168,7 @@ class behat_navigation extends behat_base {
     protected function select_on_administration_page($nodelist) {
         $parentnodes = $nodelist;
         $lastnode = array_pop($parentnodes);
-        $xpath = '//section[@id=\'region-main\']';
+        $xpath = '//div[@id=\'region-main\']';
 
         // Check if there is a separate tab for this submenu of the page. If found go to it.
         if ($parentnodes) {
diff --git a/theme/classic/tests/behat/behat_theme_classic_behat_navigation.php b/theme/classic/tests/behat/behat_theme_classic_behat_navigation.php
index b6ff2683f99..f557ca8d7b0 100644
--- a/theme/classic/tests/behat/behat_theme_classic_behat_navigation.php
+++ b/theme/classic/tests/behat/behat_theme_classic_behat_navigation.php
@@ -289,7 +289,7 @@ class behat_theme_classic_behat_navigation extends behat_navigation {
     protected function select_on_administration_page($nodelist) {
         $parentnodes = $nodelist;
         $lastnode = array_pop($parentnodes);
-        $xpath = '//section[@id=\'region-main\']';
+        $xpath = '//div[@id=\'region-main\']';
 
         // Check if there is a separate tab for this submenu of the page. If found go to it.
         if ($parentnodes) {

From 829af84071d7f07096b57820b514463f4a312530 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Mon, 22 Jul 2024 10:26:31 +0800
Subject: [PATCH 05/10] MDL-67683 auth: Test login page accessibility with axe
 best-practice tag

---
 auth/tests/behat/login.feature | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/auth/tests/behat/login.feature b/auth/tests/behat/login.feature
index 6fd357dede0..b5eacf1c2c7 100644
--- a/auth/tests/behat/login.feature
+++ b/auth/tests/behat/login.feature
@@ -55,12 +55,13 @@ Feature: Authentication
     And the page should meet accessibility standards with "wcag131, wcag141, wcag412" extra tests
 
   @javascript @accessibility
-  Scenario: The login page must have sufficient colour contrast
+  Scenario: The login page must meet accessibility standards
     Given the following config values are set as admin:
       | custommenuitems | -This is a custom item\|/customurl/ |
     When I am on site homepage
-    Then the page should meet "wcag143" accessibility standards
-    And the page should meet accessibility standards with "wcag143" extra tests
+    Then the page should meet accessibility standards with "best-practice" extra tests
+    And I follow "Log in"
+    And the page should meet accessibility standards with "best-practice" extra tests
 
   Scenario: Alternate login URL can be bypassed
     Given the following config values are set as admin:

From 5d142821a37429eba437f28f6c3515400b433d4e Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Thu, 25 Jul 2024 17:19:40 +0800
Subject: [PATCH 06/10] MDL-67683 theme: Set page heading in a header landmark
 for secure layout

---
 theme/boost/templates/secure.mustache   | 4 ++--
 theme/classic/templates/secure.mustache | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/theme/boost/templates/secure.mustache b/theme/boost/templates/secure.mustache
index 75fe1a0e2c6..51ed3f48940 100644
--- a/theme/boost/templates/secure.mustache
+++ b/theme/boost/templates/secure.mustache
@@ -48,7 +48,7 @@
     <div id="page" class="container-fluid">
         {{! Secured full header }}
 
-        <div id="page-header" class="row">
+        <header id="page-header" class="row">
             <div class="col-12 py-3">
                 <div class="page-context-header">
                     <div class="page-header-headings">
@@ -56,7 +56,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </header>
 
         <div id="page-content" class="row">
             <div id="region-main-box" class="col-12">
diff --git a/theme/classic/templates/secure.mustache b/theme/classic/templates/secure.mustache
index 9ba4aee7d87..8717eacbb03 100644
--- a/theme/classic/templates/secure.mustache
+++ b/theme/classic/templates/secure.mustache
@@ -59,7 +59,7 @@
     <div id="page" class="container-fluid">
         {{! Secured full header }}
 
-        <div id="page-header" class="row">
+        <header id="page-header" class="row">
             <div class="col-12 py-3">
                 <div class="page-context-header">
                     <div class="page-header-headings">
@@ -67,7 +67,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </header>
 
         <div id="page-content" class="row {{#haspreblocks}} blocks-pre {{/haspreblocks}} {{#haspostblocks}} blocks-post {{/haspostblocks}}">
             <div id="region-main-box" class="region-main">

From a1a39340d4c52f488cf996b3f89a5014495e1792 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Fri, 26 Jul 2024 11:07:50 +0800
Subject: [PATCH 07/10] MDL-67683 output: Make block regions unique

Unique labels for the block regions:
* `side-pre` blocks - "Blocks"
* `side-post` blocks - "Supplementary blocks"
* `content` blocks - "Main content blocks"

Blocks in the main content region (div role="main") should not also be
in an <aside> as it is a top-level landmark.
---
 lang/en/moodle.php                   |  2 ++
 lib/classes/output/core_renderer.php | 20 ++++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/lang/en/moodle.php b/lang/en/moodle.php
index 826f6944f3a..3f1ba3a86fc 100644
--- a/lang/en/moodle.php
+++ b/lang/en/moodle.php
@@ -221,6 +221,8 @@ $string['block'] = 'Block';
 $string['blockconfiga'] = 'Configuring a {$a} block';
 $string['blockconfigbad'] = 'This block has not been implemented correctly and thus cannot provide a configuration interface.';
 $string['blocks'] = 'Blocks';
+$string['blocks_main'] = 'Main content blocks';
+$string['blocks_supplementary'] = 'Supplementary blocks';
 $string['blocksaddedit'] = 'Add/Edit blocks';
 $string['blockseditoff'] = 'Blocks editing off';
 $string['blocksediton'] = 'Blocks editing on';
diff --git a/lib/classes/output/core_renderer.php b/lib/classes/output/core_renderer.php
index c3095d28878..ebdb6404f7c 100644
--- a/lib/classes/output/core_renderer.php
+++ b/lib/classes/output/core_renderer.php
@@ -3786,6 +3786,7 @@ EOD;
      */
     public function blocks($region, $classes = [], $tag = 'aside', $fakeblocksonly = false) {
         $displayregion = $this->page->apply_theme_region_manipulations($region);
+        $headingid = $displayregion . '-block-region-heading';
         $classes = (array)$classes;
         $classes[] = 'block-region';
         $attributes = [
@@ -3793,12 +3794,23 @@ EOD;
             'class' => join(' ', $classes),
             'data-blockregion' => $displayregion,
             'data-droptarget' => '1',
+            'aria-labelledby' => $headingid,
         ];
+        // Generate an appropriate heading to uniquely identify the block region.
+        $blocksheading = match ($displayregion) {
+            'side-post' => get_string('blocks_supplementary'),
+            'content' => get_string('blocks_main'),
+            default => get_string('blocks'),
+        };
+        $content = html_writer::tag('h2', $blocksheading, ['class' => 'sr-only', 'id' => $headingid]);
         if ($this->page->blocks->region_has_content($displayregion, $this)) {
-            $content = html_writer::tag('h2', get_string('blocks'), ['class' => 'sr-only']) .
-                $this->blocks_for_region($displayregion, $fakeblocksonly);
-        } else {
-            $content = html_writer::tag('h2', get_string('blocks'), ['class' => 'sr-only']);
+            $content .= $this->blocks_for_region($displayregion, $fakeblocksonly);
+        }
+        // Given that <aside> has a default role of a complementary landmark and is supposed to be a top-level landmark,
+        // blocks rendered as part of the main content should not have a complementary role and should be rendered in a more generic
+        // container.
+        if ($displayregion === 'content' && $tag === 'aside') {
+            $tag = 'section';
         }
         return html_writer::tag($tag, $content, $attributes);
     }

From 1187083f7c0f739a679896a892851585d95940f7 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Fri, 26 Jul 2024 11:10:09 +0800
Subject: [PATCH 08/10] MDL-67683 behat: Add accessibility test for the secure
 layout

Also, add page title and heading to the secure test page to make
it accessible.
---
 lib/tests/behat/securelayout.feature  | 6 ++++++
 lib/tests/fixtures/securetestpage.php | 3 +++
 2 files changed, 9 insertions(+)

diff --git a/lib/tests/behat/securelayout.feature b/lib/tests/behat/securelayout.feature
index 1baa41cb956..a1b632c5896 100644
--- a/lib/tests/behat/securelayout.feature
+++ b/lib/tests/behat/securelayout.feature
@@ -36,3 +36,9 @@ Feature: Page displaying with secure layout
     And I am on "Course 1" course homepage
     When I follow "Fixture link"
     Then I should not see "This is a custom item" in the "nav" "css_element"
+
+  @javascript @accessibility
+  Scenario: A page on the secure layout meets the accessibility standards
+    Given I am on the "C1" "Course" page logged in as "admin"
+    When I follow "Fixture link"
+    Then the page should meet accessibility standards with "best-practice" extra tests
diff --git a/lib/tests/fixtures/securetestpage.php b/lib/tests/fixtures/securetestpage.php
index 31ecba2624a..9d86f084535 100644
--- a/lib/tests/fixtures/securetestpage.php
+++ b/lib/tests/fixtures/securetestpage.php
@@ -29,6 +29,9 @@ defined('BEHAT_SITE_RUNNING') || die('Only available on Behat test server');
 $PAGE->set_pagelayout('secure');
 $PAGE->set_url('/lib/tests/fixtures/securetestpage.php');
 $PAGE->set_context(context_system::instance());
+$title = 'Secure test page';
+$PAGE->set_title($title);
+$PAGE->set_heading($title);
 
 echo $OUTPUT->header();
 

From 20aee393ce4482f2ee0aa1538cd8b94c4bdad505 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Fri, 26 Jul 2024 11:41:26 +0800
Subject: [PATCH 09/10] MDL-67683 behat: Add accessibility test for the
 maintenance mode layout

---
 auth/tests/behat/loginform.feature | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/auth/tests/behat/loginform.feature b/auth/tests/behat/loginform.feature
index cc4c01338e7..7942678268d 100644
--- a/auth/tests/behat/loginform.feature
+++ b/auth/tests/behat/loginform.feature
@@ -46,12 +46,14 @@ Feature: Test if the login form provides the correct feedback
     And I follow "Log in"
     Then I should see "Lorem ipsum dolor sit amet"
 
+  @javascript @accessibility
   Scenario: Show the maintenance mode message
     Given the following config values are set as admin:
-      | maintenance_enabled | Disabled |
-      | maintenance_message | Back online tomorrow |
+      | maintenance_enabled | 1                     |
+      | maintenance_message | Back online tomorrow  |
     And I follow "Log in"
     Then I should see "Back online tomorrow"
+    And the page should meet accessibility standards with "best-practice" extra tests
 
   Scenario: User self registration
     Given the following config values are set as admin:

From 26d7e5340012475f915be6fdc89ee715d2e554f5 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Mon, 4 Nov 2024 14:21:10 +0800
Subject: [PATCH 10/10] MDL-67683 theme_boost: Update selector for calendar
 block styles

With the change from `aside` to `section` for blocks within the main
content region, the selector for instances of the calendar block not in
the main content region also needs to be updated to use a more generic
selector that can cover when either the blocks container containing the
calendar block is an `aside` or a `section`.

The `data-blockregion` attribute is a good selector for this purpose.
---
 theme/boost/scss/moodle/calendar.scss |  2 +-
 theme/boost/style/moodle.css          | 32 +++++++++++++--------------
 theme/classic/style/moodle.css        | 32 +++++++++++++--------------
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/theme/boost/scss/moodle/calendar.scss b/theme/boost/scss/moodle/calendar.scss
index 612cfd3c297..46df80948b7 100644
--- a/theme/boost/scss/moodle/calendar.scss
+++ b/theme/boost/scss/moodle/calendar.scss
@@ -609,7 +609,7 @@ table.calendartable caption {
 }
 
 @media (min-width: 768px) {
-    section:not(#region-main) {
+    [data-blockregion]:not([data-blockregion="content"]) {
         .block {
             &.block_calendar_month {
                 .maincalendar {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 8318e4ced9c..cd7e088e055 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -27842,41 +27842,41 @@ table.calendartable caption {
   }
 }
 @media (min-width: 768px) {
-  section:not(#region-main) .block.block_calendar_month .maincalendar div.header {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar div.header {
     visibility: hidden;
     height: 0;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .current {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .current {
     width: 40%;
     font-size: inherit;
     line-height: inherit;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .previous,
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .next {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .previous,
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .next {
     width: 30%;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .previous .arrow_text,
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .next .arrow_text {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .previous .arrow_text,
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .next .arrow_text {
     display: none;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth th,
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth th,
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td {
     border: none;
     text-align: center !important;
     padding: 0;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td {
     height: auto;
     font-size: 0.8em;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent [data-region=day-content] {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent [data-region=day-content] {
     display: none;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number {
     display: inline-block;
     position: relative;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number:before {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number:before {
     content: ".";
     display: inline-block;
     position: absolute;
@@ -27887,19 +27887,19 @@ table.calendartable caption {
     font-size: 3em;
     color: inherit;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td:after {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td:after {
     content: "";
     display: block;
     margin-top: calc(100% - 26px);
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:hover {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:hover {
     background-color: inherit;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:not(.today):hover .day-number-circle {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:not(.today):hover .day-number-circle {
     border-radius: 50%;
     background-color: #ededed;
   }
-  section:not(#region-main) .block.block_calendar_month .bottom {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .bottom {
     border-top: 1px solid rgba(0, 0, 0, 0.125);
     padding-top: 0.5rem;
   }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 11b4070f837..b44c6122897 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -27842,41 +27842,41 @@ table.calendartable caption {
   }
 }
 @media (min-width: 768px) {
-  section:not(#region-main) .block.block_calendar_month .maincalendar div.header {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar div.header {
     visibility: hidden;
     height: 0;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .current {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .current {
     width: 40%;
     font-size: inherit;
     line-height: inherit;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .previous,
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .next {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .previous,
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .next {
     width: 30%;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .previous .arrow_text,
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendarwrapper .next .arrow_text {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .previous .arrow_text,
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendarwrapper .next .arrow_text {
     display: none;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth th,
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth th,
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td {
     border: none;
     text-align: center !important;
     padding: 0;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td {
     height: auto;
     font-size: 0.8em;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent [data-region=day-content] {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent [data-region=day-content] {
     display: none;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number {
     display: inline-block;
     position: relative;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number:before {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.hasevent .day-number:before {
     content: ".";
     display: inline-block;
     position: absolute;
@@ -27887,19 +27887,19 @@ table.calendartable caption {
     font-size: 3em;
     color: inherit;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td:after {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td:after {
     content: "";
     display: block;
     margin-top: calc(100% - 26px);
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:hover {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:hover {
     background-color: inherit;
   }
-  section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:not(.today):hover .day-number-circle {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:not(.today):hover .day-number-circle {
     border-radius: 50%;
     background-color: #ededed;
   }
-  section:not(#region-main) .block.block_calendar_month .bottom {
+  [data-blockregion]:not([data-blockregion=content]) .block.block_calendar_month .bottom {
     border-top: 1px solid rgba(0, 0, 0, 0.125);
     padding-top: 0.5rem;
   }