search

fonsp / Pluto.jl

🎈 Simple reactive notebooks for Julia
https://plutojl.org/
MIT License
4.96k stars 286 forks source link

Show help when stuck in tab index trap #2746

Closed fonsp closed 9 months ago

fonsp commented 9 months ago

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.

https://github.com/fonsp/Pluto.jl/assets/6933510/7906642e-ebd8-4aed-a972-4ffca248b31a

github-actions[bot] commented 9 months ago

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 commented 9 months ago

cc @lukavdplas

lukavdplas commented 9 months ago

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

lukavdplas commented 9 months ago

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.