The Preview button should be a link

[afercia]

The Preview button used to be a link styled like a button. With the changes introduced in #7883 it is now rendered as a <button> element.

This is far from ideal from a semantics and accessibility perspective. It was also noted in #7883 (comment) that links need to be communicated as such to software and assistive technologies.

Noting this has nothing to do with the visual look of this "button". Under the hood it needs to be an <a> element, then it can be styled as desired.

[aduth]

cc @talldan as author of #7883

[talldan]

Thanks for the ping! This is a subtly complex issue.

In #7883 we wanted to indicate that the preview link opens in a new tab, but we that wasn't preferable because visually it's a button, and it's somewhat unexpected for the open in new tab icon to appear in a button.

I'd be happy to change it to a link again, but I can imagine as soon as I do there'll be another issue asking "why does this link not indicate to the user that it opens in a new tab?", and we'd be back to square one.

Preferably we'd solve both at the same time so that we don't end up flip-flopping back and forth. Maybe the solution would be to make it a link with the hidden accessibility text indicating it opens in a new tab, but not to display the icon associated with that?

I'll also cc @noisysocks who was involved in that decision.

[noisysocks]

Maybe the solution would be to make it a link with the hidden accessibility text indicating it opens in a new tab, but not to display the icon associated with that?

This sounds fine to me. Sighted users will still not be surprised by a new tab opening since the link will visually look like a button.

[noisysocks]

While looking into this I remembered that the reason we did this is because we must open the new tab programatically using window.open(). I assumed that because clicking on Preview always "does something", it should be a <button>.

@afercia: Does it make sense to make Preview an <a> given that we always override the click event?

[afercia]

@noisysocks thanks for the ping.

The Preview control navigates to a new page, e.g. http://build.wordpress-develop.test/?p=3140&preview=true and opens in a new tab. Semantics is important particularly when it empowers software to work as expected. In turn, software can provide users with correct information.

For example, screen readers have dedicated shortcuts and tools to:

• navigate through all the links in a page
• read the link address
• list all the links in a page

An <a> element helps users to find the Preview control because it allows all these features to work as expected. Also, in the Classic Editor the Preview is a link so users would expect it to be a link.

I'd recommend to populate the href attribute with the preview URL for the same reasons.

It doesn't matter so much if the actual behavior is then handled via JavaScript, as long as it replicates a native link interaction and semantics.

Screenshot of the link lists in NVDA:

Screenshot of the link lists in VoiceOver:

Example shortcuts to navigate through links:

• VoiceOver: Control Option Command L
• NVDA: NVDA modifier + K

[noisysocks]

It doesn't matter so much if the actual behavior is then handled via JavaScript, as long as it replicates a native link interaction and semantics.

👍