question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Terminal output div container should be more accessible for screen readers

See original GitHub issue

CC @isidorn

System Info

  • Version: 1.46.0-insider (system setup)
  • Commit: cd41dd1f6065db76c77c6e2f659bb50e6f558dec
  • Date: 2020-05-29T05:51:32.662Z
  • Electron: 7.3.0
  • Chrome: 78.0.3904.130
  • Node.js: 12.8.1
  • V8: 7.8.279.23-electron.0
  • OS: Windows_NT x64 10.0.18363

Steps to Reproduce:

  1. With either NVDA or JAWS loaded, type any commands in terminal (Ctrl+`) input area.
  2. Press Shift+Tab two times from the terminal input to focus in terminal output list view.
  3. The terminal output list is reachable via tab key thanks to tabindex = "0" attribute; however, screen readers (both NVDA and JAWS) do not read anything with arrow keys unless users manually switch on browse mode.
  4. The additional problem can be found with very long terminal outputs that require scroll behavior. Screen reader users have to switch back to forms mode to arrow up/down to scroll through the output history (while not being read any current line) and again, turn back to browse mode to check the results.
  • Does this issue occur when all extensions are disabled?: Yes

Suggested Solutions

Currently, the terminal output <div> container denoted with class = "xterm-accessibility-tree" has role = "list".

As a blind developer myself, I am requesting the following for accessibility improvements for screen readers.

  1. Please change the value of role attribute from "list" to "document" so that screen reader users can navigate the terminal output via arrow keys using browse mode.
  2. Please adjust the tabindex value of this terminal output container in the way that screen reader users can quickly Shift+Tab from terminal input area. In other words, pressing tab key from terminal output area should go to terminal input area; pressing Shift+Tab key from terminal input goes to terminal output area denoted with role = "document" div.
  3. Ideally, it would be great if the terminal output can be also included in the F6-keycycle.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:74 (40 by maintainers)

github_iconTop GitHub Comments

2reactions
Tyriarcommented, Jul 29, 2020

@jooyoungseo fixed 🙂

1reaction
meganroggecommented, Feb 22, 2022

Okay we will revert that change

Read more comments on GitHub >

github_iconTop Results From Across the Web

Accessible way of notifying a screen reader about loading the ...
The most important things I've learned about ARIA live regions is that aria-live element must exist in the DOM on page load instead...
Read more >
Force Screen Reader to Read Label Upon Entering Div
I want a label to be read by screen readers upon entry of the div via tabbing, but the div itself is (and...
Read more >
Make it Accessible: Better Layout with HTML - This Dot Labs
In this article, I'm going to teach you how to use the HTML tags <div> , <section> and <article> , and how they...
Read more >
A Responsive Accessible Table - Adrian Roselli
... </table> </div> <p> Note that this is an <em>accessible</em> (keyboard and screen reader) responsive (width and print) table. You can <a ...
Read more >
HTML: A good basis for accessibility - Learn web development
You should now be well-versed in writing accessible HTML for most ... One of the best accessibility aids a screen reader user can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found