react-spectrum
react-spectrum copied to clipboard
adobe
Breadcrumbs should not automatically add aria-current="true" to last item
Provide a general summary of the issue here
Consider a use case where Breadcrumbs are used with fields like aria-current="step" like on a checkout page. The current implementation automatically assumes the most common use of breadcrumbs and sets the final item to current and disabled even though that does not fit all valid use cases of breadcrumbs.
🤔 Expected Behavior?
Users should be able to specify isCurrent and isDisabled directly instead of as renderProps. This gives the user full control over Breadcrumb rendering instead of being stuck with default implementation.
😯 Current Behavior
Breadcrumbs render the last item automatically as current and disabled.
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/peaceful-voice-696lzf
Version
1.2.1
What browsers are you seeing the problem on?
Firefox, Chrome, Safari, Microsoft Edge, Other
If other, please specify.
No response
What operating system are you using?
Windows, Max, Linux
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
That sounds more like a steplist which has some pretty different behaviors. We've started one in our React Spectrum implementation along with some early hooks. https://github.com/adobe/react-spectrum/tree/main/packages/%40react-spectrum/steplist/src https://github.com/adobe/react-spectrum/tree/main/packages/%40react-aria/steplist
They aren't ready for docs yet, they are very early stage. Feedback is welcome on it though.
I think having a steplist component in spectrum is a good idea. It makes sense that a user might want to have different types of styles and properties that determine functionality specific to a steplist. Are there any sources from w3c/mozilla/etc that define steplist I can check out? I originally looked to see if there was a better pattern I should be implementing before posting an issue but didn't find an explicit one.
Because of that, I do think the base functionality of breadcrumbs for the react-aria-components library is still too restrictive and focused on a specific implementation of breadcrumbs. Please check out the description from Mozilla on aria-current attribute here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
Specifically this point:
In a breadcrumb list, when a link within a set of pagination links is styled to indicate the user is currently on that page, aria-current="page"should be set on that link. In a multi step based process with a step indicator such as a multi-page survey or a multi step checkout or registration process, when the current step icon is visually different to represent that it is the current step, that icon's container should have aria-current="step" for assistive technology users who may not be able to "see" the visual difference.
The w3c pattern only mentions the page strategy but also feels a little incomplete: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/#:~:text=Breadcrumb%20Pattern-,About%20This%20Pattern,a%20website%20or%20web%20application.
I found this issue https://github.com/w3c/aria-practices/issues/92 with a couple good points/distinctions. So I'm not sure any of the existing patterns fill it yet. Both Tabs and Breadcrumbs seem to come close.
Going to close this since it would be a breaking change. I think this use case is less common since generally your site navigation has a tree structure and isn't linear.
