Test Playground Block on Learn WordPress.

[jonathanbossenger]

Once #2264 is merged and deployed, let's create a test/example lesson in preview mode, and test the playground block.

Test page

You can test the playground block in both default and code view mode at the following URL

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

Issues list

• Playground block: A11Y: Add skip links for loaded preview/iFrame playground-tools#293
• Playground block: A11Y: Remove duplicate main landmarks playground-tools#292
• Playground block: A11Y: Powered by link needs spacing playground-tools#291
• Playground block: A11Y: Use correct ARIA specification for autocomplete playground-tools#289
• Playground block: A11Y: Use better labels for buttons playground-tools#288
• Playground block: A11Y: Unlabeled button in code editor playground-tools#286
• Playground Block: Add a link to launch a full instance playground-tools#279
• Playground Block: A11y: Add text documentation for keyboard exit of CodeMirror playground-tools#316
• Playground block: A11Y: Difference between "Run" and "Activate Live Preview"? playground-tools#290
• Playground block: Hide open-in-new-tab arrow icon from screen readers playground-tools#330
• Playground block: Mark code editor input field as readonly when it is read only playground-tools#331
• Playground block: Dismissing exit-editor-with-keyboard tip should trigger a spoken announcement playground-tools#343
• Playground block: open-in-new-tab focus order is visually out-of-sequence playground-tools#344

[jonathanbossenger]

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

[brandonpayton]

Hi @jonathanbossenger, a new version of the Playground block (interactive-code-block) has been released (v0.2.11) and contains updates to address the following issues:

• Playground block: A11Y: Add skip links for loaded preview/iFrame playground-tools#293
• Playground block: A11Y: Remove duplicate main landmarks playground-tools#292
• Playground block: A11Y: Powered by link needs spacing playground-tools#291
• Playground block: A11Y: Use correct ARIA specification for autocomplete playground-tools#289
• Playground block: A11Y: Use better labels for buttons playground-tools#288
• Playground block: A11Y: Unlabeled button in code editor playground-tools#286
• Playground Block: Add a link to launch a full instance playground-tools#279

Most of these issues are left open until we can confirm they are indeed fixed.

Today, the remaining issues are:

• Playground Block: A11y: Add text documentation for keyboard exit of CodeMirror playground-tools#316
• Playground block: A11Y: Difference between "Run" and "Activate Live Preview"? playground-tools#290 -- this one isn't 100% solvable. I've already added different descriptions to help disambiguate the buttons, but we can do a bit more.

[jonathanbossenger]

Thanks @brandonpayton

@alexstine I can confirm that this version of the playground block is active on the Learn site, and we can test this on the test page.

Do you have some time in the coming weeks to test the issues that @brandonpayton has linked in the comment above?

[alexstine]

@brandonpayton Two more small issues.

1. Could you please hide the arrow icon to screen readers for the Open in New Tab button? Looks like you are using the :after selector to add it so you could either add it in a span with aria-hidden or simply add aria-label="Open in New Tab" to the button.
2. For the read-only files, awesome that the button communicates that but the input field does not. Think you can open an upstream PR to get aria-readonly or HTML5 readonly support?

This has come a long way, thanks for the hard work on it.

[brandonpayton]

@alexstine, thanks for your review and continued feedback. I'm glad this is trending in the right direction!

The two new issues are logged, and I'm working on them next:

• Playground block: Hide open-in-new-tab arrow icon from screen readers playground-tools#330
• Playground block: Mark code editor input field as readonly when it is read only playground-tools#331

[jonathanbossenger]

Thanks @brandonpayton

[brandonpayton]

Hi @jonathanbossenger, a new version of the Playground block (interactive-code-block) has been released (v0.2.12) and contains updates to address the following issues:

• Playground block: A11Y: Add skip links for loaded preview/iFrame playground-tools#293
• Playground block: Hide open-in-new-tab arrow icon from screen readers playground-tools#330
• Playground block: Mark code editor input field as readonly when it is read only playground-tools#331

These issues are left open until we can confirm they are indeed fixed.

Today, with the exception of the styling issues reported here, the remaining issues are:

• Playground Block: A11y: Add text documentation for keyboard exit of CodeMirror playground-tools#316
• Playground block: A11Y: Difference between "Run" and "Activate Live Preview"? playground-tools#290 -- we are still discussing this one.
• Playground block: A11Y: Powered by link needs spacing playground-tools#291 -- I am setting up a Windows VM to reproduce the issue with NVDA and hopefully confirm a fix after that.

[jonathanbossenger]

Thanks @brandonpayton

@alexstine I can confirm that this new version has been deployed to learn.wordpress.org, which you can test on the test page.

[brandonpayton]

Hi @jonathanbossenger, a new version of the Playground block (interactive-code-block) has been released (v0.2.13), and it (along with v0.2.12) contains updates to address the following issues:

• Playground block: A11Y: Add skip links for loaded preview/iFrame playground-tools#293
• Playground block: Hide open-in-new-tab arrow icon from screen readers playground-tools#330
• Playground block: Mark code editor input field as readonly when it is read only playground-tools#331
• Playground block: A11Y: Difference between "Run" and "Activate Live Preview"? playground-tools#290
• Playground block: A11Y: Powered by link needs spacing playground-tools#291
• Playground Block: A11y: Add text documentation for keyboard exit of CodeMirror playground-tools#316

These issues are left open until we can confirm they are indeed fixed.

Today, the remaining a11y issue is:

• Playground block: Dismissing exit-editor-with-keyboard tip should trigger a spoken announcement playground-tools#343

I'm not sure if it is a blocker, but I haven't been able to figure out a good fix for it yet.

[jonathanbossenger]

Thanks @brandonpayton

@alexstine I can confirm that the new version of the playground block has been deployed to learn.wordpress.org. It would be greatly appreciated if you have time to test it.

The test page is still at the following URL: https://learn.wordpress.org/test/wordpress-playground-block-plugin-test-page/

[brandonpayton]

Hi @jonathanbossenger, version v0.2.14 is now released which additionally contains a fix for

• Playground block: open-in-new-tab focus order is visually out-of-sequence playground-tools#344

[jonathanbossenger]

Thank you @brandonpayton.

I'm going to raise this to the training team in our weekly meeting this week, to see if we can get some more help with testing, so we can confirm that everything works as expected.

[jonathanbossenger]

@brandonpayton I've created a consolidated list of open issues related to the playground block in the main description of this issue. Could you verify that a) I've gathered all the relevant issues into that list and b) only the open issues need testing?

I am reaching out to folks to help with testing, so I want to make it easier for them to see what needs testing.

[joedolson]

I'll go through this next week.

[jonathanbossenger]

Thanks @joedolson

[brandonpayton]

@brandonpayton I've created a consolidated list of open issues related to the playground block in the main description of this issue. Could you verify that a) I've gathered all the relevant issues into that list and b) only the open issues need testing?

I am reaching out to folks to help with testing, so I want to make it easier for them to see what needs testing.

@jonathanbossenger

That list looks good, except that we could add:
WordPress/playground-tools#343

I'm not sure if it is a blocker.

[brandonpayton]

@jonathanbossenger We have released v0.2.15 of the Playground block (interactive-code-block) that contains a fix for WordPress/playground-tools#343. That issue can be added to the list above.

Thank you!

[jonathanbossenger]

Done, thanks @brandonpayton.

@joedolson it might take a day or so for the updated block to be deployed to Learn.WordPress.org for you to be able to test WordPress/playground-tools#343

[joedolson]

This is still on my radar; but I had a client project abruptly transition from a Sept. 9 launch date to an Aug 23 launch date for emergent reasons, and it's pretty much trashed my week.

[brandonpayton]

Thank you, @joedolson. Good luck with everything!

[joedolson]

Adding a new comment so I can check these off as I confirm them.

• Playground block: A11Y: Difference between "Run" and "Activate Live Preview"? playground-tools#290
• Playground block: A11Y: Powered by link needs spacing playground-tools#291
• Playground block: A11Y: Add skip links for loaded preview/iFrame playground-tools#293
• Playground Block: A11y: Add text documentation for keyboard exit of CodeMirror playground-tools#316
• Playground block: Hide open-in-new-tab arrow icon from screen readers playground-tools#330
• Playground block: Mark code editor input field as readonly when it is read only playground-tools#331
• Playground block: Dismissing exit-editor-with-keyboard tip should trigger a spoken announcement playground-tools#343
• Playground block: open-in-new-tab focus order is visually out-of-sequence playground-tools#344

[joedolson]

Almost everything is done here, except that I think there is a significant improvement that could be made on WordPress/playground-tools#290. I'd recommend completing that recommendation, but then I think this is good.

[brandonpayton]

Thanks for your help, @joedolson!

@jonathanbossenger the remaining work is on my radar, and I plan to look at it next, in the next couple of days.

cc @adamziel

[brandonpayton]

@jonathanbossenger, we've released v0.2.16 of the interactive-code-block plugin with some changes in response to @joedolson's comments here.

The changes add:

• Updating the before-preview marker to say one of the following depending on state:
  • "Beginning of Playground Preview - Not activated"
  • "Beginning of Playground Preview - Loading"
  • "Beginning of Playground Preview - Loaded"
• Speaking "WordPress Playground loaded" after Playground completes loading in the preview iframe

[joedolson]

Just let me know when that's available for testing and I'll check it out!

[brandonpayton]

Just let me know when that's available for testing and I'll check it out!

@jonathanbossenger, do you know if v0.2.16 is available for testing on the Learn site yet?

[jonathanbossenger]

Folks, I am so sorry, I missed this message, and it fell off my radar.

The plugin is indeed running the latest version of the playground block.

@joedolson, if you have some time, can you test the last items discussed here?

It'll be great to be able to close this out before the year wraps up.