xterm.js
xterm.js copied to clipboard
Can't interact wih Scrollbar with screenReaderMode: true
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
- Create a terminal with enough content so a scrollbar appears (on mac I changed the os setting so a scrollbar always is shown)
- Click on the scrollbar element in the scollbar and move the mouse, it should scroll, but does not.
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;
}
The right here is to set the width
style on .xterm-accessibility
to match .xterm-screen
. Changing z-index/background-color will likely result in other regressions.
Any update on this issue @Tyriar ? I think it still exists with v5.0.0
No update. I think you could workaround this by manually positioning the viewport element's x axis, this is what we do in VS Code (mainly so the scrollbar is right aligned in the container correctly).