Inability to Select All Checkbox on Grid Component using keyboard when Screen reader is Active.

[Ilya Zlochisty]

When the user navigates to a webpage using a keyboard which has a Gridcomponent with check box as the first column and multiple other columns. The user is unable to select the Select All check box using the keyboard ( using the space bar ) when a screen reader like NVDA is active.

Steps to Repro:

1. Navigate to the webpage containing the table with the "Select All" checkbox.

2. Activate the screen reader.

3. Attempt to select the "Select All" checkbox on the table using only keyboard navigation.

Expected results:

Users should be able to select the "Select All" checkbox on the table using keyboard shortcuts, even when a screen reader is active.

Actual Results:

When a screen reader is active, users are unable to select the "Select All" checkbox on the table using keyboard navigation alone.

Example:  Columns in React Grid component | Syncfusion  ( Run the preview sample shown in the first example)

[Aishwarya Rameshbabu]

Hi Ilya Zlochisty,

Greetings from Syncfusion support.

Based on the provided information, it has been observed that the header cell checkbox in the checkbox column of the Grid is not being selected when the NVDA screen reader is in use. Upon further analysis with other screen readers, we found that this issue could not be reproduced. This behavior appears to be specific to the NVDA screen reader. To address this issue, we recommend applying the class ‘e-gridchkbox’ to the header cell of the checkbox column. For further clarity, please refer to the code example and sample provided below, where the `headerCellInfo` event of the Grid is utilized to incorporate the specified class.

App.js

    const headerCellInfo = (args) => {

        if (args.cell.column.type === 'checkbox') {

            args.node.classList.add('e-gridchkbox');

        }

    }

<GridComponent dataSource={data.slice(0,5)} headerCellInfo={headerCellInfo}> 

        <ColumnsDirective>

             <ColumnDirective type='checkbox' width='90' />

             …………………………

        </ColumnsDirective> 

    </GridComponent>

 

Sample: https://stackblitz.com/edit/react-6lfnqvin-7ixqxjqe?file=App.js,datasource.ts

API Reference: Headercellinfo

If you need any other assistance or have additional questions, please feel free to contact us.

Regards,

Aishwarya R