feat(cellnav): output aria text for cells that come from selection feature

Author: adamascg

misc/tutorial/210_selection.ngdoc

@@ -57,7 +57,7 @@ auto-selects the first row once the data is loaded.
 
 <example module="app">
   <file name="app.js">
-    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection']);
+    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.cellNav', 'ngAria']);
 
     app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', 'uiGridConstants', function ($scope, $http, $log, $timeout, uiGridConstants) {
       $scope.gridOptions = {
@@ -192,7 +192,7 @@ auto-selects the first row once the data is loaded.
       <button type="button" class="btn btn-success" ng-click="toggleFullRowSelection()">Toggle full row selection</button>
       <br/>
 
-      <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
+      <div id="grid1Selection" ui-grid="gridOptions" ui-grid-selection ui-grid-cellnav class="grid"></div>
     </div>
     <div ng-controller="SecondCtrl">
       Single selection grid without rowHeader, and allowing rowSelection to be toggled on and off dynamically:
@@ -207,4 +207,26 @@ auto-selects the first row once the data is loaded.
       height: 400px;
     }
   </file>
+  <file name="scenario.js">
+    var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js');
+    var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js');
+    var grid1Selection = new GridObjectTest('grid1Selection');
+
+    describe('210 tutorial', function() {
+      xit('should output aria text for cells that come from selection feature', function () {
+          pending('For unknown reasons causes next test suite to fail. It looks as if the page for the next test was not loaded before selectors/expects fire.')
+          var focuser = element(by.css('.ui-grid-focuser'));
+          grid1Selection.selectRow(1).then(function () {
+            return gridTestUtils.click(focuser);
+          })
+          .then(function () {
+             expect(element(by.css('.ui-grid-a11y-ariascreenreader-speakable.ui-grid-offscreen')).getInnerHtml()).toEqual('Row selected ');
+             return focuser.sendKeys(protractor.Key.ARROW_DOWN);
+          })
+          .then(function () {
+             expect(element(by.css('.ui-grid-a11y-ariascreenreader-speakable.ui-grid-offscreen')).getInnerHtml()).toEqual('Row not selected ');
+          })
+      });
+    });
+  </file>
 </example>

src/features/cellnav/js/cellnav.js

@@ -629,8 +629,8 @@
    </file>
    </example>
    */
-  module.directive('uiGridCellnav', ['gridUtil', 'uiGridCellNavService', 'uiGridCellNavConstants', 'uiGridConstants', 'GridRowColumn', '$timeout', '$compile',
-    function (gridUtil, uiGridCellNavService, uiGridCellNavConstants, uiGridConstants, GridRowColumn, $timeout, $compile) {
+  module.directive('uiGridCellnav', ['gridUtil', 'uiGridCellNavService', 'uiGridCellNavConstants', 'uiGridConstants', 'GridRowColumn', '$timeout', '$compile', 'i18nService',
+    function (gridUtil, uiGridCellNavService, uiGridCellNavConstants, uiGridConstants, GridRowColumn, $timeout, $compile, i18nService) {
       return {
         replace: true,
         priority: -150,
@@ -833,10 +833,22 @@
                     }
                   }
 
+                  function getCellDisplayValue(currentRowColumn) {
+                    if (currentRowColumn.col.field === 'selectionRowHeaderCol') {
+                      // This is the case when the 'selection' feature is used in the grid and the user has moved
+                      // to or inside of the left grid container which holds the checkboxes for selecting rows.
+                      // This is necessary for Accessibility. Without this a screen reader cannot determine if the row
+                      // is or is not currently selected.
+                        return currentRowColumn.row.isSelected ? i18nService.getSafeText('search.aria.selected') : i18nService.getSafeText('search.aria.notSelected');
+                      } else {
+                        return grid.getCellDisplayValue(currentRowColumn.row, currentSelection[i].col);
+                      }
+                    }
+
                   var values = [];
                   var currentSelection = grid.api.cellNav.getCurrentSelection();
                   for (var i = 0; i < currentSelection.length; i++) {
-                    values.push(grid.getCellDisplayValue(currentSelection[i].row, currentSelection[i].col));
+                    values.push(getCellDisplayValue(currentSelection[i]));
                   }
                   var cellText = values.toString();
                   setNotifyText(cellText);

src/js/i18n/de.js

@@ -21,6 +21,10 @@
           description: 'Ziehen Sie eine Spaltenüberschrift hierhin, um nach dieser Spalte zu gruppieren.'
         },
         search: {
+          aria: {
+            selected: 'Zeile markiert',
+            notSelected: 'Zeile nicht markiert'
+          },
           placeholder: 'Suche...',
           showingItems: 'Zeige Einträge:',
           selectedItems: 'Ausgewählte Einträge:',

src/js/i18n/en.js

@@ -21,6 +21,10 @@
           description: 'Drag a column header here and drop it to group by that column.'
         },
         search: {
+          aria: {
+            selected: 'Row selected',
+            notSelected: 'Row not selected'
+          },
           placeholder: 'Search...',
           showingItems: 'Showing Items:',
           selectedItems: 'Selected Items:',

src/js/i18n/pl.js

@@ -21,6 +21,10 @@
           description: 'Przeciągnij nagłówek kolumny tutaj, aby pogrupować według niej.'
         },
         search: {
+          aria: {
+            selected: 'Wiersz zaznaczony',
+            notSelected: 'Wiersz niezaznaczony'
+          },
           placeholder: 'Szukaj...',
           showingItems: 'Widoczne pozycje:',
           selectedItems: 'Zaznaczone pozycje:',