diff --git a/js/adapt-vimeo.js b/js/adapt-vimeo.js index 81202fb..df37555 100644 --- a/js/adapt-vimeo.js +++ b/js/adapt-vimeo.js @@ -28,7 +28,33 @@ class Vimeo extends ComponentView { setupPlayer() { this.vimeoView = this.addSubview(VimeoView, this.model.get('_media')); - this.listenToOnce(this.vimeoView, 'ready', this.setReadyStatus); + this.listenToOnce(this.vimeoView, 'ready', this.onVimeoViewReady); + } + + onVimeoViewReady() { + this.setIframeAccessibleName(); + this.setReadyStatus(); + } + + /** + * Give the player iframe an author-controlled, localisable accessible name. + * The Vimeo library otherwise only sets a `title` from the video's own + * Vimeo title, which authors cannot control or localise. + * + * When a displayTitle is set it renders as a visible component heading, so + * the iframe references that heading via aria-labelledby rather than + * duplicating the string. Otherwise the non-visible title field is used + * directly as an aria-label. Mirrors adapt-youtube#48. + */ + setIframeAccessibleName() { + const iframe = this.vimeoView.player?.element; + if (!iframe) return; + if (this.model.get('displayTitle')) { + iframe.setAttribute('aria-labelledby', `${this.model.get('_id')}-heading`); + return; + } + const title = this.model.get('title'); + if (title) iframe.setAttribute('aria-label', title); } setupEventListeners() {