Skip to content
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

Docs(ActionList): focus last selected li on group clear in mixed selection story #5089

Conversation

francinelucca
Copy link
Member

@francinelucca francinelucca commented Oct 8, 2024

Closes https://github.com/github/primer/issues/3558

Fixes focus issue in ActionList Mixed Selections story where focus would be lost when group clear button is activated.

Changelog

New

  • uses ref in ActionList Mixed Selections story to find and focus last selected item when group clear button is activated.

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Docs (storybook) only update

Testing & Reviewing

Verify keyboard navigation on deployed ActionList - Mixed Selections story. Notice focus does not get lost when group clear button is activated.

Merge checklist

Copy link

changeset-bot bot commented Oct 8, 2024

⚠️ No Changeset found

Latest commit: 813f85f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@@ -133,6 +134,11 @@ export function MixedSelection(): JSX.Element {
{text: 'Due Date', icon: <CalendarIcon />},
]

const clearGroup = () => {
;(listRef.current?.querySelector('li[aria-selected="true"]') as HTMLLIElement | undefined)?.focus()
Copy link
Member Author

Choose a reason for hiding this comment

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

Opted to focus the last previously-selected item here after clear, but can update it to be the first/last element or whatever other element is preferred. Wondering if @primer/design-reviewers have any input here CC: @maximedegreve

Copy link
Contributor

github-actions bot commented Oct 8, 2024

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 97.09 KB (0%)
packages/react/dist/browser.umd.js 97.33 KB (0%)

@francinelucca francinelucca marked this pull request as ready for review October 8, 2024 22:05
@francinelucca francinelucca requested a review from a team as a code owner October 8, 2024 22:05
@francinelucca francinelucca requested a review from jonrohan October 8, 2024 22:05
@francinelucca francinelucca added staff Author is a staff member status: review needed labels Oct 8, 2024
@francinelucca francinelucca added this pull request to the merge queue Oct 16, 2024
Merged via the queue into main with commit 6d5f56d Oct 16, 2024
57 of 58 checks passed
@francinelucca francinelucca deleted the 3473-prcactionlist-focus-is-lostreset-on-storybook-mixed-selection-example branch October 16, 2024 17:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
skip changeset This change does not need a changelog staff Author is a staff member status: review needed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants