`aria-current` on last breadcrumb item

[thany]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

I would like to be able to place aria-current="page" on the last <li> in a Breadcrumbs component. Currently, the <li> are completely autogenerated and don't seem to be customisable.

Perhaps a prop to control which item gets this attribute, and/or a way to customise the generated <li>s so devs can pick and choose which aria attribute to add where.

The default behaviour I would like to see added, is aria-current="page" on the last <li>. Any customisation should probably undo-and-override this.

Examples 🌈

That one should become <li class="MuiBreadcrumbs-li" aria-current="page">.

Motivation 🔦

Accessibility improvements.

[PunitSoniME]

@thany

I have partially fixed your issue, as you already know breadcrumb links are generated dynamically, I can add a fix which can add aria-current='page' at the last element

If I get a green signal, I can push the changes to review.

[thany]

Thank you!

I do have to warn you, I'm only like 90% sure that this is the most correct way to indicate the "current" item in the breadcrumbs. There are a couple of other similar ways, and not everyone might agree. Still, it's better than nothing, innit.

[mnajdova]

Can't you do this - https://codesandbox.io/s/keen-dewdney-61hxsk ? I don't understand what is the issue.

[thany]

Can't you do this - https://codesandbox.io/s/keen-dewdney-61hxsk ? I don't understand what is the issue.

This exactly underlines my point - the internet doesn't have concensus on how to deal with this. It doesn't feel right to put aria-current on just a random <p>. If you think it's right, please go for it and test well.

But also, the last breadcrumb item might not have to be a Typography component; it could just be plain text, and where do you put an attribute on plain text? 🙂