No accessible text for 'Home' link in breadcrumbs

There's no link prop on the icon, so there shouldn't be a a prop for alt text I think? AFAIK the icon only requires alt text if it's linking, otherwise it is by definition decorative?

The MR from @jacktonkin looks good to me as it addresses WCAG 2.2 - 1.1.1 Non-text content which relates to non-decorative icons requiring alt text. It ensures the icon has a optional prop to allow it to be populated with meaningful alt text (e.g. "Home") if it exists and treated as decorative if not.

Furthermore it resolves the issue of missing link text, as screen readers can now infer this from the icon alt text.

I retested the MR with the Editoria11y module enabled and the issue was shown to be resolved.

If no one else spots any issues, the MR seems fine to me - though the branch is behind `1.x` now and would need a rebase before it can be merged.

All breadcrumb icons are implemented as SVGs using icon components, and each SVG includes the attribute aria-hidden="true". Therefore, they should not raise any accessibility issues. Additionally, I am not encountering any errors related to the breadcrumb home icon.

The icon in the breadcrumb cannot be edited in the UI. The alt text needs to be set directly in the template.

Adding a separate prop for alt text should not be done as part of this issue, it is out of scope.

I understand that allowing icon alt text is out of scope for this issue, and that we should specifically address the missing link text for the home breadcrumb.

I've therefore submitted a new merge request MR !194 that applies an aria-label attribute to the home link for review.

@yeebot thank you! So just to confirm, if the aria-label is applied, there is no need for alt text?

Hi @pameeela - yes, applying aria-label to a link overrides any text within the link and is considered a valid WCAG 2.2 Technique for providing link purpose when the link's content is insufficient.

In this case, the contents of the home link in the breadcrumb is insufficient because it only contains an SVG icon that is being completely hidden from assistive technology. For context, the UI Icons module allows icons to have alt text but if this is not provided, the markup defaults to <svg aria-hidden="true" ...>...</svg>. This will always be the case for the Mercury Icon component as it does not use the alt parameter. (I'm not sure if this was intentional as I see the component icon.twig file already makes reference the alt parameter used by the UI Icons module twig function, but this is missing from the icon.component.yml props which appears to be an inconsistency we could address/prioritise separately. I’m happy to raise an issue if there’s consensus).

Regardless, I believe the use of aria-label on the link is the more robust solution here, given my understanding that assistive technology support for SVGs may be inconsistent at this point in time.

Just a quick tweak to output the breadcrumb home link text within the link and visually hidden with sr-only as it is preferable to avoid relying on aria when a native solution is possible.

Thanks @yeebot for pushing this one forward, sorry it took so long to review!