monaco-editor icon indicating copy to clipboard operation
monaco-editor copied to clipboard

[Bug] Find UI breaks tab focus with readOnly editors

Open pimterry opened this issue 3 years ago • 2 comments

Reproducible in vscode.dev or in VS Code Desktop?

  • [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

Monaco Editor Playground Code

monaco.editor.create(document.getElementById('container'), {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: 'javascript',
	readOnly: true // <-- Default demo, plus readonly
});

Actual Behavior

  • Create an editor from the above playground
  • Click in the editor
  • Press tab
  • Observe that you have tabbed out of the editor content to the next element on the page. On the default playground page, that probably means you've tabbed out of the page onto browser UI (note that this only works because of readOnly - in a normal editable editor you would have just inserted a tab)
  • Go back to the editor, press Control-F to open the Find UI
  • Click the content, press tab again
  • You now tab out from the editor content through the controls of the Find control input, before tabbing out of the editor (this is fine)
  • Close the Find control input
  • Click the editor content, press tab again
  • You now still have to tab through a series of invisible Find UI elements before you can escape the editor and continue on the normal page tab order

Expected Behavior

When the 'Find' UI is not shown, it should not be possible to tab there. Pressing tab in a readOnly editor with no overlays/find/etc shown should always leave the editor.

This creates a very poor keyboard accessibility in my application, and I think must do so for 100% of applications that use readOnly Monaco editors.

Not reproducibly in VS Code only because AFAICT there are no readOnly editors there. If there are somewhere, it will presumably break in those too.

Additional Context

No response

pimterry avatar Jun 23 '22 13:06 pimterry

Not reproducibly in VS Code only because AFAICT there are no readOnly editors there.

There are, for example when you trigger the command "Open default keyboard shortcuts"

hediet avatar Jul 19 '22 14:07 hediet