Accessibility: Accessible iframe names

Solves #614 by assigning an accessible title to both iframes used in WordPress Playground. To test, use Axe devtools as described in #614 (comment)
WordPress · Oct 5, 2023 · 0a30dd5 · 0a30dd5
1 parent 909ba4c
commit 0a30dd5
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/packages/playground/remote/remote.html b/packages/playground/remote/remote.html
@@ -47,6 +47,7 @@
 	<body class="is-loading">
 		<iframe
 			id="wp"
+			title="The WordPress site"
 			sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-downloads"
 		></iframe>
 		<script type="module">

diff --git a/packages/playground/website/src/components/playground-viewport/index.tsx b/packages/playground/website/src/components/playground-viewport/index.tsx
@@ -59,7 +59,7 @@ const JustViewport = function LoadedViewportComponent({
 	return (
 		<div className={css.fullSize}>
 			<iframe
-				title="Playground Viewport"
+				title="WordPress Playground wrapper (the actual WordPress site is in another, nested iframe)"
 				className={css.fullSize}
 				ref={iframeRef}
 			></iframe>