Skip to content

refactor(aria/combobox) Add examples #32857

Open
tjshiu wants to merge 9 commits intoangular:mainfrom
tjshiu:pr-32502
Open

refactor(aria/combobox) Add examples #32857
tjshiu wants to merge 9 commits intoangular:mainfrom
tjshiu:pr-32502

Conversation

@tjshiu
Copy link
Copy Markdown
Contributor

@tjshiu tjshiu commented Feb 25, 2026

This PR introduces a new Simple Combobox pattern to the @angular/components ARIA package.

Key Changes & Features

  1. New Simple Combobox Pattern:
  • New simple-combobox pattern in src/aria/simple-combobox and src/aria/private/simple-combobox. Thanks Cheng!
  • Refined interaction logic: switched from pointerdown to click for popup triggering, and updated aria-autocomplete calculations to correctly exclude dialog-type popups.
  1. Core ARIA Refactoring:
  • Tabbable Input: Standardized the configuration by adding a boolean tabbable input to listbox, tree, and grid patterns, replacing the old tabIndex input in the grid.
  • Grid Navigation: Refined the grid state reset logic by adding dual-axis clamping and preventing the default active state from resetting once a user has already interacted with it.
  • List Focus: Fixed ListFocus to properly focus the host element when using the activedescendant mode.
  • alwaysExpanded initialization to ngOnInit.
  1. Comprehensive Examples & Dev App Integration:
  • Created a wide array of simple-combobox examples in src/components-examples/aria/simple-combobox, including:
    • Auto-select, manual filtering, and highlighting listboxes.
    • Tree-based comboboxes (with highlight and auto-select variants).
    • Grid and Datepicker combobox examples.
    • Dialog, readonly, multiselect, and disabled combobox variants.
  • Integrated a new aria-simple-combobox demo page into the dev-app for manual testing and review.

@angular-robot angular-robot Bot added the detected: feature PR contains a feature commit label Feb 25, 2026
@tjshiu tjshiu added dev-app preview When applied, previews of the dev-app are deployed to Firebase and removed detected: feature PR contains a feature commit labels Feb 25, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Feb 25, 2026

Deployed dev-app for 910f18a to: https://ng-dev-previews-comp--pr-angular-components-32857-dev-8t8lg23d.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

ok7sai and others added 7 commits April 21, 2026 14:54
…fine behavior

- Adds new examples for simple-combobox: auto-select, highlight, disabled, readonly, and dialog popups.
- Refactors existing datepicker and grid examples for better interaction patterns.
- Introduces alwaysExpanded input to SimpleCombobox for persistent popup states.
- Refines selection behavior in ListboxPattern when followFocus is enabled.
- Cleans up unused inline-suggestion examples and console logs.
- Introduces a 'tabbable' input to Listbox and Tree to control whether the widget or its items are in the tab order.
- Updates ListFocus and Tree behaviors to respect the 'tabbable' signal, defaulting tabIndex to -1 when false.
- Updates simple-combobox examples to set [tabbable]="false" on internal widgets to ensure correct focus behavior.
- Includes unit tests for the new tabbable behavior in ListFocus and Tree.
…tion logic

- Adds extensive unit tests for SimpleCombobox across Listbox, Tree, and Grid implementations.
- Refines aria-autocomplete calculation to exclude dialog-type popups, as they do not support autocomplete behavior.
- Switches SimpleCombobox from pointerdown to click for popup triggering to improve interaction consistency.
- Fixes ListFocus to properly focus the host element when using activedescendant mode.
- Updates GridPattern to prevent resetting its default active state once a user has already interacted with it.
- Moves alwaysExpanded initialization to ngOnInit in the public Combobox component for better lifecycle management.
- Improves simple-combobox-highlight example to handle disabled states.
@tjshiu tjshiu requested review from adolgachev and ok7sai April 21, 2026 23:47
@tjshiu tjshiu added the target: major This PR is targeted for the next major release label Apr 21, 2026
@angular-robot angular-robot Bot added the area: build & ci Related the build and CI infrastructure of the project label Apr 21, 2026
@tjshiu tjshiu marked this pull request as ready for review April 21, 2026 23:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: aria/combobox area: aria/tree area: build & ci Related the build and CI infrastructure of the project dev-app preview When applied, previews of the dev-app are deployed to Firebase target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants