Playground block: A11Y: Add link to skip preview (#308)

## What and Why?

Offer a skip link so users using assistive technology and
keyboard-driven workflows have an opportunity to skip over the
Playground preview iframe.

Fixes #293

## How?

This PR adds a number of items that are hidden visually but shown if
they receive focus.
- Text noting the "Beginning of Playground Preview"
- A link "Skip Playground Preview Iframe"
- Test noting "End of Playground Preview"

The "Skip Playground Preview Iframe" link is shown when focused.
![Screenshot 2024-06-14 at 2 02
55 PM](https://github.com/WordPress/playground-tools/assets/530877/7820b51c-a3d1-4a2c-b6d3-07d29b36bd3b)

When the skip-link is clicked, it focuses "End of Playground Preview"
which is revealed at the bottom of the preview pane when focused.
![Screenshot 2024-06-14 at 2 03
18 PM](https://github.com/WordPress/playground-tools/assets/530877/09baa829-8891-4888-ae91-4502948ec321)

## Testing Instructions

In both the editor and front end, test working with an instance of the
block by focusing the "Run" button, tab to the next link which is "Skip
Playground Preview", click it, and confirm focus is moved to "End of
Playground Preview".

packages/wordpress-playground-block/src/components/playground-preview/index.tsx

@@ -117,6 +117,7 @@ export default function PlaygroundPreview({
 	});
 
 	const iframeRef = useRef<HTMLIFrameElement>(null);
+	const afterPreviewRef = useRef<HTMLSpanElement>(null);
 	const playgroundClientRef = useRef<PlaygroundClient | null>(null);
 	const fileMgrRef = useRef<FileManagerRef>(null);
 	const codeMirrorRef = useRef<any>(null);
@@ -517,6 +518,21 @@ export default function PlaygroundPreview({
 					</div>
 				)}
 				<div className="playground-container">
+					<span className="screen-reader-text">
+						Beginning of Playground Preview
+					</span>
+					<a
+						href="#"
+						className="screen-reader-text"
+						onClick={(event) => {
+							event.preventDefault();
+							if (afterPreviewRef.current) {
+								afterPreviewRef.current.focus();
+							}
+						}}
+					>
+						Skip Playground Preview
+					</a>
 					{!isLivePreviewActivated && (
 						<div className="playground-activation-placeholder">
 							<Button
@@ -556,6 +572,13 @@ export default function PlaygroundPreview({
 							className="playground-iframe"
 						></iframe>
 					)}
+					<span
+						className="screen-reader-text wordpress-playground-end-of-preview"
+						tabIndex={-1}
+						ref={afterPreviewRef}
+					>
+						End of Playground Preview
+					</span>
 				</div>
 			</section>
 			<footer className="demo-footer">

packages/wordpress-playground-block/src/style.scss

@@ -27,6 +27,12 @@
 		cursor: pointer;
 	}
 
+	.screen-reader-text.wordpress-playground-end-of-preview,
+	.screen-reader-text.wordpress-playground-end-of-preview:focus {
+		top: initial;
+		bottom: 5px;
+	}
+
 	.demo-container {
 		display: flex;
 		box-shadow: #03254b47 0px 12px 50px 0px;