Unclear focus indication

[lukavdplas]

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.from.11-12-23.16.50.50.webm

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 #2746 doesn't seem to have the same issue.

[fonsp]

Yayy thanks for looking at this!

I also noticed some of these and they got fixed in #2745 so take another look when you have time

[lukavdplas]

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]

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 :(