Xterm.js: Can't interact wih Scrollbar with screenReaderMode: true

[flenter]

When the terminal is in screenReaderMode, it's no longer possible to scroll by clicking on the scrollbar.

Details

• Browser and browser version: Firefox 74.0 as well as Chrome 80.0.3987.132
• OS version: MacOS 10.14.6
• xterm.js version: 3.0.14 as well as 4.4.0

Steps to reproduce

1. Create a terminal with enough content so a scrollbar appears (on mac I changed the os setting so a scrollbar always is shown)
2. Click on the scrollbar element in the scollbar and move the mouse, it should scroll, but does not.

[flenter]

The problem is caused by the .xterm-accessibility element, which has a z-index of 10 (in release 4.4.0, see: https://github.com/xtermjs/xterm.js/blob/4.4.0/css/xterm.css#L153)

In my project's stylesheet i've added a z-index to.xterm-viewport as well as added a line that forces the background-color to be transparent (because an inline style is set on that item).

The ugly hack looks like this:

.xterm-viewport {
  z-index: 11;
  /* Don't use the background color set by xterm */
  background-color: transparent !important;
}