moodle/lib/templates/initials_bar.mustache
Shamim Rezaie 8e31a72c05 MDL-68550 output: Improve accessibility of the initials bar
- The current item should be focusable otherwise the focus will be lost
  as soon as a user clicks on an item in the initials bar
- Modified behat tests to not mistakenly click on the 'All' link
- Use the nav tag because each item in the initials bar is a
  navigation link within the current document
- The currently selected item is specified by aria-current
- Useed aria-current=true rather than =page because the links of each
  item in the initials bar is missing the pagination information
2022-11-10 06:06:02 +11:00

96 lines
3.4 KiB
Plaintext

{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core/initials_bar
Initials bar.
Example context (json):
{
"title": "First name",
"class": "firstinitial",
"current": "A",
"url": "http://moodle.generic32/report/progress/index.php?course=2&sifirst",
"all": "All",
"group": [
{
"letter": [
{
"name": "A",
"url": "http://moodle.generic32/report/progress/index.php?course=2&sifirst=A"
},
{
"name": "B",
"url": "http://moodle.generic32/report/progress/index.php?course=2&sifirst=B"
},
{
"name": "C",
"url": "http://moodle.generic32/report/progress/index.php?course=2&sifirst=C"
},
{
"name": "D",
"url": "http://moodle.generic32/report/progress/index.php?course=2&sifirst=D"
}
]
},
{
"letter": [
{
"name": "W",
"url": "http://moodle.generic32/report/progress/index.php?course=2&sifirst=W",
"selected": "W"
},
{
"name": "X",
"url": "http://moodle.generic32/report/progress/index.php?course=2&sifirst=X"
},
{
"name": "Y",
"url": "http://moodle.generic32/report/progress/index.php?course=2&sifirst=Y"
},
{
"name": "Z",
"url": "http://moodle.generic32/report/progress/index.php?course=2&sifirst=Z"
}
]
}
]
}
}}
<div class="initialbar {{class}} d-flex flex-wrap justify-content-center justify-content-md-start">
<span class="initialbarlabel mr-2">{{title}}</span>
<nav class="initialbargroups d-flex flex-wrap justify-content-center justify-content-md-start">
<ul class="pagination pagination-sm">
<li class="initialbarall page-item{{^current}} active{{/current}}">
<a data-initial="" class="page-link" href="{{url}}"{{^current}} aria-current="true"{{/current}}>{{all}}</a>
</li>
</ul>
{{#group}}
<ul class="pagination pagination-sm">
{{#letter}}
<li data-initial="{{name}}" class="page-item {{name}}{{#selected}} active{{/selected}}">
<a class="page-link" href="{{url}}"{{#selected}} aria-current="true"{{/selected}}>{{name}}</a>
</li>
{{/letter}}
</ul>
{{/group}}
</nav>
</div>