Post Preview Button: Use an <a> instead of a <button>

[noisysocks]

Fixes #9446.

Changes PostPreviewButton to use an <a> element when possible. Although we always intercept the onClick event, having the button rendered as an <a> with href and target attributes helps with accessibility, see #9446 (comment) for a great explanation on why.

As part of this, I've moved some code around and written some inline comments with an aim to make openPreviewWindow easier to comprehend.

Testing

I've updated the unit tests for PostButtonPreview.

The existing E2E test should serve as an acceptance test for these changes.

To test manually:

1. Open a new post
2. Type in some content
3. Click Preview—it should generate a preview and display it in a new tab
4. Go back to the post and publish it
5. Make some more changes
6. Click Preview—it should generate a preview and display it in the same tab

[talldan]

Code looks good. Some really nice refactoring! The only usability thing I spotted is that the link can now not be opened using the spacebar, which feels like an inconsistency given that it's visually perceived as a button. I imagine users might have an expectation that it can be used in the same way as the 'Publish' button next to it.

@noisysocks what do you think?

[noisysocks]

@talldan: That's a good point. I wonder if we should do this for all <Button>s with a href or just <PostPreviewButton>?

[talldan]

Would be good to get an idea on whether it's considered a blocker for this PR as well.

[aduth]

I don't know that the spacebar behavior should be a blocker here, as it applies to any <Button href>, including the preview button prior to when it was made a non-anchor.

I'm not sure what the correct answer is to the spacebar behavior of a link which takes the aesthetic of a button. I imagine the answer could include some commentary to the point of: maybe we should stop making links look like buttons. See also #7534.

Maybe worth creating an issue or consolidating to #7534 to be discussed separate to the effort here?

[noisysocks]

Agree that it isn't a blocker. I dropped a note in #7534.

Would appreciate a quick check from @afercia or someone else on Accessibility before proceeding. Otherwise, I think this is good to get in.

[talldan]

I'll approve given the spacebar issue isn't considered a blocker.

[noisysocks]

Thanks Dan. We can address any follow-up issues as seperate PRs.

[afercia]

Yep, the spacebar thing is a broader issue across the whole WordPress UI, definitely not a blocker for this PR. Thanks everyone for working on this.