palantir/blueprint

MultiSelect and MultiSelect2 interrupts a11y focus order

Open

#5457 opened on Jul 21, 2022

View on GitHub
 (6 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Browser: SafariP3Type: bughelp wanted

Description

Environment

  • Package version(s): @blueprintjs/core ^4.6.1, @blueprintjs/select: ^4.5.0
  • Operating System: macOS Monterey Version 12.4
  • Browser name and version: Safari Version 15.5 (17613.2.7.1.8)

Code Sandbox

Link to a minimal repro (fork this code sandbox): https://blueprintjs.com/docs/#select/multi-select2 https://blueprintjs.com/docs/#select/select2

Steps to reproduce

  1. Set focus on the example MultiSelect2 component container div via mouse click
  2. Cycle through page elements via tab key

Actual behavior

Focus gets reset to the page's first focusable element.

blueprint-MultiSelect2

Expected behavior

The next focusable element within the DOM hierarchy should be focused as in the Select2 component.

blueprint-Select2

Contributor guide

Tech stack
typescriptreact
Domain
accessibilityfrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React knowledgeAccessibility (a11y) basicsFamiliarity with Blueprint components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the focus management logic in MultiSelect2 component, likely located in packages/select/src/components/. Compare with the Select2 implementation to identify where focus gets reset to the first focusable element. Use browser DevTools to trace focus events during tab cycling. Pay attention to TagInput's onRemove and onAdd callbacks as they may affect focus.