react-spectrum
react-spectrum copied to clipboard
fix(#5877): Picker in TableView creates a focus trap with arrow key navigation
Closes #5877
✅ Pull Request Checklist:
- [x] Included link to corresponding React Spectrum GitHub Issue 5877.
- [x] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [x] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [x] Looked at the Accessibility Practices for this feature - Aria Practices
📝 Test Instructions:
- Open the Storybook example at https://reactspectrum.blob.core.windows.net/reactspectrum/5ea877f566df0d8fbd9543963778c4c21bfa0f10/storybook/index.html?path=/story/tableview--focusable-cells&providerSwitcher-express=false&strict=true
- The example app consists of a TableView in which the last row has a Picker in the second cell.
- Press Tab to navigate and set focus to the first row in the TableView.
- Press ArrowDown until the last row, containing the Picker has focus.
- Press ArrowRight to focus the Switch in the first cell.
- Press ArrowRight again to focus the Picker in the second cell.
- Press ArrowRight to move focus to the next cell, containing the word "Three."
- The value of the Picker does not change as the focus moves to the next cell.
- Press ArrowLeft to focus the Picker in the second cell again.
- Press ArrowLeft again to move focus to the previous cell.
- Focus moves to the Switch in the first cell, and the value of the Picker does not change.
🧢 Your Project:
Adobe/Accessibility