fix: standalone Listbox updates activedescendant correctly #31415
+204
−82
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📊 Bundle size report
Unchanged fixtures
|
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 634 | 653 | 5000 | |
| Button | mount | 282 | 309 | 5000 | |
| Field | mount | 1139 | 1144 | 5000 | |
| FluentProvider | mount | 695 | 697 | 5000 | |
| FluentProviderWithTheme | mount | 83 | 84 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 36 | 34 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 73 | 76 | 10 | |
| MakeStyles | mount | 855 | 850 | 50000 | |
| Persona | mount | 1745 | 1696 | 5000 | |
| SpinButton | mount | 1359 | 1365 | 5000 | |
| SwatchPicker | mount | 1489 | 1540 | 5000 |
fabricteam
reviewed
May 17, 2024
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots
Avatar Converged 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Avatar Converged.badgeMask.normal.chromium.png | 5 | Changed |
| Avatar Converged.badgeMask - RTL.normal.chromium.png | 0 | Removed |
smhigley
commented
May 17, 2024
| @@ -104,9 +104,12 @@ export function useButtonTriggerSlot( | |||
| searchString.current = ''; | |||
| }, 500); | |||
|
|
|||
| if (open) { | |||
| moveToNextMatchingOptionWithSameCharacterHandling(); | |||
| } | |||
There was a problem hiding this comment.
This change is because of the difference in the activedescendant being set when the listbox is rendered, before being opened. The first press of a letter should only open the listbox, and not also move to the second option starting with that letter.
smhigley
commented
May 17, 2024
packages/react-components/react-combobox/src/components/Listbox/Listbox.test.tsx
Show resolved
Hide resolved
smhigley
commented
May 24, 2024
packages/react-components/react-aria/src/activedescendant/useActiveDescendant.ts
Outdated
Show resolved
Hide resolved
ling1726
reviewed
May 27, 2024
packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.styles.ts
Outdated
Show resolved
Hide resolved
ling1726
reviewed
May 27, 2024
packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
Outdated
Show resolved
Hide resolved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related to #31140 and #31235
Essentially this moves the initial
activeDescendantControllersetting logic fromuseComboboxBaseStatetouseListbox, so it runs when the listbox is first renders instead of based on the change inopenstate.That both makes combobox/dropdown
aria-activedescendantlogic a bit more straightforward (the attribute is set if the referenced option exists), and also makes a standalone listbox work.It also moves a couple option lookup functions to the context, so that Listbox can access them (previously the
getOptionByIdlogic inonFocuswasn't working when not a standalone widget, since it didn't have access to the parent combobox's option collection).Previous Behavior
The original issue was that listbox did not set the initial activedescendant. The first fix to that issue did so on focus, but that caused issues when clicking also set focus (and reset the activedescendant, potentially causing scroll & jumping).
New Behavior
There's no reason Listbox should not always have
aria-activedescendantset while it's present on the page, so this change moves the initial activedescendant logic from the combobox (which handled it when opened) to the listbox (which handles it when initially rendered).There is a very subtle difference between the two, since the Listbox is rendered when the Combobox/Dropdown trigger gains focus, but before it is opened. This causes a minor difference in when
aria-activedescendantis set, but does not cause any practical drawbacks to screen reader users. Some early ARIA combobox pattern work was based around the idea thataria-activedescendantwould always be set, so screen readers already handle logic on whether to read the activedescendant based onaria-expanded.