Fix accessible names for embed youtube link (#165)

Co-authored-by: Chris Swithinbank <[email protected]>
delucis · Nov 3, 2024 · a97b51b · a97b51b
1 parent f976d8d
commit a97b51b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/sixty-oranges-sneeze.md b/.changeset/sixty-oranges-sneeze.md
@@ -0,0 +1,5 @@
+---
+"@astro-community/astro-embed-youtube": patch
+---
+
+Fixes missing accessible name for `<YouTube>` component play button
diff --git a/packages/astro-embed-youtube/YouTube.astro b/packages/astro-embed-youtube/YouTube.astro
@@ -46,7 +46,7 @@ const href = `https://youtube.com/watch?v=${videoid}`;
 	style={`background-image: url('${posterURL}');`}
 >
 	<a {href} class="lty-playbtn">
-		<span class="lyt-visually-hidden">{attrs.playlabel}</span>
+		<span class="lyt-visually-hidden">{attrs.playlabel || 'Play'}</span>
 	</a>
 </lite-youtube>
 

diff --git a/tests/astro-embed-youtube.mjs b/tests/astro-embed-youtube.mjs
@@ -21,6 +21,7 @@ test('it should render a lite-youtube element', async () => {
 	);
 	assert.ok(playButton);
 	assert.is(playButton.href, `https://youtube.com/watch?v=${videoid}`);
+	assert.is(playButton.textContent?.trim(), 'Play');
 });
 
 test('it parses a youtube.com URL', async () => {