search

fonsp / Pluto.jl

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

Use <dialog> for the export menu for better keyboard accessibility #2750

Closed fonsp closed 7 months ago

fonsp commented 7 months ago

The export menu used to be an <aside>, using inert and styling when the menu is toggled. This PR changes it to <dialog> with open (not modal), which is better semantics that will also make sure that the correct tabbing behaviour is achieved. The menu is also closed when focus is lost.

This matches the expected behaviour, like in https://webaim.org/resources/htmlcheatsheet/ or https://webaim.org/techniques/keyboard/

In the video below, I use the Tab, Enter and Escape keys:

https://github.com/fonsp/Pluto.jl/assets/6933510/8627ac01-771c-4475-8299-39b64f5662c2

github-actions[bot] commented 7 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="export-menu-dialog-semantics")
  julia> using Pluto