MDL-69008 core: Fix accessibility issues in paged content templates

* Added menuitem role for the "Show x per page" menu. * Added appropriate aria-labels for the links in the paging bar.
moodle · Jun 19, 2020 · b9518bf · b9518bf
1 parent e2ef786
commit b9518bf
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 8 deletions.
diff --git a/lang/en/moodle.php b/lang/en/moodle.php
@@ -854,6 +854,7 @@
 $string['firstaccess'] = 'First access';
 $string['firstname'] = 'First name';
 $string['firstnamephonetic'] = 'First name - phonetic';
+$string['firstpage'] = 'First page';
 $string['firstsiteaccess'] = 'First access to site';
 $string['firsttime'] = 'Is this your first time here?';
 $string['folder'] = 'Folder';
@@ -1133,6 +1134,7 @@
 $string['lastmodified'] = 'Last modified';
 $string['lastname'] = 'Surname';
 $string['lastnamephonetic'] = 'Surname - phonetic';
+$string['lastpage'] = 'Last page';
 $string['lastsiteaccess'] = 'Last access to site';
 $string['lastyear'] = 'Last year';
 $string['latestlanguagepack'] = 'Check for latest language pack on moodle.org';
@@ -1417,6 +1419,7 @@
 $string['newusers'] = 'New users';
 $string['newwindow'] = 'New window';
 $string['next'] = 'Next';
+$string['nextpage'] = 'Next page';
 $string['nextsection'] = 'Next section';
 $string['no'] = 'No';
 $string['noblockstoaddhere'] = 'There are no blocks that you can add to this page.';
@@ -1600,6 +1603,7 @@
 $string['previeworchoose'] = 'Preview or choose a theme';
 $string['previous'] = 'Previous';
 $string['previouslyselectedusers'] = 'Previously selected users not matching \'{$a}\'';
+$string['previouspage'] = 'Previous page';
 $string['previoussection'] = 'Previous section';
 $string['primaryadminsetup'] = 'Setup administrator account';
 $string['privacy:metadata:config_log'] = 'The log of configuration changes.';

diff --git a/lib/templates/paged_content.mustache b/lib/templates/paged_content.mustache
@@ -23,11 +23,17 @@
     Example context (json):
     {
         "pagingbar": {
-            "itemsperpage": 1,
+            "showitemsperpageselector": true,
+            "itemsperpage": [
+                { "value": 5, "active": false },
+                { "value": 10, "active": true },
+                { "value": 15, "active": false }
+            ],
             "previous": true,
             "next": true,
             "first": true,
             "last": true,
+            "barsize": 5,
             "pages": [
                 {
                     "page": "1",
@@ -36,6 +42,26 @@
                 {
                     "url": "#",
                     "page": "2"
+                },
+                {
+                    "url": "#",
+                    "page": "3"
+                },
+                {
+                    "url": "#",
+                    "page": "4"
+                },
+                {
+                    "url": "#",
+                    "page": "5"
+                },
+                {
+                    "url": "#",
+                    "page": "6"
+                },
+                {
+                    "url": "#",
+                    "page": "7"
                 }
             ]
         },
@@ -48,6 +74,26 @@
             {
                 "page": 2,
                 "content": "<p>Some page 2 content</p>"
+            },
+            {
+                "page": 3,
+                "content": "<p>Some page 3 content</p>"
+            },
+            {
+                "page": 4,
+                "content": "<p>Some page 4 content</p>"
+            },
+            {
+                "page": 5,
+                "content": "<p>Some page 5 content</p>"
+            },
+            {
+                "page": 6,
+                "content": "<p>Some page 6 content</p>"
+            },
+            {
+                "page": 7,
+                "content": "<p>Some page 7 content</p>"
             }
         ]
     }

diff --git a/lib/templates/paged_content_paging_bar.mustache b/lib/templates/paged_content_paging_bar.mustache
@@ -22,7 +22,12 @@
 
     Example context (json):
     {
-        "itemsperpage": 2,
+        "showitemsperpageselector": true,
+        "itemsperpage": [
+            { "value": 5, "active": false },
+            { "value": 10, "active": true },
+            { "value": 15, "active": false }
+        ],
         "previous": true,
         "next": true,
         "first": true,
@@ -89,7 +94,8 @@
                         <a
                             class="dropdown-item {{#active}}active{{/active}}"
                             href="#"
-                            data-limit={{value}}
+                            data-limit="{{value}}"
+                            role="menuitem"
                             {{#active}}aria-current="true"{{/active}}
                         >
                             {{#value}}{{.}}{{/value}}
@@ -149,6 +155,7 @@
         <ul class="pagination mb-0">
             {{#previous}}
                 {{< core/paged_content_paging_bar_item }}
+                    {{$linkattributes}}aria-label="{{#str}}previouspage{{/str}}"{{/linkattributes}}
                     {{$item-content}}
                         <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
                         <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
@@ -158,16 +165,18 @@
             {{/previous}}
             {{#first}}
                 {{< core/paged_content_paging_bar_item }}
+                    {{$linkattributes}}aria-label="{{#str}}firstpage{{/str}}"{{/linkattributes}}
                     {{$item-content}}
-                        <span aria-hidden="true">{{#str}}first{{/str}}</span>
+                        {{#str}}first{{/str}}
                     {{/item-content}}
                     {{$attributes}}data-control="first"{{/attributes}}
                 {{/ core/paged_content_paging_bar_item }}
             {{/first}}
             {{#barsize}}
                 {{< core/paged_content_paging_bar_item }}
+                    {{$linkattributes}}aria-hidden="true"{{/linkattributes}}
                     {{$item-content}}
-                        <span aria-hidden="true">&hellip;</span>
+                        &hellip;
                     {{/item-content}}
                     {{$attributes}}data-dots="beginning"{{/attributes}}
                 {{/ core/paged_content_paging_bar_item }}
@@ -179,22 +188,25 @@
             {{/pages}}
             {{#barsize}}
                 {{< core/paged_content_paging_bar_item }}
+                    {{$linkattributes}}aria-hidden="true"{{/linkattributes}}
                     {{$item-content}}
-                        <span aria-hidden="true">&hellip;</span>
+                        &hellip;
                     {{/item-content}}
                     {{$attributes}}data-dots="ending"{{/attributes}}
                 {{/ core/paged_content_paging_bar_item }}
             {{/barsize}}
             {{#last}}
                 {{< core/paged_content_paging_bar_item }}
+                    {{$linkattributes}}aria-label="{{#str}}lastpage{{/str}}"{{/linkattributes}}
                     {{$item-content}}
-                        <span aria-hidden="true">{{#str}}last{{/str}}</span>
+                        {{#str}}last{{/str}}
                     {{/item-content}}
                     {{$attributes}}data-control="last"{{/attributes}}
                 {{/ core/paged_content_paging_bar_item }}
             {{/last}}
             {{#next}}
                 {{< core/paged_content_paging_bar_item }}
+                    {{$linkattributes}}aria-label="{{#str}}nextpage{{/str}}"{{/linkattributes}}
                     {{$item-content}}
                         <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
                         <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>

diff --git a/lib/templates/paged_content_paging_bar_item.mustache b/lib/templates/paged_content_paging_bar_item.mustache
@@ -33,7 +33,7 @@
 
     <a href="{{#url}}{{.}}{{/url}}{{^url}}#{{/url}}"
        class="page-link"
-       data-region="page-link">
+       data-region="page-link" {{$linkattributes}}aria-label="{{#str}}pagea, moodle, {{page}}{{/str}}"{{/linkattributes}}>
         {{$item-content}}
             {{{page}}}
         {{/item-content}}