fix(ARIA-Roles): Improving accessibility of ui-grid. (#6341)

* Removed wrong role for pagination (it is not the footer of the page, see https://www.w3.org/TR/wai-aria/roles#contentinfo)

* Removed role menubar from pagination-footer because it does not comply with the expected keyboard behaviour: https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-11

* ARIA-information about the selection checkboxes.

These have been implemented in such a way that ngAria can work with them:
https://docs.angularjs.org/guide/accessibility#example

* Moved role=grid to grid-content-wrapper and marked the render container
as role=presentation.

This is in accordance with ARIA-recommondation for fixed header:
https://www.paciellogroup.com/blog/2014/10/notes-on-fixing-incorrect-table-structure-using-aria/
http://juicystudio.com/displayarticle.php/accessible_data_tables_static_headers.php?page=accessible_data_tables_static_headers.php

Author: classix-as

src/features/pagination/templates/pagination.html

@@ -1,17 +1,14 @@
 <div
-  role="contentinfo"
   class="ui-grid-pager-panel"
   ui-grid-pager
   ng-show="grid.options.enablePaginationControls">
   <div
     role="navigation"
     class="ui-grid-pager-container">
     <div
-      role="menubar"
       class="ui-grid-pager-control">
       <button
         type="button"
-        role="menuitem"
         class="ui-grid-pager-first"
         ui-grid-one-bind-title="aria.pageToFirst"
         ui-grid-one-bind-aria-label="aria.pageToFirst"
@@ -26,7 +23,6 @@
       </button>
       <button
         type="button"
-        role="menuitem"
         class="ui-grid-pager-previous"
         ui-grid-one-bind-title="aria.pageBack"
         ui-grid-one-bind-aria-label="aria.pageBack"
@@ -54,7 +50,6 @@
       </span>
       <button
         type="button"
-        role="menuitem"
         class="ui-grid-pager-next"
         ui-grid-one-bind-title="aria.pageForward"
         ui-grid-one-bind-aria-label="aria.pageForward"
@@ -64,7 +59,6 @@
       </button>
       <button
         type="button"
-        role="menuitem"
         class="ui-grid-pager-last"
         ui-grid-one-bind-title="aria.pageToLast"
         ui-grid-one-bind-aria-label="aria.pageToLast"

src/features/selection/templates/selectionHeaderCell.html

@@ -4,7 +4,9 @@
     class="ui-grid-cell-contents"
     col-index="renderIndex">
     <ui-grid-selection-select-all-buttons
-      ng-if="grid.options.enableSelectAll">
+      ng-if="grid.options.enableSelectAll"
+      role="checkbox"
+      ng-model="grid.selection.selectAll">
     </ui-grid-selection-select-all-buttons>
   </div>
 </div>

src/features/selection/templates/selectionRowHeaderButtons.html

@@ -1,6 +1,8 @@
 <div
   class="ui-grid-selection-row-header-buttons ui-grid-icon-ok"
   ng-class="{'ui-grid-row-selected': row.isSelected}"
-  ng-click="selectButtonClick(row, $event)">
+  ng-click="selectButtonClick(row, $event)"
+  role="checkbox"
+  ng-model="row.isSelected">
   &nbsp;
 </div>

src/templates/ui-grid/ui-grid.html

@@ -25,7 +25,7 @@
     {{ grid.customStyles }}
   </style>
 
-  <div class="ui-grid-contents-wrapper">
+  <div class="ui-grid-contents-wrapper" role="grid">
     <div ui-grid-menu-button ng-if="grid.options.enableGridMenu"></div>
 
     <div ng-if="grid.hasLeftContainer()" style="width: 0" ui-grid-pinned-container="'left'"></div>

src/templates/ui-grid/uiGridRenderContainer.html

@@ -1,5 +1,5 @@
 <div
-  role="grid"
+  role="presentation"
   ui-grid-one-bind-id-grid="'grid-container'"
   class="ui-grid-render-container"
   ng-style="{ 'margin-left': colContainer.getMargin('left') + 'px', 'margin-right': colContainer.getMargin('right') + 'px' }">