Merge pull request #6332 from opf/fix/accessibility-issues

Fix accessibility issues on new sidebar and skip navigation links
[ci skip]

app/assets/javascripts/application.js.erb

@@ -351,7 +351,7 @@ jQuery(document).ready(function($) {
   addClickEventToAllErrorMessages();
 
   // Skip menu on content
-  jQuery('.skip-navigation-link').click(skipMenu);
+  jQuery('#skip-navigation--content').click(skipMenu);
 
   // Click handler for formatting help
   jQuery(document.body).on('click', '.formatting-help-link-button', function() {

app/assets/javascripts/specific/main_menu.js.erb

@@ -61,6 +61,7 @@ jQuery(document).ready(function($) {
       }
       return false;
     });
+    toggler.attr('title', I18n.t('js.project_menu_details'));
 
   // wrap main items
   var mainItems = $('#main-menu li > a').not('ul ul a');

app/views/layouts/base.html.erb

@@ -105,8 +105,9 @@ See docs/COPYRIGHT.rdoc for more details.
                 </a>
               </div>
               <a href="" class="hidden-for-sighted skip-navigation-link"
-                 aria-label="<%= I18n.t('js.work_packages.jump_marks.label_content') %>">
-                <%= I18n.t('js.work_packages.jump_marks.content') %>
+                 id="skip-navigation--content"
+                  aria-label="<%= I18n.t('js.work_packages.jump_marks.label_content') %>">
+                    <%= I18n.t('js.work_packages.jump_marks.content') %>
               </a>
               <%= render_top_menu_left %>
               <div id="logo" class="hidden-for-mobile">

config/locales/js-en.yml

@@ -348,6 +348,7 @@ en:
         zero: "You cannot select any items"
 
     show_hide_project_menu: "Expand/Collapse project menu"
+    project_menu_details: "Details"
 
     sort:
       sorted_asc: 'Ascending sort applied, '

frontend/app/components/table-pagination/table-pagination.component.html

@@ -7,7 +7,8 @@
            rel="prev start"
            [attr.aria-label]="text.label_previous"
            id= "pagination--prev-link"
-           role="link">&#60;</a>
+           role="link"
+           href>&#60;</a>
       </li>
 
       <ng-container *ngIf="prePageNumbers.length > 0">
@@ -16,7 +17,8 @@
           <a (accessibleClick)="showPage(pageNumber)"
              rel="next"
              role="link"
-             [textContent]="pageNumber"></a>
+             [textContent]="pageNumber"
+             href></a>
         </li>
         <li class="pagination--space">…</li>
       </ng-container>
@@ -30,7 +32,8 @@
             (accessibleClick)="showPage(pageNumber)"
             rel="next"
             role="link"
-            [textContent]="pageNumber"></a>
+            [textContent]="pageNumber"
+            href></a>
         </li>
 
         <li *ngIf="postPageNumbers.length" class="pagination--space">…</li>
@@ -41,7 +44,8 @@
           <a (accessibleClick)="showPage(pageNumber)"
              rel="next"
              role="link"
-             [textContent]="pageNumber"></a>
+             [textContent]="pageNumber"
+             href></a>
         </li>
       </ng-container>
 
@@ -52,7 +56,8 @@
            class="pagination--next-link"
            [attr.aria-label]="text.label_next"
            id="pagination--next-link"
-           role="link">&#62;</a>
+           role="link"
+           href>&#62;</a>
       </li>
 
       <li class="pagination--range">
@@ -77,7 +82,8 @@
        <span *ngIf="perPageOption != pagination.perPage">
          <a (accessibleClick)="selectPerPage(perPageOption)"
             role="link"
-            [textContent]="perPageOption"></a>
+            [textContent]="perPageOption"
+            href></a>
        </span>
 
        <span *ngIf="perPageOption == pagination.perPage">{{ perPageOption }}</span>