Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
alexstine opened this issue Jun 4, 2024 · 10 comments · Fixed by #308
Open

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

alexstine opened this issue Jun 4, 2024 · 10 comments · Fixed by #308
Assignees
Labels

Comments

@alexstine
Copy link

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
Copy link
Member

brandonpayton commented Jun 27, 2024

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
Copy link
Author

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

@brandonpayton
Copy link
Member

brandonpayton commented Jun 27, 2024

@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
Copy link
Author

@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.

@jonathanbossenger
Copy link

Hi folks.

@brandonpayton, once the new version of the plugin has been released in the WordPress.org plugin directory, I usually ask one of the meta team folks to deploy the changes. This usually requires a full deployment of the entire .org network, so depending on what else needs to get done, this can happen in a day or over a few days.

We have a testing issue in the Learn.WordPress.org repo that we're using to test these fixes. Would you be able to ping me there once there's a new version in the plugin directory, and then I'll wrangle getting it deployed to Learn?

@brandonpayton
Copy link
Member

once the new version of the plugin has been released in the WordPress.org plugin directory, I usually ask one of the meta team folks to deploy the changes.

@jonathanbossenger Thank you for explaining how updating typically works.

We have a WordPress/Learn#2352 that we're using to test these fixes. Would you be able to ping me there once there's a new version in the plugin directory, and then I'll wrangle getting it deployed to Learn?

Sounds great! I'll ping you there once there's a new version.

@alexstine
Copy link
Author

@brandonpayton Is there any way we can remove these from the new window view? If not, that's okay. These are really only needed for the iFrame version only.

@brandonpayton
Copy link
Member

@brandonpayton Is there any way we can remove these from the new window view? If not, that's okay. These are really only needed for the iFrame version only.

@alexstine, it's no problem to remove the skip link. Should the "Beginning of Playground Preview" and "End of Playground Preview" markers remain in place, or should they be removed as well?

@alexstine
Copy link
Author

@brandonpayton Those can also be removed. Thanks.

brandonpayton added a commit that referenced this issue Jul 23, 2024
…ll-page mode (#333)

## What?

This PR removes the skip-preview-link and the begin/end preview markers.

## Why?

The skip-preview-link and the begin/end preview markers are not
necessary in full-page mode because the Playground block is the only
thing on the page.

Related to #293

## Testing Instructions

- Run `npx nx dev wordpress-playground-block`
- View a post containing a Playground block
- Inspect the Preview iframe in the dev tools, and note the presence of
the skip link and begin/end markers as siblings to the preview iframe
- Click "Open in New Tab" to open the block in full page mode
- Inspect the Preview iframe in the dev tools, and note the absence of
the skip link and begin/end markers as siblings to the preview iframe
@brandonpayton
Copy link
Member

@brandonpayton Those can also be removed. Thanks.

👍 Got it. Thanks. Those are removed by #333 which will be included when we tag a new release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3 participants