L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-68550 output: Improve accessibility of the paging bar

Browse Source 
The use of aria-current is based on the example at
https://design-system.w3.org/components/pagination.html
This commit is contained in:
Shamim Rezaie
2022-11-10 06:06:02 +11:00
parent 155ee75905
commit e29007d679
4 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/templates/paging_bar.mustache
+13 -9
View File
@@ -54,7 +54,7 @@
<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>
@@ -62,7 +62,10 @@
{{/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>
@@ -70,11 +73,9 @@
{{/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>
lib/tests/tablelib_test.php
+1 -1
View File
@@ -138,7 +138,7 @@ class tablelib_test extends \advanced_testcase {
$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,
theme/boost/lang/en/deprecated.txt
+1
View File
@@ -1,3 +1,4 @@
totop,theme_boost
privacy:drawernavclosed,theme_boost
privacy:drawernavopen,theme_boost
currentinparentheses,theme_boost
theme/boost/lang/en/theme_boost.php
+1 -1
View File
@@ -32,7 +32,6 @@ $string['brandcolor_desc'] = 'The accent colour.';
$string['bootswatch'] = 'Bootswatch';
$string['bootswatch_desc'] = 'A bootswatch is a set of Bootstrap variables and css to style Bootstrap';
$string['choosereadme'] = 'Boost is a modern highly-customisable theme. This theme is intended to be used directly, or as a parent theme when creating new themes utilising Bootstrap 4.';
$string['currentinparentheses'] = '(current)';
$string['configtitle'] = 'Boost';
$string['generalsettings'] = 'General settings';
$string['loginbackgroundimage'] = 'Login page background image';
@@ -64,5 +63,6 @@ $string['privacy:drawerblockopen'] = 'The current preference for the block drawe
$string['totop'] = 'Go to top';
// Deprecated since Moodle 4.1.
$string['currentinparentheses'] = '(current)';
$string['privacy:drawernavclosed'] = 'The current preference for the navigation drawer is closed.';
$string['privacy:drawernavopen'] = 'The current preference for the navigation drawer is open.';