MDL-68550 output: Improve accessibility of the paging bar

The use of aria-current is based on the example at https://design-system.w3.org/components/pagination.html
moodle · Nov 9, 2022 · 4225940 · 4225940
1 parent 2ce1ed7
commit 4225940
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/lib/templates/paging_bar.mustache b/lib/templates/paging_bar.mustache
@@ -54,27 +54,28 @@
         <ul class="mt-1 pagination " data-page-size="{{pagesize}}">
             {{#previous}}
                 <li class="page-item" data-page-number="{{page}}">
-                    <a href="{{url}}" class="page-link" aria-label="{{# str }} previouspage, moodle {{/ str }}">
+                    <a href="{{url}}" class="page-link">
                         <span aria-hidden="true">&laquo;</span>
                         <span class="sr-only">{{#str}}previouspage, moodle{{/str}}</span>
                     </a>
                 </li>
             {{/previous}}
             {{#first}}
                 <li class="page-item" data-page-number="{{page}}">
-                    <a href="{{url}}" class="page-link">{{page}}</a>
+                    <a href="{{url}}" class="page-link">
+                        <span aria-hidden="true">{{page}}</span>
+                        <span class="sr-only">{{#str}}pagea, moodle, {{page}}{{/str}}</span>
+                    </a>
                 </li>
                 <li class="page-item disabled" data-page-number="{{page}}">
                     <span class="page-link">&hellip;</span>
                 </li>
             {{/first}}
             {{#pages}}
                 <li class="page-item {{#active}}active{{/active}}" data-page-number="{{page}}">
-                    <a href="{{#url}}{{.}}{{/url}}{{^url}}#{{/url}}" class="page-link">
-                        {{page}}
-                        {{#active}}
-                            <span class="sr-only">{{#str}}currentinparentheses, theme_boost{{/str}}</span>
-                        {{/active}}
+                    <a href="{{#url}}{{.}}{{/url}}{{^url}}#{{/url}}" class="page-link" {{#active}}aria-current="page"{{/active}}>
+                        <span aria-hidden="true">{{page}}</span>
+                        <span class="sr-only">{{#str}}pagea, moodle, {{page}}{{/str}}</span>
                     </a>
                 </li>
             {{/pages}}
@@ -83,12 +84,15 @@
                     <span class="page-link">&hellip;</span>
                 </li>
                 <li class="page-item" data-page-number="{{page}}">
-                    <a href="{{url}}" class="page-link">{{page}}</a>
+                    <a href="{{url}}" class="page-link">
+                        <span aria-hidden="true">{{page}}</span>
+                        <span class="sr-only">{{#str}}pagea, moodle, {{page}}{{/str}}</span>
+                    </a>
                 </li>
             {{/last}}
             {{#next}}
                 <li class="page-item" data-page-number="{{page}}">
-                    <a href="{{url}}" class="page-link" aria-label="{{# str }} nextpage, moodle {{/ str }}">
+                    <a href="{{url}}" class="page-link">
                         <span aria-hidden="true">&raquo;</span>
                         <span class="sr-only">{{#str}}nextpage, moodle{{/str}}</span>
                     </a>

diff --git a/lib/tests/tablelib_test.php b/lib/tests/tablelib_test.php
@@ -138,7 +138,7 @@ public function test_has_next_pagination() {
         $headers = $this->generate_headers(2);
 
         // Search for pagination controls containing 'page-link"\saria-label="Next"'.
-        $this->expectOutputRegex('/page-link"\saria-label="Next page"/');
+        $this->expectOutputRegex('/Next page/');
 
         $this->run_table_test(
             $columns,