mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-13 12:32:08 +02:00
Code Issues Projects Releases Wiki Activity

MDL-68550 output: Improve accessibility of the initials bar

Browse Source 
- 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
This commit is contained in:
Shamim Rezaie 2022-06-20 12:05:27 +10:00
parent e29007d679
commit 8e31a72c05
2 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
lib/templates/initials_bar.mustache
View File

@ -76,31 +76,20 @@
<div class="initialbar {{class}} d-flex flex-wrap justify-content-center justify-content-md-start">
<span class="initialbarlabel mr-2">{{title}}</span>
<div class="initialbargroups d-flex flex-wrap justify-content-center justify-content-md-start">
<nav class="initialbargroups d-flex flex-wrap justify-content-center justify-content-md-start">
<ul class="pagination pagination-sm">
{{#current}}
<li class="initialbarall page-item">
<a data-initial="" class="page-link" href="{{url}}">{{all}}</a>
<li class="initialbarall page-item{{^current}} active{{/current}}">
<a data-initial="" class="page-link" href="{{url}}"{{^current}} aria-current="true"{{/current}}>{{all}}</a>
</li>
{{/current}}
{{^current}}
<li class="initialbarall page-item active">
<a data-initial="" class="page-link">{{all}}</a>
</li>
{{/current}}
</ul>
{{#group}}
<ul class="pagination pagination-sm">
{{#letter}}
{{#selected}}
<li data-initial="{{name}}" class="page-item active {{name}}"><span class="page-link">{{name}}</span></li>
{{/selected}}
{{^selected}}
<li data-initial="{{name}}" class="page-item {{name}}"><a class="page-link" href="{{url}}">{{name}}</a></li>
{{/selected}}
<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}}
</div>
</nav>
</div>

16
lib/tests/behat/alpha_chooser.feature
View File

@ -77,7 +77,7 @@ Feature: Initials bar
And I should see "Astudent Astudent"
And I should see "Bstudent Astudent"
And I should see "Cstudent Cstudent"
And I click on "A" "link" in the ".initialbar.lastinitial" "css_element"
And I click on "A" "link" in the ".initialbar.lastinitial .page-item.A" "css_element"
And ".initialbarall.page-item.active" "css_element" should exist in the ".initialbar.firstinitial" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.lastinitial" "css_element"
And ".page-item.active.B" "css_element" should not exist in the ".initialbar.firstinitial" "css_element"
@ -85,7 +85,7 @@ Feature: Initials bar
And I should see "Astudent Astudent"
And I should see "Bstudent Astudent"
And I should not see "Cstudent Cstudent"
And I click on "B" "link" in the ".initialbar.firstinitial" "css_element"
And I click on "B" "link" in the ".initialbar.firstinitial .page-item.B" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.firstinitial" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.lastinitial" "css_element"
And ".page-item.active.B" "css_element" should exist in the ".initialbar.firstinitial" "css_element"
@ -133,7 +133,7 @@ Feature: Initials bar
And I should see "Astudent Astudent"
And I should see "Bstudent Astudent"
And I should see "Cstudent Cstudent"
And I click on "A" "link" in the ".initialbar.lastinitial" "css_element"
And I click on "A" "link" in the ".initialbar.lastinitial .page-item.A" "css_element"
And ".initialbarall.page-item.active" "css_element" should exist in the ".initialbar.firstinitial" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.lastinitial" "css_element"
And ".page-item.active.B" "css_element" should not exist in the ".initialbar.firstinitial" "css_element"
@ -141,7 +141,7 @@ Feature: Initials bar
And I should see "Astudent Astudent"
And I should see "Bstudent Astudent"
And I should not see "Cstudent Cstudent"
And I click on "B" "link" in the ".initialbar.firstinitial" "css_element"
And I click on "B" "link" in the ".initialbar.firstinitial .page-item.B" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.firstinitial" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.lastinitial" "css_element"
And ".page-item.active.B" "css_element" should exist in the ".initialbar.firstinitial" "css_element"
@ -193,7 +193,7 @@ Feature: Initials bar
And I should see "Astudent Astudent"
And I should see "Bstudent Astudent"
And I should see "Cstudent Cstudent"
And I click on "A" "link" in the ".initialbar.lastinitial" "css_element"
And I click on "A" "link" in the ".initialbar.lastinitial .page-item.A" "css_element"
And ".initialbarall.page-item.active" "css_element" should exist in the ".initialbar.firstinitial" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.lastinitial" "css_element"
And ".page-item.active.B" "css_element" should not exist in the ".initialbar.firstinitial" "css_element"
@ -201,7 +201,7 @@ Feature: Initials bar
And I should see "Astudent Astudent"
And I should see "Bstudent Astudent"
And I should not see "Cstudent Cstudent"
And I click on "B" "link" in the ".initialbar.firstinitial" "css_element"
And I click on "B" "link" in the ".initialbar.firstinitial .page-item.B" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.firstinitial" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.lastinitial" "css_element"
And ".page-item.active.B" "css_element" should exist in the ".initialbar.firstinitial" "css_element"
@ -259,7 +259,7 @@ Feature: Initials bar
And I should see "Astudent Astudent"
And I should see "Bstudent Astudent"
And I should see "Cstudent Cstudent"
And I click on "A" "link" in the ".initialbar.lastinitial" "css_element"
And I click on "A" "link" in the ".initialbar.lastinitial .page-item.A" "css_element"
And ".initialbarall.page-item.active" "css_element" should exist in the ".initialbar.firstinitial" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.lastinitial" "css_element"
And ".page-item.active.B" "css_element" should not exist in the ".initialbar.firstinitial" "css_element"
@ -267,7 +267,7 @@ Feature: Initials bar
And I should see "Astudent Astudent"
And I should see "Bstudent Astudent"
And I should not see "Cstudent Cstudent"
And I click on "B" "link" in the ".initialbar.firstinitial" "css_element"
And I click on "B" "link" in the ".initialbar.firstinitial .page-item.B" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.firstinitial" "css_element"
And ".initialbarall.page-item.active" "css_element" should not exist in the ".initialbar.lastinitial" "css_element"
And ".page-item.active.B" "css_element" should exist in the ".initialbar.firstinitial" "css_element"