Fixes focus indicator on input checkbox for Firefox (#15612)

* 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>
jupyterlab · Jan 17, 2024 · aee0bac · aee0bac
1 parent 0922e74
commit aee0bac
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/apputils/style/dialog.css b/packages/apputils/style/dialog.css
@@ -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;
-}
-
 .jp-Dialog-spacer {
   flex: 1 1 auto;
 }

diff --git a/packages/ui-components/style/styling.css b/packages/ui-components/style/styling.css
@@ -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;