search

fonsp / Pluto.jl

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

Unclear focus indication #2747

Closed lukavdplas closed 9 months ago

lukavdplas commented 9 months ago

When tabbing through the page, it is often unclear where the focus actually is (c.f. https://www.w3.org/TR/WCAG21/#focus-visible). Here is a video of me tabbing through a notebook:

screencast of pluto notebook showing repeated tabbing, but without a clear focus ring on every step

notebook used in recording: https://gist.github.com/lukavdplas/febc2828d061eaeb12b886157e900e45

It's hard to show on video, but between each text cell, there are several TAB presses and elements being focused, but I can't see which ones.

I think the issue is that some buttons don't become visible when they receive focus.

I recorded this on Firefox 120.0 - that may be relevant since I noticed Fons' video in https://github.com/fonsp/Pluto.jl/pull/2746 doesn't seem to have the same issue.

fonsp commented 9 months ago

Yayy thanks for looking at this!

I also noticed some of these and they got fixed in https://github.com/fonsp/Pluto.jl/pull/2745 so take another look when you have time

lukavdplas commented 9 months ago

Yep, that fixes it! 😄

Personally, I would also prefer a clearer focus ring around the cell, but that's a style preference. It is possible to see the cell is focused.

fonsp commented 9 months ago

I wanted to do a clear focus ring around the codemirror editor by styling :focus-visible, which normally uses "magic heuristics" to only show up when the user tabbed into the element. But it looks like the browser always assigns the codemirror :focus-visible when it is in focus, also when clicked with my mouse. So I couldn't find an easy way to do a clear focus ring iff the code editor was tab-focused :(