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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eb077ec
Fixes not visible focus state on input checkbox for firefox
alden-ilao Jan 6, 2024
a0f661b
Merge branch 'main' into main
alden-ilao Jan 7, 2024
44cae3c
Update Playwright Snapshots
github-actions[bot] Jan 15, 2024
1d5a689
Use focus-visible
krassowski Jan 15, 2024
b25cb0a
Revert snapshot changes
krassowski Jan 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 0 additions & 5 deletions packages/apputils/style/dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,11 +121,6 @@ button.jp-Dialog-close-button {
padding-right: 5px;
}

.jp-Dialog-checkbox > input:focus-visible {
outline: 1px solid var(--jp-input-active-border-color);
outline-offset: 1px;
}

Comment on lines -124 to -128
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

.jp-Dialog-spacer {
flex: 1 1 auto;
}
Expand Down
5 changes: 5 additions & 0 deletions packages/ui-components/style/styling.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ input.jp-mod-styled:focus {
box-shadow: inset 0 0 4px var(--md-blue-300);
}

input[type='checkbox'].jp-mod-styled:focus-visible {
outline: var(--jp-border-width) solid var(--jp-input-active-border-color);
outline-offset: 1px;
}

.jp-select-wrapper {
display: flex;
position: relative;
Expand Down