jupyterlab
Show outline on the full item in file browser, only when needed
References
Fixes https://github.com/jupyterlab/jupyterlab/issues/14678, supersedes #15802
Code changes
Use :focus-within and :focus-visible to target the intended state which minimizes user confusion.
User-facing changes
Selection with mouse, keyboard and editing file name:
Dis-continuous multi-selection with keyboard:
Backwards-incompatible changes
None
![jupyterlab-probot[bot] avatar](https://avatars.githubusercontent.com/u/22800682?v=4 "Published by a pub.dev verified publisher"){kind=small}
@krassowski I tried to use the binder link but it's broken...chat me sometime if you're free and would like to test.
It gave me some kind of invalid token error I believe
@ericsnekbytes you just need to refresh the tab/open it again. Invalid token is when you open the build by navigation from browser after the token has expired.
Usually by the time the image gets built (and I have time to get back to it) the token expires so it just needs refreshing the tab/opening again.
I checked with Firefox ESR 115.7.0, and the outline doesn't show up:
In Chrome 121.0.6167.184, the outline does appear:
Firefox ESR 115.7.0
Yes, :has support was enabled in Firefox 121 (current version is 123).
I'm also not seeing the outline with Safari (macOS) Version 17.3 (18617.2.4.11.11, 18617), which, per caniuse.com, should support :has.
I can reproduce that on Safari 17.3 it does not work after clicking and then navigating, but it does work on edges and when tabbing into the file browser from outside (and then navigating). It looks like the Safari Bug 234077: [selectors] :focus-visible not matching on accessKey focus after focusing something via mouse but it is said to have been fixed in 2022. It might be a slightly different variant of that bug in Safari.
| What does not work | What works |
|---|---|
This might be the issue @gabalafou was speaking of. What do we think about adding a custom class like .jp-mod-last-focused-by-keyboard and using it together with standard :focus instead of :focus-visible to have more consistent user experience across browsers? The alternative is acknowledging that even in Safari it works for all-keyboard workflow so it is still accessible where needed most.
I feel like this still represents an improvement for usability and accessibility, and if we're using standards-compliant design, the fault isn't with JupyterLab if a browser doesn't comply.