adobe
CardView persistedKeys for focus and scrolling
Closes
Do we want to add a FocusRing around CardView the way ListView has one? This was meant to just have CardView support the focus improvements of persistedKeys, but that change was for adding a FocusRing around ListView.
Followup to https://github.com/adobe/react-spectrum/pull/3168
Adding support to CardView layouts to support persistedKeys which will keep focused cards in the DOM when scrolling.
I might have to recreate this as a cherry pick after #3168 is merged. Might be hard to review at this time. packages/@react-spectrum/card/src/BaseLayout.tsx and packages/@react-spectrum/card/src/GridLayout.tsx were the only changes for the followup.
✅ 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:
Turn on browser dev tool NerdeFocus.
Goto a CardView story with scrolling, focus a card. Scroll the view so that card is out of the view.
- Confirm the card still has focus and focus has not reverted to CardView.
- Confirm that the Card is in the DOM in the correct order compared to the viewable cards.
Use arrow keys or other controls to navigate around get expected behavior like scrolling to the newly focused card.
Test all three layout types.
🧢 Your Project:
RSP
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉