react-spectrum
react-spectrum copied to clipboard
adobe
Table Column Resize via screen readers
Closes https://github.com/adobe/react-spectrum/issues/3028
Splits the MenuTrigger from the Header. This makes for some better more reasonable styling and should improve screen reader announcements as well.
I've changed the role=separator to an input type=range, just changing to slider wasn't enough, TalkBack wouldn't fire onChange events with swipe gestures. This brings it more in line with SliderThumb. (See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/slider/src/SliderThumb.tsx#L46 for rendering and https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/slider/src/useSliderThumb.ts#L179 for aria similarities)
As a result, I've been able to simplify the aria-* attributes on the input, some styling needed changes as well to compensate for the new structure.
I've included a new prop to useTableColumnHeader, optional so backwards compatible, non-breaking hasMenu which will help us in the future when we allow people to pass in their own menu items. It also removes knowledge of resizing from useTableColumnHeader.
I've hooked up all the id's for better screen reader announcements, the resizer will now be labelled by the column header. This helps with the entire table announcing again as well.
I've limited the max value of the width from Infinity to the max safe integer, that's all we can really support anyways, and a max value of Infinity causes TalkBack to stop firing onChange.
Open issues: There is an issue where VO reads off a large negative number when focusing the resizer that I haven't been able to solve yet. FF still doesn't display focus ring for mouse users
✅ Pull Request Checklist:
- [ ] Included link to corresponding React Spectrum GitHub Issue.
- [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [ ] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [ ] Looked at the Accessibility Practices for this feature - Aria Practices
📝 Test Instructions:
🧢 Your Project:
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉