fix(data-tables): accessibility for row enter

[antoniopacheco]

rows should be focusable, and should handle enter

fix #21028

Breaking change

Proposed change

Type of change

• [ ] Dependency upgrade
• [x] Bugfix (non-breaking change which fixes an issue)
• [ ] New feature (thank you!)
• [ ] Breaking change (fix/feature causing existing functionality to break)
• [ ] Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #21028
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• [x ] The code change is tested and works locally.
• [x ] There is no commented out code in this PR.
• [x ] Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• [ ] Documentation added/updated for www.home-assistant.io

Summary by CodeRabbit

• New Features
  • Added keyboard support for row selection in the data table, enhancing accessibility and allowing users to select rows using the "Enter" key in addition to mouse clicks.

[home-assistant[bot]]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks :+1:

Learn more about our pull request process.

[coderabbitai[bot]]

Walkthrough

The recent updates to the HaDataTable component introduce keyboard event handling, allowing row selection through the keyboard. This enhancement elevates accessibility by enabling users to navigate and interact with the data table using keyboard inputs, thereby improving the user experience for those reliant on keyboard navigation.

Changes

File Path	Change Summary
src/components/data-table/ha-data-table.ts	Added a private method _handleRowKeyDown to handle keyboard events, an event listener for keydown events, and tabindex="0" for focusability.

Assessment against linked issues

Objective	Addressed	Explanation
Enable opening/editing an existing automation using the enter key when the entry is focused (#21028)	✅

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[karwosts]

I had considered revisiting this issue after resolving #21048, by proposing to add the click action (e.g. Edit Automation) to the overflow menu as well as having it triggered on click on the row.

In that case it would not introduce extra tabstops to navigate through the table. And this will add tabstops even on non-interactive tables.

But I'm not an accessibility expert, so I'll defer to whatever reviewers think is the better approach. I'm not sure which would be the more intuitive solution, especially in the case of blindness / using the screen reader.

[antoniopacheco]

I had considered revisiting this issue after resolving #21048, by proposing to add the click action (e.g. Edit Automation) to the overflow menu as well as having it triggered on click on the row.

In that case it would not introduce extra tabstops to navigate through the table. And this will add tabstops even on non-interactive tables.

But I'm not an accessibility expert, so I'll defer to whatever reviewers think is the better approach. I'm not sure which would be the more intuitive solution, especially in the case of blindness / using the screen reader.

@karwosts , yeah I tough about adding an option in that menu might have been a good idea, however, we would have to do the same for every table, since is not only on automations. we should have a way to have the same action as clicking in the row.

[piitaya]

According to aria practices, Up and Down key must be used to navigate between items. And then, Tab key can be used to focus additional buttons (overflow menu, switch, etc...).

[antoniopacheco]

@steverep , currently navigation on data tables is not great, since tabbing will go to every single tab-able option in the data table (a lot in automations data table) this approach adds an extra one for the row itself.

Agree, we should improve the keyboard navigation itself. Tabbing shouldn't go to every row and every row tab-able action.

here is an example of rows being focusable https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/examples/treegrid-1/

one idea is to make the full table focusable first, another tab will go out to other element outside of the table. an arrow key down, will navigate trough the rows (focusing them), inside of each row, the use of tab should focus elements within the row. (maybe focus trap) to navigate to other row you need to use arrow keys

and yeah, all of that seems like a big change. and will probably be better to have a final requirement :)

[github-actions[bot]]

There hasn't been any activity on this pull request recently. This pull request has been automatically marked as stale because of that and will be closed if no further activity occurs within 7 days. Thank you for your contributions.