fix: add indeterminate state to select-all checkbox in data views (SDK-890)#1948
Draft
aaronlee777 wants to merge 2 commits into
Draft
fix: add indeterminate state to select-all checkbox in data views (SDK-890)#1948aaronlee777 wants to merge 2 commits into
aaronlee777 wants to merge 2 commits into
Conversation
…views When only some rows are selected, the select-all checkbox in DataTable and DataCards now renders a dash icon and sets the native indeterminate property for screen reader support. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
… DataCards Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
serikjensen
requested changes
May 27, 2026
Member
There was a problem hiding this comment.
I think we need to have a chat on this one. For accessibility i think we will need to set aria-checked to mixed https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-checked#mixed
but this is also going to have implications for how we navigate the value/onChange ecosystem since we don't want a situation where you can set the checkbox value to true/false and also indeterminate at the same time
Could you find some time to go over this together? would also be good to include @jeffredodd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
DataTableandDataCardsnow shows a dash icon and enters the native indeterminate state when some (but not all) rows are selectedChanges
isIndeterminateprop toCheckbox— setsinput.indeterminatevia a ref (required since indeterminate is a DOM property, not an HTML attribute) and renders the dash icon from the existingcheckbox_indeterminate.svgassetuseSelectionStateto compute and returnisIndeterminatealongsideallSelectedDataTableandDataCardsboth consume the new value and pass it to their select-all checkboxRelated
Testing
Checkbox, and the partial-selection state on the header checkbox in bothDataTableandDataCardsnpm run test -- --run src/components/Common/UI/Checkbox src/components/Common/DataView/DataTable src/components/Common/DataView/DataCardsDataViewSelectableWithPaginationstory — select a subset of rows to verify the dash icon appears in the header checkbox