feat(select): typeahead #2809

bennypowers · 2024-07-11T11:42:28Z

Closes #2800

What I did

add ActivedescendantController
add typeahead variant to select, implementing the combobox inline autocomplete pattern

Closes #2800

Testing Instructions

this pr requires thorough screen reader testing, but not until it's out of draft
typeahead demo

adds `ActivedescendantController` to core

netlify · 2024-07-11T11:43:53Z

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	`0e497e4`
😎 Deploy Preview	https://deploy-preview-2809--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions · 2024-07-11T11:44:29Z

SSR Test Run for 064c957: Report

changeset-bot · 2024-07-17T15:00:38Z

🦋 Changeset detected

Latest commit: 46442ed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@patternfly/pfe-core	Major
@patternfly/pfe-tools	Minor
@patternfly/elements	Patch

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

github-actions · 2024-07-17T15:02:45Z

SSR Test Run for f47d0de: Report

github-actions · 2024-07-17T17:31:25Z

SSR Test Run for ac115b4: Report

github-actions · 2024-07-18T15:31:57Z

SSR Test Run for 37f4804: Report

github-actions · 2024-07-18T15:47:48Z

SSR Test Run for 5f268d2: Report

hellogreg · 2024-07-18T19:26:00Z

On the demo in the latest versions of all Mac (Sonoma) browsers and Windows (11) Chrome/Edge (but not Win Firefox, Linux Firefox, iOS Safari, or Android Chrome), the browser window flickers upon moving focus to the combobox and toggling it expanded. Looks like vertical and horizontal scrollbars are rapidly appearing/disappearing. This occurs with or without screen readers enabled.

(Edit: Oddly, this doesn't happen on every Mac I tested. Does on my work M1 Macbook Pro, but not on an M3 Macbook Pro with the same OS and browser versions. So I don't know exactly what the deal is.)

hellogreg · 2024-07-19T19:23:23Z

Here's the good, the bad, and the weird about keyboard nav with Chrome (even without a screen reader on). Quite a bit is different from the WAI example--which I would try to mimic as much as possible.

Chrome keyboard nav notes:

Focus on input/button is visible.
List opens upon space.
List does not open upon enter.
List opens upon typing any character, whether it begins a list item or not.
- Visible focus outline remains on input/button.
- Highlighted state appears on "Alabama," no matter what is typed.
  Focus remains on the input/button when the list opens. Pressing tab moves focus into the list (to the "Select a state" option).
However, focus does not need to move into the list in order to highlight options.
- Arrows highlight options when focus is still on the combobox.
- In fact, arrows don't work when focus is in the list.
Selecting any option and pressing enter closes the list but does not put selected text in the input. Same with the escape key.
- If nothing has been typed, "Select a state" is still in the input, but is no longer a dimmed placeholder. It's the actual value.
- If a value has been typed, it remains the input value when the list closes.
If the closed list is re-opened, the most-recently highlighted value is still highlighted.

hellogreg · 2024-07-19T19:24:45Z

Safari is similar, if a bit more forgiving in one way. Highlighting an option in the list with Safari does select it--so it is in the input upon closing the list.

hellogreg · 2024-07-19T19:26:57Z

Mac Firefox is like Chrome, best I can tell.

I'd tackle the keyboard issues before even going into screen reader testing.

hellogreg · 2024-07-19T20:56:20Z

Oh, in case this is helpful, here's how the WAI example works--and where it's the same or differs:

Focus on input/button is visible. (same as our DP)
List does not open upon space. (different)
List does not open upon enter. (same)
Full list opens upon pressing down arrow. (same)
When typing characters, the list only opens when you type a letter that an option begins with. (different)
List is then navigated via arrows. (same)
Focus indicator (not just highlight) moves with arrows. (different)
When a list item receives focus, it is now selected and displays in the input upon pressing enter or escape. (different)
Pressing tab moves to the next focusable item after the combobox--not into the list. (different)

github-actions · 2024-08-14T15:20:07Z

SSR Test Run for 4604343: Report

github-actions · 2024-08-14T15:24:04Z

SSR Test Run for 1bda56d: Report

github-actions · 2024-08-14T20:18:34Z

SSR Test Run for 732c1ba: Report

zeroedin · 2024-08-14T20:36:40Z

oops, that commit message should have been test(core): ... 😞

github-actions · 2024-08-15T07:21:40Z

SSR Test Run for 071a428: Report

github-actions · 2024-08-15T08:28:19Z

SSR Test Run for 88f1dcf: Report

github-actions · 2024-08-15T09:53:21Z

SSR Test Run for 0e497e4: Report

* fix(avatar)!: remove BaseAvatar (#2630) * fix(avatar)!: remove BaseAvatar Closes #2617 Closes #2575 Closes #2349 * fix(avatar): update css * fix(avatar)!: rename AvatarLoadEvent => PfAvatarLoadEvent * fix(clipboard-copy)!: remove BaseClipboardCopy (#2635) * fix(clipboard-copy)!: remove BaseClipboardCopy Closes #2611 * fix(clipboard-copy): use pfv4 styles * fix(clipboard-copy)!: rename ClipboardCopyCopiedEvent to PfClipboardCopyCopiedEvent * fix(switch)!: remove BaseSwitch (#2634) * fix(switch)!: remove BaseSwitch Closes #2618 * fix(switch): remove extra semicolon * Merge branch 'staging/4.0' into fix/switch/remove-base * fix(switch): svg namespace --------- Co-authored-by: Steven Spriggs <[email protected]> * fix(code-block)!: remove BaseCodeBlock (#2633) Closes #2613 Co-authored-by: Steven Spriggs <[email protected]> * fix(label)!: remove BaseLabel (#2632) * fix(label)!: remove BaseLabel Closes #2620 * feat(label): self-remove on close * test(label): update tests * fix(label): correct font-size unit, include missing pf global var * docs(label): fix accesibility demo * fix(label): removes the removal of element and only triggers close event * fix(label): undo last commit, see the example in the changeset --------- Co-authored-by: Steven Spriggs <[email protected]> * fix(badge)!: remove BaseBadge (#2629) Closes #2619 * fix(spinner)!: remove BaseSpinner (#2627) Closes #2614 Co-authored-by: Steven Spriggs <[email protected]> * fix(tile)!: remove BaseTile (#2625) Co-authored-by: Steven Spriggs <[email protected]> * fix(tooltip)!: remove BaseTooltip (#2628) Closes #2615 Co-authored-by: Steven Spriggs <[email protected]> * feat(card)!: remove BaseCard (#2586) * fix(card): moving styles and code from baseclass * chore: changset * feat(card): removing basecard class, styles * fix(card): remove unused basecard import * Update .changeset/sharp-spiders-float.md Co-authored-by: Benny Powers <[email protected]> * docs: make changeset major * fix(card): make slot controller private * feat(card): title slot, header actions --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers <[email protected]> * fix(button)!: remove BaseButton (#2631) * fix(tabs)!: remove BaseTabs (#2745) closes #2624 * fix(button): keyboard focus * fix(switch): revert bad merge from BaseSwitch * fix(icon)!: remove svg files (#2763) * fix(icon)!: remove BaseIcon (#2636) * fix(icon)!: remove BaseIcon Closes #2621 * docs: jsdoc * fix(icon): base styles * docs: addIconSet jsdoc Co-authored-by: Steven Spriggs <[email protected]> * docs: jsdoc for getIconUrl Co-authored-by: Steven Spriggs <[email protected]> * style: lint * fix: remove baseicon from bad merge --------- Co-authored-by: Steven Spriggs <[email protected]> * fix(accordion)!: remove BaseAccordion (#2764) * fix(accordion)!: remove BaseAccordion Closes #2612 fix(accordion): expand logic refactor(accordion): prevent circular imports * feat(tools): querySnapshot test helper * test(accordion): fix some tests * fix(accordion): single attribute * feat(tools): ts transform to add static version to elements (#2768) * fix(icon)!: remove getIconUrl for webpack's sake (#2766) * fix(icon)!: remove getIconUrl for webpack's sake * test(icon): refactor tests * chore: update icons * docs(icon): fix custom sets demo * chore: update rhds dep * feat!: ssr (#2762) * fix(core)!: remove side effects from core import Removes `window.PfeConfig` and auto-reveal features Adds server checks to `createContextWithRoot` * feat(tools): ssr test page * test(accordion): ssr tests * test(avatar): ssr tests * test(back-to-top): ssr * test(background-image): ssr * test(badge): ssr * test(banner): ssr * test(button): ssr * test(card): ssr * test(chip): ssr * test(clipboard-copy): ssr * test(code-block): ssr * test(dropdown): ssr * test(icon): ssr * test(jump-links): ssr * test(label): ssr * test(modal): ssr * test(panel): ssr * test(popover): ssr * test(progress): ssr * test(progress-stepper): ssr * test(select): ssr * test(spinner): ssr * test(switch): ssr * test(table): ssr * test(tabs): ssr * test(text-area): ssr * test(text-area): ssr * test(tile): ssr * test(timestamp): ssr * test(tooltip): ssr * feat(create-element): ssr tests * feat(tools): automatic ssr demos * fix(tools): shim module * docs: changesets * test: remove cruft * fix(tools): ssr error reports * test: playwright config for ssr * chore: ssr test workflow * fix(tools): ssr error status message * chore: ssr test workflow * chore: ssr test workflow * chore: ignore reports * fix(accordion): ssrability * fix(back-to-top): ssrability * docs: jsdoc for ssr tests * chore: test workflow in ci * fix(core): fix Logger for ssr * style: whitespace * chore: better elements build * fix(core): more ssr-able controllers * test(back-to-top): ssrable demos * fix(tools): redirects for demos in dev server * fix(tools): ssr files * test(background-image): ssrable demos * fix(tools): 11ty demo images * fix(core): floating dom controller more ssrable * feat(tools): export ssr helpers * fix(code-block): ssrable * fix(jump-links): ssrable * fix(core): ssrable ScrollSpyController * fix(progress-stepper): ssrable * fix(popover): ssrable * fix(core): ssrable lbc * fix(icon): ssr * fix(select): ssrable * fix(table): ssrable * fix(text-area): ssrable * fix(text-input): ssrable * fix(tooltip): ssrable * chore: pr reports * fix(tools): update playwright * chore: ssr workflow * chore: ssr workflow * chore: actions versions * chore: ssr workflow * chore: ssr workflow * chore: ssr workflow * chore: ssr workflow * chore: ssr workflow * chore: ssr workflow * chore: ssr workflow * fix: remove BaseAccordion from bad merge * chore: remove references to Base* * fix(core): ariaDescribedByElements, etc types * chore: lint massive lint. no more warnings * chore: update typescript enable `isolatedDeclarations`, which makes our dx a bit worse but improves downstream performance * chore: appease cupertino * chore: pkg lock * refactor(core): clarify the guts of InternalsController * docs(button): demo of custom roles * docs(button): a wee bit of style * chore: typescript 5.5 (#2801) * chore: lint massive lint. no more warnings * chore: update typescript enable `isolatedDeclarations`, which makes our dx a bit worse but improves downstream performance * chore: appease cupertino * chore: pkg lock * fix(tools): less chatty tests * chore: deps * chore: lint * test: lint * chore: update playwright in ci * fix(tools): dev server config watcher regexp * perf(tools): dev server uses mtime for etag * feat(core): new decorators `@listen` and `@observes` (#2807) * feat(core): add `@listen` decorator * feat(core): add `@observes` decorator * refactor: use new listen and observes decorators * fix(core): listen decorator call lifecycle correctly * test(core): observes decorator test * feat(core): observes decorator options waitFor option lets caller wait for connected, firstUpdated, or updated until calling the method * fix: observes calls * fix(core): improved types * fix(core): even better types * test(core): listen decorator * feat(select): typeahead (#2809) * fix(select): display value from attribute * feat(select): typeahead adds `ActivedescendantController` to core * fix: wip activedescendantcontroller clone nodes * fix(select): slightly less janky clonenode path * refactor: iterative improvements * fix(core)!: a11y controller options * fix: elements usage of a11y controllers * fix!: abstract ATFocusController * fix!: inching towards correctness * fix: give listbox controller access to control element * fix: inching closer * fix(core): index at focus item by number * fix(select): typeahead, focus, filter * fix(select): roles * fix(select): combobox controller * fix(select): combobox controller works with orca ff, apparently * fix(core): combobox * fix(select): better vo support * fix(select): activedescentant * fix(select): dropdown orientation * fix(core): listbox select * fix: select, core jsdoc, cleanup * fix(core): a more general combobox interface * fix(core): more nitpicks * fix(core): oopsies forgot to commit these yesterday * refactor(select): polish * fix(tabs): update to use new rtic stuff * fix(core): initial focus for rti * fix(accordion): wip rtic migration * test(accordion): update tests * refactor(accordion): whitespace * docs(accordion): focusable content in panel * docs(accordion): demo formatting * test(accordion): fix and refactor tests * fix(core): off-by-one error in RTIC controller * fix(core): nested rtic * feat(tools): chai a11y snapshot assertions * fix(core): more ssr-able controllers * fix(core): more ssr-able controllers * fix(core): more ssr-able controllers * fix(icon): more ssr-able icon * fix(core): remove unused ax controller apis * test(core): observes decorator * fix(chip): rtic apis, tests * feat(tools): a11yShapshot queries can match regex * chore: import maps in tests * refactor(select): type assertion * feat(tools): more ax assertions * fix(core): listbox/combobox selection state * fix(select): no placeholder label * fix(select): checkboxes * fix(core): listbox select behaviour * feat(tools): more ax chai helpers * docs(select): checkbox demo padding * test(select): all green * test: reporter in ci * fix(tools): always junit reporter in ci * chore: test runner config * fix(tools): test runner config * fix(tools): flatten assertions in ci * test(select): summaries * chore: update deps * test: refactor ax helpers * test(select): reformat test file * test(select): taborder when bluring listbox * test(select): format test file * test(select): home/end should expand listbox * test(select): show+home after selecting * test(select): no scroll on space * docs(select): demo containers * fix(core): aria-multiselectable * test(select): format test file * fix(select): redundant button role * fix: visually-hidden styles * test(select): provisional home/end typeahead * test(select): aria-posinset * fix(core): listbox aria-posinset * test(select): format file * test(select): dont expand listbox on type space * test(select): space on button no scroll * fix(core): combobox prevent scroll Also prevent listbox from showing on typing space in combobox input * test(select): tabbing away does not focus button * fix(core): combobox dont focus button on blur * refactor(core): combobox listeners * fix(core): home/end for combobox * test(select): format file * fix(select): ghost placeholder * test(select): refactor * test(select): cases involving labels and placeholders * fix(core): placeholder/label/carat * fix(select): focus styles * fix(select): fallback label to placeholder * fix(select): workaround for safari * test(select): cases * fix(select): inert instead of aria-hidden * fix(core): safari workaround for activedescendant * fix(core): wip single-vs-multiselect on click * fix(core): multiselect click * fix(select): checkbox label * test(select): refactor tests * feat(tools): test utils: allow clicking out of element bounds * test(select): clicking items * fix(core): clicking shadow ad items * test(select): more better selected tests * fix(core): clicking shadow items * fix(core): more x-root aria shenanigans * test(select): add lightdom options slotted test * refactor(core): unused var * test(core): test shadow-root-only combobox-controller * test(core): combobox works even with no user-set ids * fix(core): propertly detect rotten apples * refactor(core): rename support boolean * fix(core): ad controller works without preset ids * fix(core): default isItemDisabled predicate * test: try to deflake * test(select): greg's issues when an item is selected * refactor(core): controller field privacy * fix(core): correct order of operations in combobox listeners * refactor(core): override onKeydown * fix(core): ensure compatibility in combobox controller * test(core): combobox tests * refactor(core): don't bind this in controller options --------- Co-authored-by: Steven Spriggs <[email protected]> * feat(tools): getAllManifests * fix(tools): correct import (#2824) * docs: more changesets * chore: decruft * docs: pdate a11y-controller-opts.md * docs: update dirty-bears-win.md * docs: update a11y-controller-opts.md --------- Co-authored-by: Steven Spriggs <[email protected]> Co-authored-by: Brian Ferry <[email protected]> Co-authored-by: Kelsey S <[email protected]>

bennypowers added 2 commits July 11, 2024 11:01

fix(select): display value from attribute

ccdaf1d

feat(select): typeahead

f3d2053

adds `ActivedescendantController` to core

bennypowers changed the base branch from main to staging/4.0 July 11, 2024 11:42

github-actions bot added work in progress POC / Not ready for review demo Updating demo pages functionality Functionality, typically pertaining to the JavaScript. labels Jul 11, 2024

github-actions bot added the AT passed Automated testing has passed label Jul 11, 2024

fix: wip activedescendantcontroller clone nodes

32f312b

bennypowers added 2 commits July 17, 2024 18:48

fix(select): slightly less janky clonenode path

30a2c82

refactor: iterative improvements

2fdb4bf

bennypowers added 2 commits July 18, 2024 18:22

fix(core)!: a11y controller options

a3a670e

fix: elements usage of a11y controllers

2f7f48e

bennypowers force-pushed the feat/select/typeahead branch from 104d648 to 2f7f48e Compare July 18, 2024 15:29

Merge branch 'staging/4.0' into feat/select/typeahead

243bb6b

bennypowers added 2 commits July 21, 2024 17:16

fix!: abstract ATFocusController

10f2d49

fix!: inching towards correctness

a8f9ae8

github-actions bot added the styles An issue or PR pertaining only to CSS/Sass label Jul 22, 2024

bennypowers added 2 commits August 14, 2024 18:17

test(select): more better selected tests

b26afc7

fix(core): clicking shadow items

8a7022a

fix(core): more x-root aria shenanigans

e77581a

test(select): add lightdom options slotted test

3c42af5

bennypowers added 8 commits August 15, 2024 09:34

refactor(core): unused var

0748da8

test(core): test shadow-root-only combobox-controller

7400dc8

test(core): combobox works even with no user-set ids

83591e7

fix(core): propertly detect rotten apples

b0383f3

refactor(core): rename support boolean

1a234a1

fix(core): ad controller works without preset ids

4c51a38

fix(core): default isItemDisabled predicate

0110a44

test: try to deflake

402a497

bennypowers added 3 commits August 15, 2024 11:24

test(select): greg's issues when an item is selected

fcdcaef

refactor(core): controller field privacy

9a28e9f

fix(core): correct order of operations in combobox listeners

dd66cba

bennypowers added 4 commits August 15, 2024 12:39

refactor(core): override onKeydown

7917a9c

fix(core): ensure compatibility in combobox controller

c2e5a2f

test(core): combobox tests

cc177ff

refactor(core): don't bind this in controller options

46442ed

bennypowers merged commit 874f3b6 into staging/4.0 Aug 15, 2024
11 of 12 checks passed

bennypowers deleted the feat/select/typeahead branch August 15, 2024 11:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(select): typeahead #2809

feat(select): typeahead #2809

bennypowers commented Jul 11, 2024 •

edited

Loading

netlify bot commented Jul 11, 2024 •

edited by github-actions bot

Loading

github-actions bot commented Jul 11, 2024

changeset-bot bot commented Jul 17, 2024 •

edited

Loading

github-actions bot commented Jul 17, 2024

github-actions bot commented Jul 17, 2024

github-actions bot commented Jul 18, 2024

github-actions bot commented Jul 18, 2024

hellogreg commented Jul 18, 2024 •

edited

Loading

hellogreg commented Jul 19, 2024 •

edited

Loading

hellogreg commented Jul 19, 2024

hellogreg commented Jul 19, 2024

hellogreg commented Jul 19, 2024 •

edited

Loading

github-actions bot commented Aug 14, 2024

github-actions bot commented Aug 14, 2024

github-actions bot commented Aug 14, 2024

zeroedin commented Aug 14, 2024

github-actions bot commented Aug 15, 2024

github-actions bot commented Aug 15, 2024

github-actions bot commented Aug 15, 2024

feat(select): typeahead #2809

feat(select): typeahead #2809

Conversation

bennypowers commented Jul 11, 2024 • edited Loading

What I did

Testing Instructions

netlify bot commented Jul 11, 2024 • edited by github-actions bot Loading

✅ Deploy Preview for patternfly-elements ready!

github-actions bot commented Jul 11, 2024

changeset-bot bot commented Jul 17, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Jul 17, 2024

github-actions bot commented Jul 17, 2024

github-actions bot commented Jul 18, 2024

github-actions bot commented Jul 18, 2024

hellogreg commented Jul 18, 2024 • edited Loading

hellogreg commented Jul 19, 2024 • edited Loading

hellogreg commented Jul 19, 2024

hellogreg commented Jul 19, 2024

hellogreg commented Jul 19, 2024 • edited Loading

github-actions bot commented Aug 14, 2024

github-actions bot commented Aug 14, 2024

github-actions bot commented Aug 14, 2024

zeroedin commented Aug 14, 2024

github-actions bot commented Aug 15, 2024

github-actions bot commented Aug 15, 2024

github-actions bot commented Aug 15, 2024

bennypowers commented Jul 11, 2024 •

edited

Loading

netlify bot commented Jul 11, 2024 •

edited by github-actions bot

Loading

changeset-bot bot commented Jul 17, 2024 •

edited

Loading

hellogreg commented Jul 18, 2024 •

edited

Loading

hellogreg commented Jul 19, 2024 •

edited

Loading

hellogreg commented Jul 19, 2024 •

edited

Loading