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

Select Panel: Functional adjustments #4906

Merged
merged 83 commits into from
Sep 12, 2024

Conversation

siddharthkp
Copy link
Member

@siddharthkp siddharthkp commented Sep 3, 2024

Works only on modern ActionList (feature flag primer_react_select_panel_with_modern_action_list):

  • Support PageDown and PageUp for keyboard navigation

Works for both deprecated (feature flag off) and modern ActionList (feature flag on):

  • Label listbox by the title of the panel

Note: removed combobox update from this PR because i'm not convinced if that's the right move, created an issue to investigate: https://github.com/github/primer/issues/3951

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

Testing & Reviewing

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Storybook)
  • Changes are SSR compatible
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge
  • (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests), ran integration tests with feature flag off and they are passing.

@siddharthkp siddharthkp marked this pull request as ready for review September 10, 2024 12:00
@siddharthkp siddharthkp requested review from TylerJDev and removed request for a team September 10, 2024 12:00
@github-actions github-actions bot temporarily deployed to storybook-preview-4906 September 11, 2024 10:22 Inactive
@siddharthkp siddharthkp added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 11, 2024
@primer-integration
Copy link

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/341539

@siddharthkp siddharthkp added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 11, 2024
Copy link
Contributor

@TylerJDev TylerJDev left a comment

Choose a reason for hiding this comment

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

Looks good! Tested with the FF on and the keyboard navigation appears to work correctly 🚀

@siddharthkp siddharthkp added this pull request to the merge queue Sep 12, 2024
Merged via the queue into main with commit dbf82f4 Sep 12, 2024
33 checks passed
@siddharthkp siddharthkp deleted the select-panel--functional-adjustments-1 branch September 12, 2024 09:02
@primer primer bot mentioned this pull request Sep 12, 2024
TylerJDev pushed a commit that referenced this pull request Sep 23, 2024
* super wip

* just use the actionlist component and revert the type updates

* Update packages/react/src/FilteredActionList/FilteredActionList.tsx

* Some more progress

* revert the type changes and cast it :/

* clean

* wip

* wip wip

* add stories

* fix linting

* add tests for groups

* Map groups

* Update story names for e2e tests

* oops remove unintended file

* update story name

* same - update story name

* disable animations

* test(vrt): update snapshots

* Update tests since new action list has different semantics for group headings

* logging

* pass the rest

* extract children and use before text

* remove logging

* test(vrt): update snapshots

* add active styles to ActionList

* rename component name to be clearer

* remove variant full from examples

* tiny clean up

* fix showItemDividers

* another tiny cleanup

* pull MappedActionListItem to make it stable

* test(vrt): update snapshots

* show active styles only when used with keyboard

* backward compat: expose id as data-id

* update snapshots

* add story for long strings

* fishing for errors

* backward compatibility for renderItem

* remove todo now

* add a feature flag

* clean up dual filter list setup

* run jests test with both states of feature flags

* refactor snapshot tests with scenarios

* remove feature flag for main

* test(vrt): update snapshots

* add feature flag to e2e matrix

* test(vrt): update snapshots

* backward compat: allow groupMetadata to be empty array

* sigh newline

* Create sour-cooks-dress.md

* copy SelectPanel snapshots from main

* remove unrelated changes in this PR

* test(vrt): update snapshots

* add more bindkeys

* add for deprecated version as well

* label listbox/ActionList by panel title

* Create wicked-books-occur.md

* remove Home and End

* add test for PageDown and PageUp

* update changeset

* active styles for both directly and indirectly

* add role=combobox

* update snapshot

* test(vrt): update snapshots

* remove features from deprecated version

* update test

* only use aria-labelledby when aria-label is not passed

* remove combobox for this PR

---------

Co-authored-by: Armagan Ersoz <broccolinisoup@github.com>
Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>
@primer primer bot mentioned this pull request Oct 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility component: SelectPanel integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh staff Author is a staff member
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug] A11y: SelectPanel listbox does not have an aria label
3 participants