Fix: Use aria-selected instead of aria-checked for SelectPanel listbox items

[liuliu-dev]

What are you trying to accomplish?

This PR fixes a screen reader accessibility issue where SelectPanel multiselect items were incorrectly announced. Screen readers were announcing "not selected" for all items regardless of their actual selection state.

Problem

When using SelectPanel with role="listbox" and items with role="option", the component was using aria-checked for multi-select mode and aria-selected for single-select mode. However, per the WAI-ARIA 1.2 specification, elements with role="option" have aria-selected as a Required State.

Solution

Always use aria-selected for listbox option items, regardless of whether the SelectPanel is in single-select or multi-select mode.

Screenshots

Integration

List the issues that this change affects.

Related issue https://github.com/github/accessibility-audits/issues/14736

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Anything you want to highlight for special attention from reviewers?

Accessibility

• Fixes axe scan violation - This change fixes an existing axe scan violation.
• No new axe scan violation - This change does not introduce any new axe scan violations.
• New axe violation - This change introduces a new axe scan violation. Please describe why the violation cannot be resolved below.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: cc568c6

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

This PR includes changesets to release 1 package

Name	Type
@primer/view-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

[Copilot]

Pull request overview

Fixes SelectPanel listbox option accessibility by ensuring option items always use aria-selected (instead of aria-checked) so screen readers announce selection state correctly in multiselect.

Changes:

• Update SelectPanel’s JS behavior to always read/write selection via aria-selected.
• Update SelectPanel’s Ruby ItemList to always render aria-selected for listbox options.
• Update system tests and add a patch changeset entry.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
app/components/primer/alpha/select_panel_element.ts	Always uses aria-selected when toggling/reading option selection state.
app/components/primer/alpha/select_panel.rb	Forces listbox ItemList to render selection using aria_selected_variant: :selected.
test/system/alpha/select_panel_test.rb	Updates assertions to validate aria-selected behavior instead of aria-checked.
.changeset/seven-papayas-glow.md	Adds release note for the accessibility fix.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Duplicate assertion: there are two consecutive refute_selector "[aria-selected=true]" lines. This is redundant and can be reduced to a single assertion (or replaced with a more specific check, e.g., count-based, if you intended to assert something else).

Suggested change

refute_selector "[aria-selected=true]"