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

cc-kv-terminal: reconsider the live region usage with the virtualizer #1296

Open
florian-sanders-cc opened this issue Jan 13, 2025 · 0 comments
Labels
a11y Related to accessibility
Milestone

Comments

@florian-sanders-cc
Copy link
Contributor

Context

With #1292, we have added a virtualizer to handle the terminal output.
This is essential because some commands are very verbose (for instance running command) and we don't want the browser to crash because there are too many DOM elements.

We want screen reader users to get the output of the command they run without having to move the focus between the prompt and output so we rely on a live region to do so (aria-live="true" + aria-atomic="true" set on the virtualizer itself).

Unfortunately, with the virtualizer screen reader users may face unexpected & disturbing behaviors:

  • if you scroll to the top of a long output history, the virtualizer may remove some nodes and trigger the live region (unlikely but could happen),
  • after that, if you scroll back to the bottom to reach the prompt for instance, then the virtualizer will add the nodes to the DOM so you can reach them and this will trigger the live region.

Ideally, the live region should only be triggered when we output the command result and that's it.

Potential solutions

  • short term: remove the live region from the virtualizer and create a visually hidden area that would contain the live region. When we receive command output, we inject the raw text in the live region area.
  • long term: reconsider and test the content-visibility solution because we don't need as much perf as we do for the logs component here and content-visibility offers a way better experience when it comes to a11y (DOM elements are present, they are just not "rendered" so you can set the live region on the output history area directly).
@florian-sanders-cc florian-sanders-cc added the a11y Related to accessibility label Jan 13, 2025
@florian-sanders-cc florian-sanders-cc added this to the kv-explorer milestone Jan 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Related to accessibility
Projects
None yet
Development

No branches or pull requests

1 participant