xterm.js icon indicating copy to clipboard operation
xterm.js copied to clipboard

Can't interact wih Scrollbar with screenReaderMode: true

Open flenter opened this issue 4 years ago • 2 comments

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 avatar Mar 13 '20 11:03 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;
}

flenter avatar Mar 13 '20 11:03 flenter

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.

Tyriar avatar Oct 18 '21 17:10 Tyriar

Any update on this issue @Tyriar ? I think it still exists with v5.0.0

samuel-olivier avatar Nov 14 '22 14:11 samuel-olivier

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).

Tyriar avatar Nov 30 '22 18:11 Tyriar