Fix: Add aria-label to YouTube iframe for screen readers (fixes #22)

[swashbuck]

Fixes #22

Fix

• Add an author-controlled, localisable aria-label to the YouTube <iframe>, taken from the component's displayTitle (falling back to title).

Notes

Previously the iframe had no author-set accessible name. The only name was a title attribute injected at runtime by the YouTube widget API, set to the video's own YouTube title, which authors cannot control or localise. The new aria-label takes precedence in the accessible name computation, so screen readers announce the component's title instead.

Per the discussion on #22, aria-label is used rather than title (as title behaves inconsistently on iframes). This mirrors the approach already used in adapt-contrib-media (adaptlearning/adapt_framework#2822). Relevant WCAG success criterion: 4.1.2 Name, Role, Value (technique H64).

The label is only emitted when displayTitle or title is set, so no empty aria-label="" is produced.

Testing

1. Add a YouTube component with a displayTitle set.
2. View the page and inspect the rendered <iframe> inside .youtube__widget.
3. Confirm it has aria-label matching the component's displayTitle.
4. With a screen reader, confirm the iframe is announced using that title.

Posted via collaboration with Claude Code

[kirsty-hames]

This works as expected thanks @swashbuck 👍 Testing with voiceOver on macOS

As a suggestion, aria-labelledby is typically used when there is visible text associated on a page. If there is no content that can be referenced to create an accessible name, the aria-label attribute should be used instead. Reference from MDN.

For example:
{{#if displayTitle}}aria-labelledby="{{_id}}-heading"{{else}}{{#if title}}aria-label="{{title}}"{{/if}}{{/if}}

[swashbuck]

Thanks @kirsty-hames — agreed, and I've pushed a change to use aria-labelledby. Since core's HeadingView injects id="{{_id}}-heading" into the visible title, this references the on-screen heading rather than duplicating the string.

Kept aria-label for the title fallback, as that field isn't rendered on-screen so there's no element to reference:

{{#if displayTitle}}aria-labelledby="{{_id}}-heading"{{else}}{{#if title}}aria-label="{{title}}"{{/if}}{{/if}}

Posted via collaboration with Claude Code

[github-actions]

🎉 This PR is included in version 3.3.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀