fix: 🐛 ensure select all checkbox is announced correctly

Select All Checkbox needs a label and state to be announced by screen readers.
angular-ui · May 28, 2021 · 3b478fa · 3b478fa
1 parent f9a84ff
commit 3b478fa
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 2 deletions.
diff --git a/packages/core/src/js/en.js b/packages/core/src/js/en.js
@@ -36,6 +36,9 @@
           previous: 'Previous Page',
           last: 'Last Page'
         },
+        selection: {
+          selectAll: 'Select All'
+        },
         menu: {
           text: 'Choose Columns:'
         },

diff --git a/packages/i18n/src/js/es-ct.js b/packages/i18n/src/js/es-ct.js
@@ -33,6 +33,9 @@
           previous: 'Pàgina Anterior',
           last: 'Última Pàgina'
         },
+        selection: {
+          selectAll: 'Seleccionar Todo'
+        },
         menu: {
           text: 'Triar Columnes:'
         },

diff --git a/packages/i18n/src/js/es.js b/packages/i18n/src/js/es.js
@@ -19,6 +19,9 @@
           previous: 'Página Anterior',
           last: 'Última Página'
         },
+        selection: {
+          selectAll: 'Seleccionar Todo'
+        },
         menu: {
           text: 'Elegir columnas:'
         },

diff --git a/packages/i18n/src/js/fr.js b/packages/i18n/src/js/fr.js
@@ -28,6 +28,9 @@
           previous: 'Page précédente',
           last: 'Dernière page'
         },
+        selection: {
+          selectAll: 'Tout Sélectionner'
+        },
         menu: {
           text: 'Choisir des colonnes :'
         },

diff --git a/packages/i18n/src/js/it.js b/packages/i18n/src/js/it.js
@@ -22,6 +22,9 @@
           previous: 'Precedente',
           last: 'Ultima'
         },
+        selection: {
+          selectAll: 'Seleziona Tutto'
+        },
         menu: {
           text: 'Scegli le colonne:'
         },

diff --git a/packages/i18n/src/js/pt-br.js b/packages/i18n/src/js/pt-br.js
@@ -36,6 +36,9 @@
           previous: 'Página Anterior',
           last: 'Última Página'
         },
+        selection: {
+          selectAll: 'Selecionar Tudo'
+        },
         menu: {
           text: 'Selecione as colunas:'
         },

diff --git a/packages/i18n/src/js/pt.js b/packages/i18n/src/js/pt.js
@@ -33,6 +33,9 @@
           previous: 'Página Anterior',
           last: 'Última Página'
         },
+        selection: {
+          selectAll: 'Selecionar Tudo'
+        },
         menu: {
           text: 'Selecione as colunas:'
         },

diff --git a/packages/selection/src/templates/selectionSelectAllButtons.html b/packages/selection/src/templates/selectionSelectAllButtons.html
@@ -1,7 +1,9 @@
 <div
-	role="button"
+	role="checkbox"
   tabindex="0"
   class="ui-grid-selection-row-header-buttons ui-grid-icon-ok"
+  ui-grid-one-bind-aria-label="'selection.selectAll' | t"
+  aria-checked="{{grid.selection.selectAll}}"
   ng-class="{'ui-grid-all-selected': grid.selection.selectAll}"
   ng-click="headerButtonClick($event)"
   ng-keydown="headerButtonKeyDown($event)">

diff --git a/packages/selection/test/uiGridSelectionSelectAllButtonsDirective.spec.js b/packages/selection/test/uiGridSelectionSelectAllButtonsDirective.spec.js
@@ -53,7 +53,7 @@ describe('ui.grid.selection uiGridSelectionSelectAllButtons', function() {
 	it('should render the select all button', function() {
 		expect(selectAllButton.hasClass('ui-grid-selection-row-header-buttons')).toBe(true);
 		expect(selectAllButton.hasClass('ui-grid-icon-ok')).toBe(true);
-		expect(selectAllButton.attr('role')).toBe('button');
+		expect(selectAllButton.attr('role')).toBe('checkbox');
 	});
 	function testHeaderButtonAction(triggerAction) {
 		describe('when all of the rows are already selected', function() {