Carbon: Improving Breadcrumb accessibility

[carmacleod]

Please see the APG pattern for Breadcrumb and consider revising the Carbon Breadcrumb in the following ways (that are shown in the APG example):

• use a list (_ordered_ list is the most semantically correct, because the order of the links matters) to contain the links (use css to hide the bullets and make the list horizontal). The advantage of this is that a screen reader can tell the user how many links are in the breadcrumb (i.e. it counts the items in the list. It would not count the children of a div because there is no semantic reason to do so).
• add aria-current="page" to the final link in the breadcrumb, so that screen readers can tell the user that this is the breadcrumb's current page.

[joshblack]

cc @dakahn

[dakahn]

Hi @carmacleod 👋🏼 Great great suggestions. Thanks for pointing out the issues with the current breadcrumb. I'll assign this to myself.

[snidersd]

@dakahn Also be sure the breadcrumb is in a navigation landmark region. The latest version in the Carbon sandbox is in main and it should be nav and have an aria-label="breadcrumb".

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[dakahn]

v10 breadcrumb is still a valid candidate for a refactor into an ordered list. keeping this open