Styled input checkbox focus state is not visible on Ubuntu/Firefox

[krassowski]

Description

For checkboxes with jp-mod-styled class the focus state is not visible. This might be Operating System specific.

Reproduce

1. Open search box in a notebook
2. Open filters
3. Tab to a checkbox
4. See no focus indication

On Ubuntu/Firefox

The one on right is focused.

The styles are defined here:

jupyterlab/packages/ui-components/style/styling.css

Lines 45 to 48 in 89154f5

	input.jp-mod-styled:focus {
	border: var(--jp-border-width) solid var(--md-blue-500);
	box-shadow: inset 0 0 4px var(--md-blue-300);
	}

but it has no effect on styles for me in Firefox on Ubuntu.

Manually adding outline: 3px solid red; to input.jp-mod-styled:focus shows an indication properly:

Of note, the styles are effective on Ubuntu/Chromium but the indicator is rather faint:

Expected behavior

Some kind of indicator is visible for checkboxes across browsers

Context

• Operating System and version: Ubuntu
• Browser and version: Firefox Nightly 108
• JupyterLab version: 4.0.0b1

[JasonWeill]

Also happens on Firefox ESR 102.9 on macOS with 4.0.0b1.

[krassowski]

I just noticed that focus is visible on checkboxes within dialogs:

This is thanks to:

jupyterlab/packages/apputils/style/dialog.css

Lines 125 to 128 in b251211

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

I think that we should harmonise the styles so that it applies to all checkboxes with .jp-mod-styled (using input[type="checkbox"].jp-mod-styled:focus-visible selector).

Labelling as a good first issue, if someone wants to work on this please submit a (draft) pull request.

[alden-ilao]

Hello! This is my first time taking a swing at open source contributions and would love some feedback if possible!

[fcollonval]

Thanks @alden-ilao for working on this. @krassowski (thanks for the review), did #15612 fix this fully?

[krassowski]

Yes, thanks for catching this!