[a11y] Consider accessibility feature(s)

[blackfalcon]

Feature Description

Please review code:

auro-tail/src/auro-tail.js

Lines 253 to 265 in bb21f3e

	// Accessible name
	const ariaLabel = badge
	? i18nTemplate(ARIA_LABELS.tailLiveryWithBadge, { badgeAlt: badge.alt })
	: ARIA_LABELS.tailLivery;
	// Tail content
	const tailContent = html`
	<div class="border">
	<div class="container" part="container" role="img" aria-label=${ariaLabel}>
	<${this.iconTag} category="logos" name="tail-${this.tail.toUpperCase()}"></${this.iconTag}>
	</div>
	${badge?.icon ? html`<div class="badge">${badge.icon()}</div>` : null}
	</div>

Summary

The current auro-tail may create accessibility barriers: developers can not mark it as decorative, all tails share the same generic name, and the OneWorld badge lacks an accessible name and is announced only as “image.” These issues lead to noisy, unhelpful, or missing information for screen reader users.

Issues & Recommendations

1. Option to mark the tail as decorative

Many uses of the tail graphic are purely presentational, but the component forces a role="img" with an accessible name. Screen readers always read it.

Fix: Add a decorative attribute that removes role="img" and sets aria-hidden="true" so developers can opt out of announcing the image.

This SHOULD happen when auro-tail is used with the href attribute that injects auro-hyperlink and the author provides a string of text for the link. The string is the preferred accessible name for the link.

If a string of text is NOT provided, the author MUST have the ability to edit the accessible name for the element via the aria-label attribute since the images are SVGs with aria-hidden="true" set.

2. All tails use the same aria-label (“Tail livery”)

Different airlines sound identical to screen readers, and the component doesn’t expose the brand information visually represented by the tail.

Fix: By default, include the airline name in the accessible name. Consumers may also be provided a way to manually edit the aria-label content.

3. OneWorld badge announces only as “image”

The injected badge icon has no accessible name, so screen readers get no information.

Fix: When this icon is added to the UI, the current aria-label is updated to reflect this. Please add aria-hidden="true" to the OneWorld image.

Additional context

No response

Exit criteria (To be determined by the Auro team)

No response