search

WordPress / playground-tools

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

Playground block: A11Y: Difference between "Run" and "Activate Live Preview"? #290

Open alexstine opened 3 weeks ago

alexstine commented 3 weeks ago

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

From the button labels alone, I cannot tell the difference between what these buttons will do. Let's start with answering that question and then I can guide on the proper solution. This is in the preview iFrame.

Run sounds like it would load the iFrame from the provided code but I have no idea what Activate Live Preview would mean. From my perspective, they appear to do the same thing.

brandonpayton commented 3 weeks ago

Hi @alexstine, thanks for bringing this up.

Run sounds like it would load the iFrame from the provided code but I have no idea what Activate Live Preview would mean. From my perspective, they appear to do the same thing.

Before live preview has been activated, both the "Run" and "Activate Live Preview" buttons have different purposes but effectively do the same. The "Run" button serves to run the code editor's content in Playground, but when the live preview is not yet active, "Run" has to activate the preview in order to run the code. The "Activate Live Preview" button serves to communicate that user action is required to load the live preview, and when activating the preview, it run the code from the editor as a side-effect.

After live preview is activated, the "Run" button remains and serves to run the latest contents of the code editor in Playground.

Does that help?

alexstine commented 3 weeks ago

@brandonpayton Any chance you can remove the Activate live preview button? Run will ultimately do the same thing and it will be far less confusing.

brandonpayton commented 3 weeks ago

@alexstine I feel like the "Activate live preview" button may have value from a visual UX perspective because it is centered on the live preview area while the "Run" button is located separately with the code editor. When using a screen reader, encountering a "Run and Activate" button followed by a separate "Activate and Run" button sounds confusing and like it would cause a person to pause and wonder "What's the point? Am I missing something?"

Is there a good way for the "Activate live preview" button to be excluded from screen reader consideration to avoid this?

alexstine commented 3 weeks ago

@brandonpayton Nope, that's not possible. After selecting activate live preview, it also gets removed from the DOM which is also not a great experience.