ActionList v1 and v2: Use icon instead of input for multiple selection

[siddharthkp]

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.

• Replace readonly input type="checkbox" with svg from primer/css
• Bonus: checkmark consistency across browsers :)

Future - The svg used here has a short life and will get replaced with the Checklist component when it's ready

Screenshots

look pretty ActionList:

also shared in AutoComplete:

 

Accessibility violations:

Before:

After:

Please provide before/after screenshots for any visual changes

Merge checklist

• NA Added/updated tests
• NA Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

[changeset-bot]

🦋 Changeset detected

Latest commit: 8319437

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/components	Patch

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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	56.31 KB (+0.52% 🔺)
dist/browser.umd.js	56.7 KB (+0.52% 🔺)

[pksjce]

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 presentational ? Is that for checkbox browser consistency?

[siddharthkp]

The solution is so interesting!

credit to @langermank for introducing it in primer/css

Why not use the solution proposed in github/primer#228 where they recommended to make the role presentational ?

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

[langermank]

From what I understand, having an interactive element inside a selectable listbox option or menuitem isn't valid. See violations on story

Exactly. input needs to be in a form and ActionList isn't really a form scenario. I attended a popup a11y meeting last week and was able to confirm this with a screen reader user, which was super helpful!

[mperrotti]

LGTM, and it doesn't break the multiselect behavior in Autocomplete 🙌