Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Accessibility]: It is not possible to navigate and click Data Table row using keyboard only. #2815

Closed
Sayan-Kyn-Personal opened this issue Mar 14, 2024 · 5 comments

Comments

@Sayan-Kyn-Personal
Copy link

[Accessibility]: It is not possible to navigate and click Data Table row using keyboard only.

Describe in detail the issue you're having.
It is not possible to navigate and click Data Table row using keyboard only.

Is this a feature request (new component, new icon), a bug, or a general issue?
Bug

Is this issue related to a specific component?

What did you expect to happen? What happened instead? What would you like to see changed?
The row onClick function should get executed when Enter key is pressed

What browser are you working in?
Chrome Version 122.0.6261.128

What version of the Carbon Design System are you using?
carbon-components-angular@5.16.3
carbon-components@11.48.1

Steps to reproduce the issue

  1. Open data table component which has clickable row
  2. Using the tab key navigate to any of the row
  3. Hit Enter to execute the 'selectRow' function

Output: Function is not executed. Users need to click on the row using mouse to make it work

@Akshat55
Copy link
Contributor

Akshat55 commented Apr 8, 2024

When you say select a row, are you referring to selecting a checkbox? If yes, the key used for interacting with the checkbox is space.

@Sayan-Kyn-Personal
Copy link
Author

I am not referring to the checkbox but instead to the rowClick event as shown here 'https://github.com/carbon-design-system/carbon-components-angular/blob/master/src/table/stories/app-table.component.ts'.

The table in our case does not have a selection column.

@kumarivijeta
Copy link

I am also facing the same issue when table row click happen's via keyboard enter, Though we have keyboard.enter attribute for row selection in component . Kindle refer the screenshot and https://github.com/carbon-design-system/carbon-components-angular/blob/master/src/table/body/table-row.component.ts

image

TIA.

@tulasigudibanda
Copy link

tulasigudibanda commented Apr 10, 2024

This issue seems to be occurring in the latest version of Chrome, whereas it functions as expected in older versions.
It is observed when pressing the 'Enter' key during a keydown event on table rows.
Old chrome version : event.path exists which we depend on to get the row index (event.path[0].rowIndex)
New chrome version : event.path does not exist

It could be related to https://chromestatus.com/feature/5726124632965120

old chrome version :
old-version-with-event path

latest chrome version :
latest-chrome-deprecated-event path

@tulasigudibanda
Copy link

event.target.rowIndex can be used.
@Sayan-Kyn-Personal , you may close this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants