fix(core): improve ATFocus, Combobox, Internals, Listbox, and RovingTabIndex controllers#2963
fix(core): improve ATFocus, Combobox, Internals, Listbox, and RovingTabIndex controllers#2963adamjohnson wants to merge 14 commits intomainfrom
Conversation
|
✅ 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.
|
Regarding |
…ombobox controller" This reverts commit ba6a0dc.
This comment has been minimized.
This comment has been minimized.
bennypowers
changed the title
✅ Commitlint tests passed!More Info{
"valid": true,
"errors": [],
"warnings": [],
"input": "fix(core): improve ATFocus, Combobox, Internals, Listbox, and RovingTabIndex controllers"
} |
…k to EI Attributes are user settings, internals are defaults, so we need to try the attributes first
2 participants
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>