Copy&paste with screenReaderMode

[marusak]

When screenReaderMode is used it is not possible to use right-click and select copy or paste from context menu.

Details

• Browser and browser version: Firefox 64
• OS version: Fedora 29
• xterm.js version: 3.10.1

Steps to reproduce

1. var term = new Term({ screenReaderMode: true });

2. Then right-click on the terminal and there is no option for pasting.

Almost related question: This property can be set only in constructor, right? It is not possible to dynamically change between modes?

[Tyriar]

You should be able to switch between modes at runtime:

https://github.com/xtermjs/xterm.js/blob/8ea254bdc798ffcf72cb1b37385af40c747d3fa4/src/Terminal.ts#L489-L499

[flenter]

I experimented a bit with adding pointer-events: none; to the .xterm-accessibility element. This seems to restore the copy/paste functionality while maintaining the screenreader functionality (this last thing was tested with voiceover on mac in conbimation with Chrome). Would there be a disadvantage to this approach?

[Tyriar]

@flenter as long as screen readers work fine and hover to announce works as well then that sounds good.

[shanytc]

the main issue for right click -> Save Image.. context-menu in xtermjs, is because '.xterm-helpers' is having position:absolute. Try change it to position: relative. When you right click on the canvas, xtermjs will calculate the x,y position of the mouse and move the to that position under the <div class="xterm-helpers"> element so that it will then capture the right click (copy & paste) context menu and also include keyboard support. So basically sometimes the "xterm-helpers" is not positioned under the actual canvas and so you get "Save image..." context menu because that's the canvas's context menu and not the <textarea/> element's context menu.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jonchurch"><img src="https://avatars.githubusercontent.com/u/12915163?v=4" />jonchurch</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Related #1003 ?</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>