feat(core): add listbox support for roving-tabindex-controller #2563

nikkimk · 2023-07-20T14:29:46Z

What I did

Added directional support to roving-tabindex-controller.
Added a listbox-controller.
Added listbox components in order to test the support and demo how we can create an accessible listbox component: pf-listbox, pf-listbox-group, and pf-listbox-option.

Testing Instructions

See default demo
See orientation demo
See multiple selections demo
See grouped options demo
See filter modes demo (combobox support)

Notes to Reviewers

This is in draft with a temporary listbox for testing. We may be able to either use it as a reference or adapt it for a future listbox component.

Components with role=listbox can be used as standalone elements, as part of a combobox. See the following references:

…ehavior is more accessible

…it only happens if item changes

… selected items

…tbox

… has focus

…e descndant logic

…ernal input

changeset-bot · 2023-07-20T14:29:50Z

⚠️ No Changeset found

Latest commit: c6fe972

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2023-07-20T14:32:50Z

✅ Deploy Preview for patternfly-elements ready!

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

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

…and updated demo

elements/pf-listbox/demo/pf-listbox.js

elements/package.json

elements/pf-listbox/pf-listbox-group.ts

bennypowers

I'm excited about this work. We'll have to get creative about how we ship reusable code here, as we want to limit ourselves in @patternfly/elements to existing components. We have more flexibility in @patternfly/pfe-core, so I think we should explore what the Lit templating and reactivity APIs have to offer, since most of the code here is or could be made agnostic to specific DOM structure and styles

elements/pf-listbox/pf-listbox.ts

…imple-list

…ed demo

bennypowers · 2023-08-08T09:46:37Z

Can we merge main in then rebase this to menu-dropdown-listbox?

nikkimk · 2023-08-16T14:10:49Z

Moved to #2570

Nikki Massaro Kauffman added 16 commits July 18, 2023 14:34

feat(core): added ariaActivedescendant to internals-controller

cfcf45d

feat(listbox): init pf-listbox, pf-listbox-group, and pf-listbox-option

20be42c

feat(listbox): init pf-listbox-item

12f6c52

feat(core): added orientation to arrow key handling

02e352b

fix(core): removed pageUp and pageDown key handlers because default b…

9b8cdaf

…ehavior is more accessible

feat(core): fixed roving-tabindex-controller's updateActiveItem so …

d6a46cc

…it only happens if item changes

feat(elements): added listbox-optiontemporary styles for filtered and…

c647911

… selected items

feat(elements): added filtering to listbox-option

b95ba67

feat(elements): added temporary orientation styles to listbox

dc739c7

feat(elements): added more variations to demo

1c0cdd6

feat(elements): added roving-tabindex-controller and filtering to lis…

fc55e07

…tbox

feat(elements): added temporary aria-selected styles to listbox-option

13cc4f9

feat(elements): added focus and blur event handlers for listbox-option

51944a0

feat(elements): added temporary active descendant syling when listbox…

d3530bd

… has focus

feat(elements): change and input events, and updated filter and activ…

471a6c9

…e descndant logic

feat(elements): fixed listbox filterbyKeyword for multiselect and ext…

c8732e5

…ernal input

nikkimk linked an issue Jul 20, 2023 that may be closed by this pull request

[feat]: Update roving-tabindex-controller key handling based on based on grid, tree, and listbox roles #2556

Open

github-actions bot added work in progress POC / Not ready for review demo Updating demo pages doc functionality Functionality, typically pertaining to the JavaScript. styles An issue or PR pertaining only to CSS/Sass tests Related to testing labels Jul 20, 2023

github-actions bot added the AT passed Automated testing has passed label Jul 20, 2023

Nikki Massaro Kauffman added 3 commits July 20, 2023 14:02

feat(listbox): added keyboardmultiselect support

d772a34

feat(listbox): added flex temporary style

ec5f937

feat(listbox): added temporary listbox styles

43df77d

Nikki Massaro Kauffman added 8 commits July 20, 2023 17:04

feat(listbox): updated temporary styles and demo

fe95a58

feat(listbox): added support for listbox groups

0fcd9cb

feat(listbox): removed unused #hasFocus variable from listbox

fd4decf

feat(listbox): updated demo styles

d8b5d0c

feat(listbox): fixed multiselect handling, added internals for aria, …

c464616

…and updated demo

feat(listbox): updated docs with more examples

827ec5c

feat(listbox): added support for combobox filtering

ac10a63

feat(listbox): updated demo for filter modes

9a965a4

bennypowers reviewed Jul 23, 2023

View reviewed changes

elements/pf-listbox/demo/pf-listbox.js Outdated Show resolved Hide resolved

bennypowers reviewed Jul 23, 2023

View reviewed changes

elements/package.json Outdated Show resolved Hide resolved

bennypowers reviewed Jul 23, 2023

View reviewed changes

elements/pf-listbox/pf-listbox-group.ts Outdated Show resolved Hide resolved

bennypowers requested changes Jul 23, 2023

View reviewed changes

elements/pf-listbox/pf-listbox.ts Outdated Show resolved Hide resolved

Nikki Massaro Kauffman added 12 commits July 24, 2023 15:14

fix(listbox): updated demo js

7a63196

feat(listbox): added case sensitivity

40c038e

fix(listbox): typo on option

b99edd1

feat(core): init listbox-controller

f942a2d

feat(listbox): updated listbox to use listbox-controller

2220a4b

feat(core): updated listbox-controller api

f61771c

feat(listbox): updated listbox to use listbox-controller

764671d

feat(listbox): updated listbox group based on listbox changes

dae5258

chore(simple-list): renamed pf-listbox to match upstream patternfly s…

7768d4b

…imple-list

feat(core): fixed selection issue with listbox-controller

62d689e

feat(simple-list): fixed required filterMode for comboboxes and updat…

c3b47e7

…ed demo

feat(simple-list): updated demos

c6fe972

nikkimk closed this Aug 16, 2023

bennypowers deleted the feat/update-roving-tabindex-controller branch August 20, 2023 04:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(core): add listbox support for roving-tabindex-controller #2563

feat(core): add listbox support for roving-tabindex-controller #2563

nikkimk commented Jul 20, 2023 •

edited

Loading

changeset-bot bot commented Jul 20, 2023 •

edited

Loading

github-actions bot commented Jul 20, 2023 •

edited

Loading

bennypowers left a comment

bennypowers commented Aug 8, 2023

nikkimk commented Aug 16, 2023

feat(core): add listbox support for roving-tabindex-controller #2563

feat(core): add listbox support for roving-tabindex-controller #2563

Conversation

nikkimk commented Jul 20, 2023 • edited Loading

What I did

Testing Instructions

Notes to Reviewers

changeset-bot bot commented Jul 20, 2023 • edited Loading

⚠️ No Changeset found

github-actions bot commented Jul 20, 2023 • edited Loading

✅ Deploy Preview for patternfly-elements ready!

bennypowers left a comment

Choose a reason for hiding this comment

bennypowers commented Aug 8, 2023

nikkimk commented Aug 16, 2023

nikkimk commented Jul 20, 2023 •

edited

Loading

changeset-bot bot commented Jul 20, 2023 •

edited

Loading

github-actions bot commented Jul 20, 2023 •

edited

Loading