Breadcrumbs should not automatically add aria-current="true" to last item

[rmgryan]

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

[snowystinger]

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.

[rmgryan]

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.

[snowystinger]

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.