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.
When the skip-link is clicked, it focuses "End of Playground Preview" which is revealed at the bottom of the preview pane when focused.
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".
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.
The "Skip Playground Preview Iframe" link is shown when focused.
When the skip-link is clicked, it focuses "End of Playground Preview" which is revealed at the bottom of the preview pane when focused.
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".