fix(core): improve ATFocus, Combobox, Internals, Listbox, and RovingTabIndex controllers #2963
Conversation
This file contains hidden or 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
🦋 Changeset detectedLatest commit: 4823594 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
✅ Deploy Preview for patternfly-elements ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
This comment has been minimized.
This comment has been minimized.
5 tasks
Contributor
Member
|
Regarding |
…ombobox controller" This reverts commit ba6a0dc.
Contributor
bennypowers
reviewed
Feb 4, 2026
This comment has been minimized.
This comment has been minimized.
bennypowers
changed the title
Contributor
✅ Commitlint tests passed!More Info{
"valid": true,
"errors": [],
"warnings": [],
"input": "fix(core): improve ATFocus, Combobox, Internals, Listbox, and RovingTabIndex controllers"
} |
Contributor
…k to EI Attributes are user settings, internals are defaults, so we need to try the attributes first
Contributor
Contributor
Contributor
Contributor
refactors for readability
Contributor
Member
|
@adamjohnson @hellogreg I think this is ready to go, please give it the once over |
bennypowers
approved these changes
Feb 9, 2026
Contributor
Collaborator
Author
|
Libraries Grow Tools Maintained |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
What I did
Testing Instructions
npm run build.core/pfe-core/controllers/at-focus-controller.js+.d.ts+.js.mapcore/pfe-core/controllers/roving-tabindex-controller.js+.d.ts+.js.mapcore/pfe-core/controllers/combobox-controller.js+.d.ts+.js.mapcore/pfe-core/controllers/listbox-controller.js+.d.ts+.js.mapcore/pfe-core/controllers/internals-controller.js+.d.ts+.js.mapnode_modules/@patternfly/pfe-core/controllersnpm run devin your terminal.Notes to Reviewers
I'll outline what changed and why for each controller:
AT Focus Controller
Prior to these changes, when pressing the Home key for rh-select, focus incorrectly moves to the last item instead of the first. This happens because the
atFocusedItemIndexsetter inATFocusControllercalculates the search direction incorrectly.If the first item is non-focusable (e.g., a disabled placeholder), the while loop searches backward from index 0, wraps to the last item, and stops there.
The solution is to modify the direction calculation in the
atFocusedItemIndexsetter to handle Home/End explicitly. See notes in code for further details.This PR also adds the public
refreshItems()method. This method makes available the option for keyboard users to arrow/focus to items when users dynamically add rh/pf-options after intitial render.Combobox Controller
When using a combobox/select component without a text input (e.g., rh-select), clicking the toggle button while the listbox is open does not close the listbox as expected. Instead, the listbox briefly closes and immediately reopens, preventing the native select-like toggle behavior.
The
#onFocusoutListboxhandler correctly closes the listbox when focus leaves to an external element, but it doesn't account for the case where focus moves to the toggle button itself.The solution is to modify the
#onFocusoutListboxhandler to also check if therelatedTargetis the toggle button. If focus moved to the toggle button, skip the automatic close and let the#onClickButtonhandler manage the toggle behavior.We also implement the new
refreshItems()method insideset items()so that dynamically added rh/pf-options are keyboard accessible after intitial render.Internals Controller
The internals controller includes four new public statics:
setAriaPosInSet,setAriaSetSize,getAriaPosInSet,getAriaSetSizewhich are then used in the Combobox and Listbox controllers to set thosearia-*attributes internally or on the host.RovingTabIndex Controller
The
RovingTabindexControllermaintains an internalatFocusedItemIndexthat tracks which item should have focus. However, this index is only updated via keyboard navigation, not when an item receives DOM focus programmatically or via mouse click. This causes keyboard navigation to start from the wrong position after mouse interactions.Eg: Open the a select and click "Item 3". Item 3 is focused. Re-open the select and hit the down arrow.
Expected: Focus moves to "Item 4". Actual: Focus moves to Item 1.
This change adds a persistent focusin event listener in the RovingTabindexController constructor that syncs atFocusedItemIndex when any item in the container receives DOM focus. This keeps our mouse + keyboard focus in sync.
To Do's
<pf-select>