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 1 year 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

## API Changes

unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'identifier', name: 'Column' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' }

rspbot avatar Mar 28 '24 18:03 rspbot

I have an alternative solution that is less specific to picker. Basically the same thing as we already do for the up/down arrows. #6116

devongovett avatar Mar 28 '24 18:03 devongovett