Fixes focus indicator on input checkbox for Firefox

[alden-ilao]

References

#14354

Code changes

• updated packages/apputils/style/dialog.css:124
• packages/ui-components/style/styling.css:49

• outline displayed on focus for checkboxes now visible on all platforms
• styling for checkbox:focus now sourced by single file instead of two (packages/ui-components/style/styling.css)

User-facing changes

The user will now see outlines when hovering checkboxes on all platforms
Before (Firefox):

Before (Chrome):

After (Firefox):

After (Chrome):

Backwards-incompatible changes

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[welcome]

Thanks for submitting your first pull request! You are awesome! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please make sure you followed the pull request template, as this will help us review your contribution more quickly.

You can meet the other Jovyans by joining our Discourse forum. There is also a intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[krassowski]

Thank you! Can you confirm that it still works in the dialog; for example you can try clicking on the kernel name to show change kernel dialog, this is how it looks before:

Based on the CI results it looks this will be reflected in the snapshots, let's get them updated:

bot please update galata snapshots (again)

[alden-ilao]

Thanks for the quick reply! I've been meaning to ask where you are able to get the checkboxes in the dialogs

here's what i got:

[alden-ilao]

(Specifically for checkboxes in dialogs)
for context, this styling is applied by packages/apputils/src/dialog.tsx by using the label class as its initial selector.

But further down the execution create footer calls Styling.style(footer.node); which adds jp-mod-styled to the checkbox element. Deleting this styling inpackages/apputils/style/dialog.css reduces code duplication.

[krassowski]

bot please update galata snapshots (again?)

[github-actions]

Galata snapshots updated.

[krassowski]

Thank you @alden-ilao, this looks good to me.

Sorry for back-and-forth with updating the snapshots - when preserving :focus-visible approach updates to snapshots were not needed.

[welcome]

Congrats on your first merged pull request in this project! 🎉

Thank you for contributing, we are very proud of you! ❤️

[krassowski]

@meeseeksdev please backport to 4.0.x

[alden-ilao]

@krassowski Apologies for the late reply, I did not have access computer the past couple days, thank you for reviewing and making the changes!