Fix: Add aria-label to Vimeo iframe for screen readers (fixes #55)

[swashbuck]

Fixes #55

Fix

• Give the Vimeo player <iframe> an author-controlled, localisable accessible name derived from the component's displayTitle (falling back to title).

Notes

The iframe is created at runtime by the Vimeo player library, which only sets a title attribute from the video's own Vimeo title — authors cannot control or localise it. The accessible name is now applied after the player's ready event, on vimeoView.player.element.

When displayTitle is set it renders as a visible component heading, so the iframe references that heading via aria-labelledby="{_id}-heading" rather than duplicating the string. When only the non-visible title field is set, it is applied directly as an aria-label. This mirrors the approach agreed in adapt-youtube#48.

Relevant WCAG success criterion: 4.1.2 Name, Role, Value. Nothing is set when neither displayTitle nor title is present.

Testing

1. Add a Vimeo component with a displayTitle set.
2. View the page and inspect the <iframe> inside .vimeo__widget.
3. Confirm it has aria-labelledby pointing at the component heading ({_id}-heading).
4. With title set but displayTitle empty, confirm aria-label is applied instead.
5. With a screen reader, confirm the iframe is announced using the component's title.

Posted via collaboration with Claude Code

[swashbuck]

Updated to align with the accessible-name approach agreed in adaptlearning/adapt-youtube#48: when displayTitle is set the iframe references the visible component heading via aria-labelledby="{_id}-heading" (rather than duplicating the string in aria-label), falling back to aria-label from the non-visible title field otherwise.

Posted via collaboration with Claude Code