search

WordPress / playground-tools

GNU General Public License v2.0
127 stars 38 forks source link

Playground block: A11Y: Add skip links for loaded preview/iFrame #293

Open alexstine opened 3 weeks ago

alexstine commented 3 weeks ago

Test page: https://learn.wordpress.org/test/wordpress-playground-block-plugin-test-page/

After the Playground iFrame is loaded, there is no way for users to easily skip it. Could we append a "Skip passed iFrame" link or similar? Code structure could look something like this.

<span class="accessible-text">Beginning of Playground preview</span>
<a href="#">Skip Playground Preview</a>
<span class="accessible-text" tabindex="-1">End of Playground preview</span>

Focus could land on that last span with the tabindex="-1" set.

This will offer users to easily skip the frame since the content within the frame will also have semantics exposed to screen reader users such as headings and landmarks which could be used to skip content in other situations.

brandonpayton commented 3 days ago

A number of these accessibility issues were closed via "fixes X" commit messages, but it would be better if we leave these open until we tag a new release and @alexstine confirms they are indeed fixed. So I've reopened all of them until then.

alexstine commented 3 days ago

@brandonpayton I won't know until I have a place to test it.

brandonpayton commented 3 days ago

@alexstine the changes haven't been included in a new plugin release yet. Once there is a new release of the interactive-code-block plugin, will that be sufficient for you to test, or does something else need to be updated in WP.org infrastructure in order to test the new release? (I'm not very familiar with how things are set up for WordPress.org or learn.wordpress.org)

alexstine commented 3 days ago

@brandonpayton Once the plugin is released, let's ping Adam and see if he can sync the new changes to our test page on Learn.

Thanks.