We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid 508 compliance updates requested

508 compliance is required by my organization.  There are several key places where aria-labels are missing from the Grid and some controls (buttons) are not keyboard accessible.  Request to have these fixed so we do not have to try and apply hacks to achieve compliance.

aria-label needs to be applied in the following places:

  • Grid Search Textbox
  • Column Chooser
    • Search textbox
    • Column checkboxes
    • Ok / Cancel buttons
  • Grid Row Commands
    • When edit or delete commands are applied to each row, the icons do not have aria-labels

When using the keyboard to navigate through the grid, there are some items that are either not accessible via the keyboard OR the user cannot tell where the focus is:

  • Column Chooser
    • when tabbing through the column chooser, there is no way to tell where the focus is, which column.
  • Grid Search "Clear" button
    • When a user tabs into the Grid Search input field, enters a search string, the "clear" button does appear, however, there is no way to get to it via the keyboard.  As soon as the user presses the tab from the input field, the "clear" button disappears.
  • The column filter is not keyboard accessible.
  • When a column with custom actions is applied, these custom actions are not keyboard accessible.  Keyboard focus passes over these actions, there is no way to get to them like there is with the built in "command" column.


https://stackblitz.com/edit/angular-tboaxk?file=src/index.html

https://angular-tboaxk.stackblitz.io


2 Replies

PS Pavithra Subramaniyam Syncfusion Team May 10, 2023 10:39 AM UTC

Hi Dennis,


To validate the reported issue could you please share the below details which will be helpful for us to provide a better solution?


  1. The column filter is not keyboard accessible. – which element you are referring to in the filter popup
  2. When a column with custom actions is applied, these custom actions are not keyboard accessible. – Share a video demo for this custom command button accessibility issue


Regards,

Pavithra S



DM DENNIS MARKSBURY May 10, 2023 02:31 PM UTC

I found documentation that shows how to open the column filter.  Wasn't intuitive but it works for our needs.

Closing this as I have opened a support ticket.


Loader.
Up arrow icon