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
- 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

lib/templates/initials_bar.mustache

@@ -78,29 +78,18 @@
 
     <div 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>
 </div>
-

lib/tests/behat/alpha_chooser.feature

@@ -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"