fix(ListBox): a11y - move filter tag as sibling of menu trigger, esc key improvements #13173

tw15egan · 2023-02-16T17:38:35Z

Refactors MultiSelect so that the Filter Tag is an adjacent element to the trigger button, rather than a descendant of the button. Previously, this was causing issues as an element with role="button" cannot be a descendant of a button element, causing an a11y violation.

This PR also includes changes to the esc behavior for the MultiSelect / ComboBox variants. The x to clear input for FilterableMultiSelect and the x for the tag selection are not accessed by tabbing. Instead, the actions a user could perform with these have been rolled into the input itself. For example:

Multiselect:
Open and select an item with the keyboard. One esc press should close the menu. The second esc press should clear the selection.

FilterableMultiselect:
Open and select an item with the keyboard. One esc press should close the menu AND clear the input. The second esc press should clear the selection.

ComboBox:
Open and select an item with the keyboard. One esc press should close the menu AND retain the input. The second esc press should clear the input.

Changelog

New

A wrapper (cds--list-box__field--wrapper) for the Filter Tag and the trigger Button.
onFocus and onBlur handlers attached to the wrapper to apply a focus outline when the inner button is focused/blurred.
Styles for the new wrapper component, which mimics the filterable styles.
Keyboard handlers to capture escape presses inside MultiSelect, FilterableMultiSelect and Combobox

Changed

The trigger button and ListBox.Selection (the filter tag) are now adjacent siblings under the new wrapper, rather than the filter tag being a child of the trigger button.
Adjusted some styles based on the new structure.
ListBox.Selection (the x or filter x) no longer is in the tab order, and events are captured by the element itself.

Testing / Reviewing

Open the MultiSelect story and select an item. Run the Accessibility Checker and ensure no violations are found.
Compare with the latest deployed storybook and ensure the component functions the same and there are no regressions.

Multiselect:
Open and select an item with the keyboard. One esc press should close the menu. The second esc press should clear the selection.

FilterableMultiselect:
Open and select an item with the keyboard. One esc press should close the menu AND clear the input. The second esc press should clear the selection.

ComboBox:
Open and select an item with the keyboard. One esc press should close the menu AND retain the input. The second esc press should clear the input.

netlify · 2023-02-16T17:43:43Z

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`6bd7189`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/640254d7d315910007439c42
😎 Deploy Preview	https://deploy-preview-13173--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2023-02-16T17:43:54Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`6bd7189`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/640254d78fe1bf0008aa768f
😎 Deploy Preview	https://deploy-preview-13173--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

alisonjoseph

Tested everything locally, LGTM!

andreancardona

tested and looks good!

tw15egan · 2023-02-22T18:29:07Z

Going to wait for #13144 before merging

tw15egan · 2023-02-24T15:33:18Z

@alisonjoseph @andreancardona @tay1orjones I had to make some style changes once the Typescript PR merge conflict was resolved. I had to make some tweaks to Fluid Multiselect and the invalid styles, so if you could take a glance at it, let me know if you see any style issues in the various states.

alisonjoseph

LGTM!

* refactor(Dropdown): ariaLabel to aria-label * fix(menu): fix arrow key navigation when onClose is called but not closed (#13195) * fix(menu): only clear registered items when root is closing * fix(menu): auto-cleanup registered items --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(theme): add $icon-interactive token (#13219) * feat(theme): add $icon-interactive token * Update packages/themes/src/tokens/v11TokenGroup.js Co-authored-by: Alison Joseph <[email protected]> * Update packages/themes/src/tokens/__tests__/metadata-test.js Co-authored-by: Alison Joseph <[email protected]> * Update packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap * Update packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap * chore(snapshot): update snapshots --------- Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Francine Lucca <[email protected]> * feat(TextInput): add typescript types (#13142) * feat(TextInput): add typescript types * fix(Text Input): submcompnent workaround + add helperID prop * chore(format): format `Popover`, `Listbox` files (#13284) * chore(format): format Popover file * chore(format): format ListBox files * chore(format): update format command * chore(release): v11.24.0 (#13282) Co-authored-by: tay1orjones <[email protected]> * fix(toggle): make props.labelText optional (#13196) * fix(toggle): make props.labelText optional * docs(toggle): add 'with accessible labels' story * test(toggle): update public api snapshot --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(ListBox): a11y - move filter tag as sibling of menu trigger, esc key improvements (#13173) * fix(MultiSelect): a11y - move filter tag as sibling of menu trigger * fix(Multiselect): remove tag from tab order * fix(FilterableMultiselect): remove clear, tag from tab order * fix(ComboBox): retain input value when menu is open and esc is pressed * fix(FilterableMultiSelect): a few more UX tweaks * style(MultiSelect): update styles to fix invalid issues when focused * style(FluidMultiselect): adjust focus styles when invalid * chore(log): remove console log --------- Co-authored-by: Andrea N. Cardona <[email protected]> * docs(style): add section on authoring inline styles (#13289) * docs(style): add section on authoring inline styles * docs(style): rephrase inline style docs * docs(style): typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(ComboBox): ariaLabel to aria-label (#13273) * refactor(ComboBox): ariaLabel to aria-label * fix: formatting --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Andrea N. Cardona <[email protected]> * fix(tabs): remove max-width (#13247) * fix(tabs): remove max-width * docs(tabs): add max width guidance * docs(tabs): format --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(ListBox): Standardize `ListBox` menu open behavior (#13268) * style(MultiSelect): update styles to fix invalid issues when focused * style(FluidMultiselect): adjust focus styles when invalid * chore(log): remove console log * fix(ListBox): align open behaviors across ListBox components --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Add Typescript annotations to Select, SelectItem and SelectItemGroup (#13235) * refactor(typescript): type annotations on Select* Add Typescript annotations to Select, SelectItem and SelectItemGroup. * fix(lint): removed unused imports Left SelectItem and SelectItemGroup in the imports after using them for testing. Removed. * fix(Select-test): update label to labelText Previously removed label as it was not a property of Select. On recommendation of maintainers reintroduced using labelText. * Apply suggestions from code review Co-authored-by: Andrea N. Cardona <[email protected]> * Follow up to change suggestions --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(FilterableMultiSelect): ariaLabel to aria-label (#13276) Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <[email protected]> * fix(SkeletonText): prevent negative px width values (#13270) Co-authored-by: Alessandra Davila <[email protected]> * feat(Popover): add `isTabTip` prop to `Popover` (#13283) * feat(tabTipPopover): add tabTip to Popover * feat(tabTipPopover): add tab-tip styles, story * test(Popover): add e2e tests * style(Popover): adjust storybook styles * fix(Popover): add new prop to proptypes * chore(snapshot): update snapshots * docs(Popover): add close on esc to story * docs(Popover): fix typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(deps): bump minimist in /packages/react/examples/react-router (#13254) Bumps [minimist](https://github.com/minimistjs/minimist) from 1.2.5 to 1.2.8. - [Release notes](https://github.com/minimistjs/minimist/releases) - [Changelog](https://github.com/minimistjs/minimist/blob/main/CHANGELOG.md) - [Commits](minimistjs/minimist@v1.2.5...v1.2.8) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(StructuredList): ariaLabel to aria-label (#13261) * refactor(StructuredListWrapper): ariaLabel to aria-label * fix(StructuredList test): use 'aria-label' --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(DataTable): add rowIds to the sortRows extra params list (#13236) Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(typescript): add various typescript typings (#13234) * feat(TableToolbar): add typescript typings * feat(TableToolbarAction): add typescript typings * feat(TableToolbarContent): change to `tsx` * feat(TableToolbarMenu): add typescript typings * feat(OverflowMenuItem): add typescript typings * fix: format --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: Francine Lucca <[email protected]> * fix(RadioTile): forward ref to input node (#13130) Forward ref to input node of RadioTile, such that it behaves the same as other form inputs. Co-authored-by: Francine Lucca <[email protected]> * feat: migration examples prefix selectors (#13264) * feat(ContentSwitcher): preliminary unstable refactor * feat: added prefix and id prefix examples * fix: delete content switcher directory * feat: update demos * Update examples/id-prefix/src/App.jsx Co-authored-by: Francine Lucca <[email protected]> * Update packages/react/src/components/IdPrefix/index.js * feat: added docs * fix: update context * fix: yarn install * fix: update context 2 * chore: update yarn packages * chore: udpate yarn carbon/react --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(DataTableSkeleton): 12513 - Add TS types for props (#13245) * feat(DataTableSkeleton): 12513 - Add TS types for props * fix: yarn run format --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: Francine Lucca <[email protected]> * test(datatable): refactor to use RTL (#13294) * chore: wip * chore: wip * test(datatable): refactor to use RTL * chore: typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(modal): aria-label a11y bug (#13242) Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * test(HeaderSideNavItems): add tests (#13303) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * docs(Storybook): update storybook config so actions display properly (#13302) * docs(Storybook): update storybook config so actions display properly * fix(DatePicker): change action names --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(tabs): deprecate light prop (#13262) Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(menu): focus first item when opened (#13277) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(CodeSnippet): a11y tabstop + attributes (#13310) * fix(CodeSnippet): a11y tabstop + attributes * fix(CSS): add Carbon CSS to focus outline * refactor(CodeSnippet): relocate parens * refactor(OverflowMenu): ariaLabel to aria-label (NEW) (#13280) * fix(CodeSnippet): a11y tabstop + attributes * fix(CSS): add Carbon CSS to focus outline * refactor(OverflowMenu): ariaLabel to aria-label NEW * Delete CodeSnippet.js error from a rebase/merge * Delete _code-snippet.scss error from rebase/merge * revert(missingFiles): they'll be ignored on merge --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(test): remove enzyme (#13316) * test(accordion): refactor from enzyme to RTL * chore(test): remove enzyme --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(CodeSnippet): ariaLabel to aria-label (#13274) Co-authored-by: Taylor Jones <[email protected]> * feat(TextArea): add warning state (#13293) * feat(TextArea): add warning state * chore: update snapshots * fix: textarea error bottom border and default value in story * chore: hide resize fluid textarea invalid and warn --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor: convert TextAreaSkeleton to TypeScript (#13275) * refactor: convert TextAreaSkeleton to TypeScript * chore: remove unneeded omit * chore: remove unneeded omit --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(batchToolTips): make tooltips on batch visible (#13328) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(Notification): ariaLabel to aria-label (#13281) * refactor(Notification): ariaLabel to aria-label * fix(Notification): rm stories default dupes * fix(InlineNotification): rm deprecated prop --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(format): tsx formatting --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Jan Hassel <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: Bianca Sparxs <[email protected]> Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com> Co-authored-by: tay1orjones <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: jpsorensen <[email protected]> Co-authored-by: andrew <[email protected]> Co-authored-by: Alessandra Davila <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Chris Knabe <[email protected]> Co-authored-by: GalvinGao <[email protected]> Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: remolueoend <[email protected]> Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Sierra Wetmore <[email protected]> Co-authored-by: Austin <[email protected]>

tw15egan requested a review from a team as a code owner February 16, 2023 17:38

tw15egan requested review from alisonjoseph and andreancardona February 16, 2023 17:38

tw15egan mentioned this pull request Feb 16, 2023

[a11y]: Dropdown MultiSelect button should have role="combobox" instead of button #12596

Closed

2 tasks

tw15egan requested a review from tay1orjones February 16, 2023 20:12

tw15egan changed the title ~~fix(MultiSelect): a11y - move filter tag as sibling of menu trigger~~ fix(ListBox): a11y - move filter tag as sibling of menu trigger, esc key improvements Feb 16, 2023

tw15egan requested a review from mbgower February 16, 2023 20:22

tw15egan force-pushed the mutliselect-tag-refactor branch from 4d7be8a to f4923ff Compare February 17, 2023 13:57

alisonjoseph approved these changes Feb 22, 2023

View reviewed changes

andreancardona approved these changes Feb 22, 2023

View reviewed changes

tw15egan added status: ready to merge 🎉 DO NOT MERGE and removed status: ready to merge 🎉 labels Feb 22, 2023

tay1orjones approved these changes Feb 23, 2023

View reviewed changes

tw15egan force-pushed the mutliselect-tag-refactor branch 2 times, most recently from f4b14aa to 0b7c307 Compare February 24, 2023 15:30

tw15egan requested review from alisonjoseph, tay1orjones and andreancardona February 24, 2023 15:33

tw15egan added status: ready for review 👀 and removed DO NOT MERGE labels Feb 24, 2023

tw15egan force-pushed the mutliselect-tag-refactor branch from a56d94b to 01dc998 Compare February 24, 2023 15:34

tw15egan added 4 commits February 27, 2023 11:12

fix(MultiSelect): a11y - move filter tag as sibling of menu trigger

020b049

fix(Multiselect): remove tag from tab order

7b44a83

fix(FilterableMultiselect): remove clear, tag from tab order

010d1f7

fix(ComboBox): retain input value when menu is open and esc is pressed

6fdfe96

tw15egan added 4 commits February 27, 2023 11:12

fix(FilterableMultiSelect): a few more UX tweaks

ed164b9

style(MultiSelect): update styles to fix invalid issues when focused

8ba5725

style(FluidMultiselect): adjust focus styles when invalid

f9f738a

chore(log): remove console log

6b1bc1f

tw15egan force-pushed the mutliselect-tag-refactor branch from 01dc998 to 6b1bc1f Compare February 27, 2023 16:33

andreancardona and others added 2 commits February 28, 2023 11:58

Merge branch 'main' into mutliselect-tag-refactor

27e024f

Merge branch 'main' into mutliselect-tag-refactor

0cca880

alisonjoseph approved these changes Mar 1, 2023

View reviewed changes

This was referenced Mar 1, 2023

fix(ListBox): Standardize ListBox menu open behavior #13268

Merged

chore(format): format Popover, Listbox files #13284

Merged

tw15egan added 2 commits March 2, 2023 16:15

Merge branch 'main' into mutliselect-tag-refactor

09a8c9f

Merge branch 'main' into mutliselect-tag-refactor

c089160

tay1orjones approved these changes Mar 3, 2023

View reviewed changes

tw15egan added status: ready to merge 🎉 and removed status: ready for review 👀 labels Mar 3, 2023

tw15egan enabled auto-merge (squash) March 3, 2023 19:48

tw15egan added status: ready to merge 🎉 and removed status: ready to merge 🎉 labels Mar 3, 2023

Merge branch 'main' into mutliselect-tag-refactor

6bd7189

tw15egan merged commit e891d19 into carbon-design-system:main Mar 3, 2023

tw15egan mentioned this pull request Mar 16, 2023

[a11y]: MultiSelect - Accesibility checker reports an issue with nested buttons for selected options #13345

Closed

2 tasks

alisonjoseph mentioned this pull request Jun 23, 2023

[a11y]: Port ListBox fixes to v10 #14069

Closed

tw15egan mentioned this pull request Jun 26, 2023

fix(ListBox): backport listbox a11y fixes to v10 #14092

Merged

fbarroso24 mentioned this pull request Jul 12, 2023

Improve changelog to surface behavior changes #14147

Open

tw15egan mentioned this pull request Apr 25, 2024

fix(Multiselect): remove focus when MultiSelect is open #16259

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ListBox): a11y - move filter tag as sibling of menu trigger, esc key improvements #13173

fix(ListBox): a11y - move filter tag as sibling of menu trigger, esc key improvements #13173

tw15egan commented Feb 16, 2023 •

edited

Loading

netlify bot commented Feb 16, 2023 •

edited

Loading

netlify bot commented Feb 16, 2023 •

edited

Loading

alisonjoseph left a comment

andreancardona left a comment

tw15egan commented Feb 22, 2023

tw15egan commented Feb 24, 2023

alisonjoseph left a comment

fix(ListBox): a11y - move filter tag as sibling of menu trigger, esc key improvements #13173

fix(ListBox): a11y - move filter tag as sibling of menu trigger, esc key improvements #13173

Conversation

tw15egan commented Feb 16, 2023 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Feb 16, 2023 • edited Loading

✅ Deploy Preview for carbon-components-react ready!

netlify bot commented Feb 16, 2023 • edited Loading

✅ Deploy Preview for carbon-elements ready!

alisonjoseph left a comment

Choose a reason for hiding this comment

andreancardona left a comment

Choose a reason for hiding this comment

tw15egan commented Feb 22, 2023

tw15egan commented Feb 24, 2023

alisonjoseph left a comment

Choose a reason for hiding this comment

tw15egan commented Feb 16, 2023 •

edited

Loading

netlify bot commented Feb 16, 2023 •

edited

Loading

netlify bot commented Feb 16, 2023 •

edited

Loading