Skip to content

Data views: Use aria-disabled on disabled checkboxes and add tooltips #59364

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

Merged
jameskoster merged 5 commits into from
Mar 4, 2024
Merged

Data views: Use aria-disabled on disabled checkboxes and add tooltips #59364

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1323150
Use aria-disabled and add tooltips
jameskoster Feb 26, 2024
5ed0c41
Do not allow aria-disabled checkboxes to be selected
jameskoster Feb 26, 2024
b2d59cd
Remove tooltip
jameskoster Feb 27, 2024
b749021
Noop onChange callback when disabled
Mamaduka Feb 27, 2024
652dcc9
Simplify
jameskoster Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions packages/dataviews/src/single-selection-checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,14 @@ export default function SingleSelectionCheckbox( {
<CheckboxControl
className="dataviews-view-table-selection-checkbox"
__nextHasNoMarginBottom
checked={ isSelected }
label={ selectionLabel }
disabled={ disabled }
aria-disabled={ disabled }
checked={ isSelected }
onChange={ () => {
if ( disabled ) {
return;
}
Copy link
Contributor

@youknowriad youknowriad Feb 27, 2024

Choose a reason for hiding this comment

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

Did we consider whether this behavior make sense for all usage of CheckboxControl and whether we should bake it in for any usage of the disabled prop? (Obviously not a blocker)

Copy link
Contributor Author

@jameskoster jameskoster Feb 27, 2024

Choose a reason for hiding this comment

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

Probably makes sense for aria-disabled (it's handled automatically when using disabled).

Copy link
Member

@Mamaduka Mamaduka Feb 27, 2024

Choose a reason for hiding this comment

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

When the checkbox is disabled, click or keyboard actions shouldn't trigger an actual change.

Copy link
Contributor Author

@jameskoster jameskoster Feb 27, 2024

Choose a reason for hiding this comment

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

Currently when a checkbox is aria-disabled, click and keyboard interactions will toggle the checkmark (visually at least). I don't think you'd ever want that, so it makes sense to add this to the component some how?

Copy link
Contributor

@youknowriad youknowriad Feb 27, 2024

Choose a reason for hiding this comment

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

My thinking was more: automatically use aria-disabled and prevent onChange when disabled is passed. Like we do when __experimentalIsFocusable is true in buttons.

Copy link
Member

@mirka mirka Feb 27, 2024

Choose a reason for hiding this comment

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

I added an issue for this at #59411. Ideally we would address it in the CheckboxControl component first, but if we don't have time I'm fine with cleaning up later.

As for the default focusability of a disabled component, I'm kind of leaning toward sticking to the standard browser behavior (which is to not be focusable). Of course we would also provide an opt-in prop to maintain focusability, as in Button.


if ( ! isSelected ) {
onSelectionChange(
data.filter( ( _item ) => {
Expand Down