Post meta box toggles not accessible.

[joedolson]

The handlediv buttons used for toggling post metabox panels are not accessible for several reasons:

1) They do not have a label.
2) They are not focusable elements.
3) They don't announce their current state.

The attached patch changes the <div> into a <button>, adds a screen-reader-text hidden label which provides context, uses aria-expanded to indicate current state, and toggles that state based on the state of the postbox.

One of the consequences of this issue is that if any metabox gets closed (by another user, for example), then a screen reader user will never be able to access that panel. As such, this is a major issue.

[joedolson]

Improve metabox accessibility

[rianrietveld]

Hey Joe, tested 33544.patch with keyboard and VoiceOver.
It works good.

One remarks: the screen-reader-text is (for example) "Click to toggle Publish panel". But that's only available for users who can't use a mouse, maybe click is not the right verb here?

[SergeyBiryukov]

33544.2.patch​ adjusts the button width and height to preserve the current padding and improve focus styling.

On the screenshot​, left is the current state, middle is 33544.patch​, and right is 33544.2.patch​.

[joedolson]

Thanks for that clean up, Sergey!

Regarding the text - no, I don't think that's a problem. 'Click' is used as a generic term to mean 'activate' - it's far too common across the web to be a major problem for understanding. Any term that would actually be appropriate would be too verbose (e.g. "Active this link" or "Press enter", etc.), so I think that using the common term to have concise text is more important.

It's the same scenario as saying that you're going to "Go see a movie" -- blind people use that phrase, even though they aren't *literally* going to see anything.

[joedolson]

Whoops; simultaneity had me accidentally remove the commit keyword. Putting it back!

[SergeyBiryukov]

In 33762:

Make post meta box toggles accessible.

props joedolson.
fixes #33544.