Post visibility better html and a11y

[afercia]

This PR tries to improve the Post Visibility "popover" HTML semantic and accessibility:

• valid HTML
• explicitly associated labels
• added fieldset and legend, see why this is important especially for radio buttons: https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/
• the password protected field has now a proper label
• changed the password protected placeholder text to be more a "hint": placeholders shouldn't be used as replacement for labels, see https://core.trac.wordpress.org/ticket/40331
• the toggle button now uses an aria-expanded attribute
• don't close the panel when setting visibility to "Private", for consistency with the other 2 options

Not sure why setPrivate() uses onSave(), would need some feedback here since that seems to trigger a re-rendering of the "popover". /cc @aduth

Todo:

• when closing the panel, focus should be moved back to the toggle button
• pressing Escape should close the panel (and move focus back)
• when setting visibility to "Private": interaction with the JS confirm: is it really needed?

These points should probably be addressed in #1204 as @aduth mentioned

Note: Needs to be tested in IE/Edge (I suspect the legend element would need some additional styling for those browsers)

Fixes #1312

[afercia]

OK so I've just noticed a (pre-existing) bug:
in Firefox (and maybe other browsers too?) it is not possible to select a different radio button using the down and up arrow keys, note this is the native behavior with radio buttons.
Looks like the radio buttons need a name attribute to make Firefox understand they belong to the same group.

[afercia]

Screenshot: Firefox and NVDA correctly announcing the fieldset legend, the count of radio buttons, and the descriptions:

[aduth]

Not sure why setPrivate() uses onSave(), would need some feedback here since that seems to trigger a re-rendering of the "popover".

I think this was inspired by Calypso's implementation, which prompts the user to immediately publish the post. It was a workaround to an issue caused by Calypso's "noisy" autosave, where drafts are saved very frequently without user intervention (i.e. don't need to press "Save Draft"). It's an issue because you can't save a draft with "Privately Published" as the status (since private and draft are mutually exclusive statuses).

In wp-admin this is pretty unexpected as well:

1. Navigate to Posts > Add New
2. Enter title or content
3. Set Visibility to "Privately Published"
4. Press "Save Draft"

Expected: A draft is saved
Actual: The post is published privately

Depending on the direction we take with #1773, we might need something like this with Gutenberg as well. Or: a way to respect that a user wants the post to be published privately in draft meta. Or: autosave excluding status.

[aduth]

pressing Escape should close the panel (and move focus back)

Should the panel also close when focus leaves (guessing yes)? Example: Press tab while focused in the password input moves to the next Post Settings field, but the panel remains open.

[aduth]

Outside the scope of this pull request, but I don't like how we have to manually manage password state. Seems like it should be inferred by the password prop, or at least consolidated to one of the lifecycle methods (e.g. componentWillUpdate). I might plan to tackle this separately.

[afercia]

I'd agree it should be addressed separately.

[aduth]

It's not likely we'd have more than one of these components on the page, but given that we're injecting instanceId anyways, maybe we should include it in the input name?

[afercia]

Will try.

[afercia]

Should the panel also close when focus leaves (guessing yes)? Example: Press tab while focused in the password input moves to the next Post Settings field, but the panel remains open.

Yeah, I guess it should.

Depending on the direction we take with #1773, we might need something like this with Gutenberg as well. Or: a way to respect that a user wants the post to be published privately in draft meta. Or: autosave excluding status.

I understand. I can only say that from an usability and accessibility perspective the JS confirm is a terrible experience 🙂 I'd really like to try a different mechanism here, but it makes sense to postpone this issue, pending decisions on autosave.

[afercia]

Added instanceId to the radio buttons name attribute. Will split closing the panel on Escape/onBlur and moving back the focus in a separate issue (I'd need some feedback and don't want to block this PR).