react-spectrum
react-spectrum copied to clipboard
adobe
fix(#2592): Breadcrumbs lose focus when a breadcrumb link is clicked to become the current page
Closes #2592
✅ Pull Request Checklist:
- [x] Included link to corresponding React Spectrum GitHub Issue 2592.
- [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 Storybook story: https://reactspectrum.blob.core.windows.net/reactspectrum/fe4b4db6bb1ee0203de7740c99dfc98985e07a8d/storybook/index.html?path=/story/breadcrumbs--dynamic-breadcrumbs-with-focus-management
- Move keyboard focus to one of the links preceding the current location.
- Activate the link to update the current location.
- Focus should get set to the new current location, which is a "disabled" link with
aria-currentand text matching the text for the link you clicked. - You can reset the breadcrumbs to how they were at the start using the "Reset" button.
- Repeat for items within the dropdown menu.
🧢 Your Project:
Adobe/Accessibility
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
This solution has a couple potential issues. I experimented with an alternate option in #2709 (still needs some work)
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! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Functionality seems good to me, but what if the user wants to move focus somewhere else onAction?
@LFDanLu I think I may have been able to resolve this with 5f51eb50af7ab23c41f9176fc7bb530ff7e2bdb9.
Build successful! 🎉
Build successful! 🎉
Just a heads up. I looked this over, something about it still doesn't sit right with me. I attempted to make it more like useSelect, however, I was unable to get it working. Will have to come back to it again.
I tried to do something similar to useSelect as well, but I think Breadcrumbs are a somewhat different case, because whether the focus is within the Breadcrumbs will be true when focus lands on a BreadcrumbItem itself, or when focus is within the Dropdown menu. The only case where the current BreadcrumbItem should need to focus itself is after selecting an item from the menu; the React key takes care of maintaining focus otherwise. If you close the menu without selecting anything, focus should restore the action menu button.
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉