Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes focus indicator on input checkbox for Firefox #15612

Merged
merged 5 commits into from
Jan 17, 2024
Merged

Fixes focus indicator on input checkbox for Firefox #15612

merged 5 commits into from
Jan 17, 2024
+5 −5

Conversation

alden-ilao
Copy link
Contributor

@alden-ilao alden-ilao commented Jan 6, 2024 •
edited
Loading

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):
image
Before (Chrome):
image
After (Firefox):
image
After (Chrome):
image

Backwards-incompatible changes

@alden-ilao
Fixes not visible focus state on input checkbox for firefox

Verified

This commit was signed with the committer’s verified signature.
dimkl Dimitris Klouvas
GPG key ID: 0931F5B7A6BC310B
Verified
Learn about vigilant mode
eb077ec
@jupyterlab-probot jupyterlab-probot
Copy link

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

@welcome Welcome
Copy link

welcome bot commented Jan 6, 2024

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.
welcome
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! 🎉

@github-actions github-actions bot added pkg:apputils pkg:ui-components tag:CSS For general CSS related issues and pecadilloes Design System CSS labels Jan 6, 2024
@alden-ilao alden-ilao changed the title Fixes not visible focus state on input checkbox for firefox (#14354) Fixes not visible focus state on input checkbox for firefox Jan 6, 2024
@krassowski krassowski added the bug label Jan 6, 2024
@krassowski krassowski added this to the 4.0.x milestone Jan 6, 2024
@krassowski
Copy link
Member

krassowski commented Jan 6, 2024 •
edited
Loading

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:

image

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
Copy link
Contributor Author

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

@alden-ilao
Merge branch 'main' into main

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
a0f661b
alden-ilao
alden-ilao commented Jan 8, 2024
View reviewed changes
packages/apputils/style/dialog.css
Comment on lines -124 to -128
.jp-Dialog-checkbox > input:focus-visible {
outline: 1px solid var(--jp-input-active-border-color);
outline-offset: 1px;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

image

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.
image

@JasonWeill JasonWeill requested a review from krassowski January 8, 2024 18:25
@krassowski krassowski mentioned this pull request Jan 12, 2024
Closed
@krassowski
Copy link
Member

krassowski commented Jan 15, 2024 •
edited
Loading

bot please update galata snapshots (again?)

@github-actions GitHub Actions
Copy link
Contributor

Galata snapshots updated.

@krassowski
Revert snapshot changes

Verified

This commit was signed with the committer’s verified signature.
dimkl Dimitris Klouvas
GPG key ID: 0931F5B7A6BC310B
Verified
Learn about vigilant mode
Loading
Loading status checks…
b25cb0a
@krassowski krassowski changed the title Fixes not visible focus state on input checkbox for firefox Fixes focus indicator on input checkbox for Firefox Jan 17, 2024
krassowski
krassowski approved these changes Jan 17, 2024
View reviewed changes
Copy link
Member

@krassowski krassowski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@krassowski krassowski marked this pull request as ready for review January 17, 2024 20:27
@krassowski krassowski merged commit aee0bac into jupyterlab:main Jan 17, 2024
@welcome Welcome
Copy link

welcome bot commented Jan 17, 2024

Congrats on your first merged pull request in this project! 🎉
congrats
Thank you for contributing, we are very proud of you! ❤️

@krassowski
Copy link
Member

@meeseeksdev please backport to 4.0.x

meeseeksmachine pushed a commit to meeseeksmachine/jupyterlab that referenced this pull request Jan 17, 2024
@alden-ilao @meeseeksmachine
Backport PR jupyterlab#15612: Fixes focus indicator on input checkbox…

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
a5eb743 
… for Firefox
@meeseeksmachine meeseeksmachine mentioned this pull request Jan 17, 2024
Merged
@fcollonval fcollonval mentioned this pull request Jan 18, 2024
Closed
krassowski pushed a commit that referenced this pull request Jan 18, 2024
@meeseeksmachine @alden-ilao
Backport PR #15612: Fixes focus indicator on input checkbox for Firef…
0708330 
…ox (#15653)

Co-authored-by: Alden Ilao <113391940+alden-ilao@users.noreply.github.com>
@alden-ilao
Copy link
Contributor Author

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

ImpSy pushed a commit to spotinst/jupyterlab that referenced this pull request Jan 7, 2025
@alden-ilao @github-actions
@krassowski @ImpSy
Fixes focus indicator on input checkbox for Firefox (jupyterlab#15612)

Verified

This commit was signed with the committer’s verified signature.
dimkl Dimitris Klouvas
GPG key ID: 0931F5B7A6BC310B
Verified
Learn about vigilant mode
95c51fd 
* Fixes not visible focus state on input checkbox for firefox

* Update Playwright Snapshots

* Use focus-visible

* Revert snapshot changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 18, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@krassowski krassowski

Assignees

@alden-ilao alden-ilao

Labels
bug Design System CSS pkg:apputils pkg:ui-components tag:CSS For general CSS related issues and pecadilloes
Projects
None yet
Milestone
4.0.x
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@alden-ilao @krassowski