Show help when stuck in tab index trap

[fonsp]

We use tab for autocomplete, which is a usability issue: if you use TAB to navigate a website, a codemirror acts as a "focus trap": it is not possible to focus on the next item.

Codemirror 6 addresses this issue by disabling tab-to-indent by default, but we enabled it anyways because it is the expected behaviour of an IDE. In that case, CM6 lets users focus on the next item using Escape - Tab, but as https://codemirror.net/examples/tab/ suggests, this should be clearly documented.

(FYI this does not happen when viewing a static Pluto document, we disable the Tab key handler in this case.)

I think the best way to document this is to detect the scenario and show documentation on-screen. I tried to use fancy CM6 API to do it :)

The help message will show when: a cell is focused, but not using a click or arrow-movement-across-cells (not implemented in the video below), and the first key that is pressed is Tab.

In this video, I navigate through the page using Tab, and also using my mouse, and you can see when the message shows up or not.

Schermopname.2023-12-11.om.15.32.54.mov

[github-actions]

Try this Pull Request!

Open Julia and type:

julia> import Pkg
julia> Pkg.activate(temp=true)
julia> Pkg.add(url="https://github.com/fonsp/Pluto.jl", rev="tab-index-trap-help")
julia> using Pluto

[fonsp]

cc @lukavdplas

[lukavdplas]

Nice! I would also add this to the instructions alert when you press F1.

[lukavdplas]

By the way, something that would also help with clarity is if you add a button at the very top of the page to open the keyboard shortcuts menu. It can be moved out of view using absolute positioning, and moved in when it receives focus.

This is often done for skiplinks. For instance, https://www.belastingdienst.nl has several links like this. But I would say for a complex application, this would be an appropriate place to direct keyboard-only users to controls.

I'd be happy to add this if you want.