-
Notifications
You must be signed in to change notification settings - Fork 529
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.
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
ActionList v1 and v2: Use icon instead of input for multiple selection #1601
Conversation
🦋 Changeset detectedLatest commit: 8319437 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
The solution is so interesting! I've never heard of someone using an svg instead of a checkbox for a11y reasons. Why not use the solution proposed in https://github.com/github/primer/issues/228 where they recommended to make the role |
credit to @langermank for introducing it in primer/css
We are? 😅 The example mentioned in the issue uses an image with role="presentation": <li role="menuitemcheckbox" aria-checked="true">
<img src="checked.gif" role="presentation" alt="">
Sort by Last Modified
</li> From what I understand, having an interactive element inside a selectable listbox option or menuitem isn't valid. See violations on story |
Exactly. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, and it doesn't break the multiselect behavior in Autocomplete 🙌
Part of https://github.com/github/primer/issues/447
Fixes half of https://github.com/github/primer/issues/228
Nested interactive controls are not announced by screen readers, the accessibility advice here is not use interactive elements for presentation.
input type="checkbox"
with svg from primer/cssFuture - The svg used here has a short life and will get replaced with the Checklist component when it's ready
Screenshots
look pretty ActionList:
![image](https://user-images.githubusercontent.com/1863771/141126300-053801e7-3d5e-4ac8-aa6e-055434261a65.png)
also shared in AutoComplete:
Accessibility violations:
Before:
After:
Please provide before/after screenshots for any visual changes
Merge checklist