adds simple fix for missing label text in grid select checkboxes (#10223)

* adds simple fix for missing label text in grid select checkboxes

* updated comment and wording

3 files changed, 16 insertions, 1 deletions

diff --git a/client/src/main/java/com/vaadin/client/widget/grid/selection/MultiSelectionRenderer.java b/client/src/main/java/com/vaadin/client/widget/grid/selection/MultiSelectionRenderer.java
index ba27d96afa..ebf806bbbd 100644
--- a/client/src/main/java/com/vaadin/client/widget/grid/selection/MultiSelectionRenderer.java
+++ b/client/src/main/java/com/vaadin/client/widget/grid/selection/MultiSelectionRenderer.java
@@ -604,6 +604,9 @@ public class MultiSelectionRenderer<T>
 
         CheckBoxEventHandler handler = new CheckBoxEventHandler(checkBox);
 
+        // label of checkbox should only be visible for assistive devices
+        checkBox.addStyleName("v-assistive-device-only-label");
+
         // Sink events
         checkBox.sinkBitlessEvent(BrowserEvents.MOUSEDOWN);
         checkBox.sinkBitlessEvent(BrowserEvents.TOUCHSTART);
@@ -623,9 +626,18 @@ public class MultiSelectionRenderer<T>
     public void render(final RendererCellReference cell, final Boolean data,
             CheckBox checkBox) {
         checkBox.setValue(data, false);
+        // this should be a temp fix.
+        checkBox.setText("Selects row number " + getDOMRowIndex(cell) + ".");
         checkBox.setEnabled(grid.isEnabled() && !grid.isEditorActive());
     }
 
+    private int getDOMRowIndex(RendererCellReference cell){
+        // getRowIndex starts with zero, that's why we add an additional 1.
+        // getDOMRowIndex should include getHeaderRows as well, this number
+        // should be equals to aria-rowindex.
+        return cell.getGrid().getHeaderRowCount() + cell.getRowIndex() + 1;
+    }
+
     @Override
     public Collection<String> getConsumedEvents() {
         final HashSet<String> events = new HashSet<>();
diff --git a/client/src/main/java/com/vaadin/client/widgets/Grid.java b/client/src/main/java/com/vaadin/client/widgets/Grid.java
index 4651c534dc..73867caa72 100755
--- a/client/src/main/java/com/vaadin/client/widgets/Grid.java
+++ b/client/src/main/java/com/vaadin/client/widgets/Grid.java
@@ -2928,11 +2928,14 @@ public class Grid<T> extends ResizeComposite implements HasSelectionHandlers<T>,
                 selectAllCheckBox = GWT.create(CheckBox.class);
                 selectAllCheckBox.setStylePrimaryName(
                         getStylePrimaryName() + SELECT_ALL_CHECKBOX_CLASSNAME);
+                // label of checkbox should only be visible for assistive devices
+                selectAllCheckBox.addStyleName("v-assistive-device-only-label");
                 selectAllCheckBox.addValueChangeHandler(event -> {
                     selected = event.getValue();
                     fireEvent(new SelectAllEvent<>(getSelectionModel(),
                             selected));
                 });
+                selectAllCheckBox.setText("Selects all rows of the table.");
                 selectAllCheckBox.setValue(selected);
 
                 addHeaderClickHandler(this::onHeaderClickEvent);
diff --git a/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss b/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss
index 99fbd360b1..622df7d8a1 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss
@@ -128,7 +128,7 @@ $valo-global-included: false !default;
       overflow:auto;
     }
 
-    .v-assistive-device-only {
+    .v-assistive-device-only, .v-assistive-device-only-label label {
       position: absolute;
       top: -2000px;
       left: -2000px;