react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

fix(#5877): Picker in TableView creates a focus trap with arrow key navigation

Open majornista opened this issue 4 months ago • 3 comments

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:

  1. 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
  2. The example app consists of a TableView in which the last row has a Picker in the second cell.
  3. Press Tab to navigate and set focus to the first row in the TableView.
  4. Press ArrowDown until the last row, containing the Picker has focus.
  5. Press ArrowRight to focus the Switch in the first cell.
  6. Press ArrowRight again to focus the Picker in the second cell.
  7. Press ArrowRight to move focus to the next cell, containing the word "Three."
  8. The value of the Picker does not change as the focus moves to the next cell.
  9. Press ArrowLeft to focus the Picker in the second cell again.
  10. Press ArrowLeft again to move focus to the previous cell.
  11. Focus moves to the Switch in the first cell, and the value of the Picker does not change.

🧢 Your Project:

Adobe/Accessibility

majornista avatar Feb 14 '24 23:02 majornista