Console ESC prompt can be annoying #16139

pmusa · 2018-01-18T20:52:39Z

I have been using console version that has the ESC key prompt for the last days and it is very annoying. I understand it provides keyboard-accessibility, but it would be nice to have an option to disable it if not needed. Moreover, the current implementation prompts if you press the ESC key to escape auto-complete which makes it even worse. Maybe we can use this issue to discuss other possibilities that guarantee keyboard-accessibility without annoying other users.

mikeprince3 · 2018-01-30T19:05:53Z

@pmusa if you referring to how the screen will white-out and display the "Press Enter to start editing. When you're done, press Escape to stop editing" message, then I completely agree. It appears that I formed a habit (prior to Kibana) where I use ESC to dismiss any unwanted auto-complete prompts. I get that I can just keep typing and ignore it, in the case of Kibana, but my pre-existing condition leads to me see the white-out message almost constantly. It's a bit maddening for me.

rseniuta · 2018-02-01T06:24:25Z

The docs say that ESC "Close auto-complete menu." but it does not, it frozes screen and display prompt first.

fmad · 2018-02-01T12:59:55Z

I would give this 1000 votes if I could! It's so annoying when I try to cancel some auto-complete! Please revert this back to how it was before! Luckily, I've only been using this new version in training, but we'll be upgrading to 6.x soon, so it will become a BIG nuisance!

cjcenizal · 2018-02-03T00:08:50Z

Sorry to everyone who's been frustrated by this! This should be fixed in the next patch release across the board.

hackery · 2019-08-13T08:49:14Z

It still does it in 7.x.

cjcenizal · 2019-08-14T00:31:16Z

@hackery Which specific version are you using and can you describe the precise behavior you're seeing?

Here is what I see on master, which is the behavior I expect. Hitting ESC once will dismiss the autocomplete menu, and then if you hit ESC a second time focus is exited from the editor.

pmusa · 2019-08-14T07:33:08Z

It has been working fine for me as well.

hackery · 2019-08-15T10:32:49Z

You're right, I can't reproduce this today. Perhaps I was getting some key bounce on ESC.
I'll take my zombie thread bronze star and get my coat ...

hackery · 2019-08-15T17:20:02Z

I take it back, I'm not seeing things: in our QA environment I see the behaviour you're expecting, and in Production I see the focus loss on a single escape when the autocompletion menu is up. Both are running the same 7.1.1 release.

cjcenizal · 2019-08-15T19:25:29Z

@hackery Because other people can produce the correct behavior and because you can produce the correct behavior on one environment but not another, I suspect there may be some factor in your production environment (or perhaps something machine- or browser-specific when you visit your production environment) that's causing this unexpected behavior.

Could you try asking a coworker to reproduce the bug on another machine? Could you try reproducing the bug on in incognito mode and on different browsers? Thanks!

hackery · 2019-08-16T16:27:32Z

OK - today I've seen it on our QA env as well - in the same browser session/tab that I had open yesterday and didn't see it. I see correct behaviour in both environments if I open an incognito window, or even a new regular browser tab in the same window. Exiting browser and restarting (with tabs automatically restored) it works as well.

If I switch features within the Kibana plugin (Discover, Visualize, Dashboard etc) and back, the behaviour remains. If I switch to a feature from a different plugin (e.g. Monitoring) it reverts to correct behaviour. I'm presuming there's some specific user activity over time within devtools which triggers this state. I often leave a tab open for days, switching between features as needed; at the moment I'm trying to trace down a performance problem and have several tabs open on different features to speed navigation, so perhaps my devtools tab has been open longer than typical without switching plugins.

So, it might still be browser-specific. Our prod environment is quite restrictive and only has Chrome, so I can't easily make comparisons there, but on my dev machine I have Chrome 76.0, FF and Vivaldi I can try. In the meantime, I'll try and watch for what I might be doing before the bug appears.

cjcenizal · 2019-08-16T20:16:29Z

Wow, this is some great info. Very strange indeed. Have you tried clearing your cache? I wonder if there's some weird caching problem happening.

In the meantime, I'll try and watch for what I might be doing before the bug appears.

Any info you can dig up here would go a long way towards helping us reproduce this. Thanks again for reporting this bug and looking so deeply into it!

hackery · 2019-08-21T13:35:48Z

Well, I could do a cache clear, but that would only take effect on a page reload, which by itself gets back to the proper behaviour anyway.

Possible clue: I noticed this while Chrome DevTools was up:
mapping size is larger than 10MB (35.470909118652344 MB). ignoring..
which looks like it's in this handler for retrieval of autocompletion names from ES. I don't see any obviously problematic code path there but I'm not too familiar with this code - but it seems to be in an applicable bit of functionality.

mikeprince3 · 2019-08-23T14:38:23Z

Maybe we can use this issue to discuss other possibilities that guarantee keyboard-accessibility without annoying other users.

This is one part from the original post that seems to have been dropped from the conversation. It would be amazing if the "Press Enter to start editing. When you’re done, press Escape to stop editing." prompt could be disabled in the settings. It wasn't clear until I read this post why it even existed.

cjcenizal · 2019-08-26T16:03:31Z

@mikeprince3 You're right, thank you for bringing that up again. I'm going to reopen this so we can look into ways to resolving this. For example, in this Monaco issue they suggest using an unobtrusive tooltip.

elasticmachine · 2019-08-26T16:03:49Z

Pinging @elastic/es-ui

Ahnfelt · 2023-01-10T14:39:09Z

It still happens in 8.5.0 for me (Firefox 108.0.1 on macOS).

I can reproduce this without entering a single character, but just using the arrow keys to move to some point where the suggestions show up*.

When I press escape at that point, the editor locks and displays the "Press Enter to start editing.
When you’re done, press Escape to stop editing.".

Is this expected behavior? In other editors I've tried, auto completions don't come up when you just use the arrow keys - you normally need to type something. And for good reason - it takes over the arrow keys, so you can't move past it! And then you press escape, and the whole editor locks...

yuliacech · 2023-04-26T15:16:29Z

I've been trying to reproduce this issue and on version 8.7.0 the ESC overlay can't exited by pressing the ESC button again. That means the focus is trapped inside the editor area and it breaks the keyboard navigation around the Console. I'll be looking into fixing this first.
The other issue was pressing ESC to close the autocomplete suggestions: this one I was not able to reproduce. The expected behaviour is: when autocomplete suggestions are open, ESC will close the autocomplete suggestions. If autocomplete suggestions are not open, ESC will display the a11y overlay. I tested this on v8.7. with Firefox/macos and it works as expected for me. @Ahnfelt could you please try to reproduce this issue with an 8.7.0 deployment and if possible upload a screen recording and steps to reproduce?
And the last issue I want to look into is if there are alternative ways to allow accessible keyboard navigation out of the editor area.

fmad · 2023-04-28T16:57:53Z

Why is there even a need to disable the keyboard by pressing ESC? What is the use case for that? As all it takes, with or without bug, is to press ESC one too many times and then you're stuck typing in limbo until you look at the screen again and press enter - it doesn't happen to me often, but it is SO annoying when it does.

ccaspanello · 2023-05-04T04:40:03Z

I am seeing this issue on the 8.7.1 Docker Images:

docker network create elastic
docker pull docker.elastic.co/elasticsearch/elasticsearch:8.7.1
docker run --name elasticsearch --net elastic -p 9200:9200 -p 9300:9300 -e "discovery.type=single-node" -t docker.elastic.co/elasticsearch/elasticsearch:8.7.1

docker pull docker.elastic.co/kibana/kibana:8.7.1
docker -d run --name kibana --net elastic -p 5601:5601 docker.elastic.co/kibana/kibana:8.7.1

yuliacech · 2023-05-04T11:34:14Z

I looked more into this issue and the current behaviour is expected: When typing in the editor area, pressing the ESC button allows the user to navigate away by pressing TAB. This is important for accessibility because otherwise it's not possible to navigate away from the editor area by only using the keyboard.

hackery · 2023-05-04T11:48:35Z

That just begs the question, what's the use case for supporting TAB in the console editor? The auto-indent works just fine, and if you wreck the indenting yourself, space-space gives you a tab stop. Most (many?) web UI interfaces tab away from input fields (even multi-line), inserting a tab is usually the hard thing to do.

yuliacech · 2023-05-04T12:09:03Z

This behaviour is used in other editors in Kibana, so I'd prefer to keep it consistent.

mikeprince3 · 2023-05-04T14:49:34Z

@yuliacech I understand the value and neccessity of supporting accessbility requirements. However, can a switch be added to disable this feature in the editor (or for all editors given the understandable preference for consistency)? Perhaps on the ESC popup screen there could be a switch to disable the feature?

fmad · 2023-05-25T12:39:29Z

Just managed to repro this as sometimes it is a bit hit-and-miss = If I move away from the window and come back and click on something that then causes a popup, say GET or an index name or something similar, my immediate reaction is to press ESC, at which time this bug happens and I'm "stuck" to have to then press ENTER, which usually means abandoning the mouse to use that hand for that (I'm right-handed). At least, make it so that pressing ESC again would cancel that, so I could just ESCape out of that...

## Summary Fixes #16139 This PR adds a setting in Console that allows to disable the a11y overlay. The default will be set to `enabled` so that the default behaviour should not change. A user can disable the overlay in their browser and the setting is saved in local storage. So that other users are not affected by that change. The reason to allow disabling the overlay is that it can be flaky and sometimes it's displayed when not intended. The code relies on `querySelector` (see this [file](https://github.com/elastic/kibana/blob/1b3f23829c9a41d2995e279b37b04fc457befa6e/src/plugins/es_ui_shared/__packages_do_not_import__/ace/use_ui_ace_keyboard_mode.tsx#L25)) so I think that causes the flakiness and that is very difficult to test reliably. ### Screenshot #### A11y overlay (no changes) <img width="1483" alt="Screenshot 2023-06-01 at 16 34 23" src="https://github.com/elastic/kibana/assets/6585477/d776625c-92cd-4bd9-8e5e-2f672df351a4"> #### Settings modal with the new option to disable the a11y overlay <img width="474" alt="Screenshot 2023-06-01 at 16 29 02" src="https://github.com/elastic/kibana/assets/6585477/8745c7a0-62f4-41a9-9eff-ff8bebd4f767"> #### How to test 1. Start Kibana and navigate to the Console 2. Press ESC when textarea is focused and now autocomplete popup is displayed to see the a11y overlay 3. Open the Settings modal and disable the a11y overlay 4. Press ESC in the textarea again to see that no overlay is now displayed 5. Check that the value is persisted in the local storage Flaky test runner https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2346 ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios

mikeprince3 · 2023-06-05T14:09:30Z

I'm not sure what the ettiquette is around commenting on a closed ticket but thank you so much for adding this setting @yuliacech !

yuliacech · 2023-06-05T14:26:41Z

Thanks a lot everyone for commenting on this issue and providing repro steps! I was not able to reliably reproduce the issue and went with @mikeprince3's suggestion of adding a setting that disables the overlay. Thanks for the suggestion @mikeprince3

## Summary Fixes elastic#16139 This PR adds a setting in Console that allows to disable the a11y overlay. The default will be set to `enabled` so that the default behaviour should not change. A user can disable the overlay in their browser and the setting is saved in local storage. So that other users are not affected by that change. The reason to allow disabling the overlay is that it can be flaky and sometimes it's displayed when not intended. The code relies on `querySelector` (see this [file](https://github.com/elastic/kibana/blob/1b3f23829c9a41d2995e279b37b04fc457befa6e/src/plugins/es_ui_shared/__packages_do_not_import__/ace/use_ui_ace_keyboard_mode.tsx#L25)) so I think that causes the flakiness and that is very difficult to test reliably. ### Screenshot #### A11y overlay (no changes) <img width="1483" alt="Screenshot 2023-06-01 at 16 34 23" src="https://github.com/elastic/kibana/assets/6585477/d776625c-92cd-4bd9-8e5e-2f672df351a4"> #### Settings modal with the new option to disable the a11y overlay <img width="474" alt="Screenshot 2023-06-01 at 16 29 02" src="https://github.com/elastic/kibana/assets/6585477/8745c7a0-62f4-41a9-9eff-ff8bebd4f767"> #### How to test 1. Start Kibana and navigate to the Console 2. Press ESC when textarea is focused and now autocomplete popup is displayed to see the a11y overlay 3. Open the Settings modal and disable the a11y overlay 4. Press ESC in the textarea again to see that no overlay is now displayed 5. Check that the value is persisted in the local storage Flaky test runner https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2346 ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios

pmusa assigned cjcenizal Jan 18, 2018

nreese added the Feature:Dev Tools label Jan 18, 2018

cjcenizal mentioned this issue Feb 1, 2018

Don't exit EuiCodeEditor when the ESCAPE key is being used to dismiss the autocompletion menu. elastic/eui#363

Merged

cjcenizal closed this as completed in elastic/eui#363 Feb 2, 2018

cjcenizal mentioned this issue Feb 2, 2018

Fix bug where ESC was closing the Console autocompletion suggestions menu, but then also exiting edit mode #16500

Merged

cjcenizal reopened this Aug 26, 2019

cjcenizal added enhancement New value added to drive a business result Feature:Console Dev Tools Console Feature Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more labels Aug 26, 2019

cjcenizal removed their assignment Sep 7, 2022

yuliacech self-assigned this Apr 26, 2023

yuliacech mentioned this issue Jun 1, 2023

[Console] Add a setting to disable the a11y overlay #158844

Merged

2 tasks

yuliacech closed this as completed in #158844 Jun 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Console ESC prompt can be annoying #16139

Console ESC prompt can be annoying #16139

pmusa commented Jan 18, 2018

mikeprince3 commented Jan 30, 2018

rseniuta commented Feb 1, 2018

fmad commented Feb 1, 2018

cjcenizal commented Feb 3, 2018 •

edited

Loading

hackery commented Aug 13, 2019

cjcenizal commented Aug 14, 2019

pmusa commented Aug 14, 2019

hackery commented Aug 15, 2019

hackery commented Aug 15, 2019

cjcenizal commented Aug 15, 2019

hackery commented Aug 16, 2019

cjcenizal commented Aug 16, 2019

hackery commented Aug 21, 2019

mikeprince3 commented Aug 23, 2019

cjcenizal commented Aug 26, 2019

elasticmachine commented Aug 26, 2019

Ahnfelt commented Jan 10, 2023

yuliacech commented Apr 26, 2023

fmad commented Apr 28, 2023

ccaspanello commented May 4, 2023

yuliacech commented May 4, 2023

hackery commented May 4, 2023 •

edited

Loading

yuliacech commented May 4, 2023

mikeprince3 commented May 4, 2023

fmad commented May 25, 2023

mikeprince3 commented Jun 5, 2023

yuliacech commented Jun 5, 2023

Console ESC prompt can be annoying #16139

Console ESC prompt can be annoying #16139

Comments

pmusa commented Jan 18, 2018

mikeprince3 commented Jan 30, 2018

rseniuta commented Feb 1, 2018

fmad commented Feb 1, 2018

cjcenizal commented Feb 3, 2018 • edited Loading

hackery commented Aug 13, 2019

cjcenizal commented Aug 14, 2019

pmusa commented Aug 14, 2019

hackery commented Aug 15, 2019

hackery commented Aug 15, 2019

cjcenizal commented Aug 15, 2019

hackery commented Aug 16, 2019

cjcenizal commented Aug 16, 2019

hackery commented Aug 21, 2019

mikeprince3 commented Aug 23, 2019

cjcenizal commented Aug 26, 2019

elasticmachine commented Aug 26, 2019

Ahnfelt commented Jan 10, 2023

yuliacech commented Apr 26, 2023

fmad commented Apr 28, 2023

ccaspanello commented May 4, 2023

yuliacech commented May 4, 2023

hackery commented May 4, 2023 • edited Loading

yuliacech commented May 4, 2023

mikeprince3 commented May 4, 2023

fmad commented May 25, 2023

mikeprince3 commented Jun 5, 2023

yuliacech commented Jun 5, 2023

cjcenizal commented Feb 3, 2018 •

edited

Loading

hackery commented May 4, 2023 •

edited

Loading