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 coulmns which have check boxes and a screen reader like NVDA is active, the screen reader does not  provide the users with information about their presence and state (checked or unchecked).

Steps to Repro:

1. Open the web application.

2. Navigate to the page containing checkboxes either checked on unchecked and or disabled

3. Activate the screen reader.

4. Focus on the checkboxes column.

Expected results:

When focused, checkboxes column should be announced by the screen reader, providing users with information about their presence and state (checked or unchecked).

Actual Results:

Checkboxes column are not announced by the screen reader when focused, leaving users unaware of their presence or status.

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 information provided, it has been noted that you intend to announce the states of checkboxes displayed in columns where the `displayAsCheckBox` property is enabled within the Grid. Since the checkboxes within these columns are rendered in a disabled state, they are not included in the default tab navigation, causing their states to remain unannounced by screen readers. To overcome this, an `aria-label` has been assigned to the `<td>` elements containing these checkboxes utilizing the `queryCellInfo ` event of the Grid. This ensures that their states are announced properly by the screen readers. For further details, please refer to the example code and the accompanying sample provided below.

App.js

    const queryCellInfo = (args) => {

        if (args.column.displayAsCheckBox) {

            const checkedState = args.data[args.column.field] ? 'Checked' : 'Unchecked';

            args.cell.setAttribute('aria-label', checkedState);

        }

    };

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

        <ColumnsDirective>

            <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" type='number' />

            <ColumnDirective field='Verified' headerText='Verified' width='100' type='boolean' displayAsCheckBox={true} />

             …………………………

        </ColumnsDirective> 

    </GridComponent>

 

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

API Reference: QuerycellInfo

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

Regards,

Aishwarya R