BuyLog In
Ticket T1285424
Visible to All Users

Data Grid Functionality Feedback Screenreader + Keyboard

created 4 days ago

Dear Support,
we are considering differentiating the data grids according to their functionality. This refers to whether a data grid has a click event, is a selection list or neither. The distinction should be visible/audible when using the keyboard and/or the screen reader.

Our problem is that in some places we have a DataGrid where you can click on the rows and then navigate (use case 1). In other places, rows are selectable, but without an action being executed directly (use case 2). Other DataGrids are not interactive at all and only display data (use case 3).
You can use the mouse to differentiate between interactive grids (1 and 2) and non-interactive grids (3) by hover marking and cursor styling.

If you operate the list purely with the keyboard (cell by cell, whether with tab or arrow keys), you will not see any visual difference between these 3 use cases. If you use a screen reader, you will not receive a corresponding message when you navigate over a clickable cell.

We would like to recognize with the keyboard whether a cell (i.e. the row) is clickable or not. In addition, the screen reader should also provide corresponding information (e. g. an announcement “clickable” would be conceivable).

Can this be implemented with the Data Grid? Which properties could be used for this?

Regards,
Felix

Sign in to comment on this post

Answers approved by DevExpress Support

created 4 days ago

Hi Felix,

The DataGrid component does not have a dedicated method or option to support this usage scenario.

Depending on specificities of your usage scenario, you can utilize different APIs to manually add, for example, the aria-label attribute to a specific cell or row. Here is a list of public DataGrid API members you can use:

You can also add custom CSS rules to visually indicate a specific element's state. Along with inspecting the DataGrid structure in the browser's Elements panel, you can use the following public options to assign a custom class to a specific UI element:

I encourage you to check the full list of DataGrid API members to see if other public members could help you implement your usage scenario: Angular DataGrid API.

Regards,
Alisher

    Sign in to comment on this post

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.