Fix: Publish date not announced in voice over; Redundant duplicate labels;

[jorgefilipecosta]

Fix: #11747

This PR fixes #11747 by removing a duplicate label.
It also addresses another problem. Given that we have a Publish label labeling the button, the publish date is never announced for users of assistive technologies. Only the word publish is announced, this PR addresses that problem.
I'm using an aria-label for the button because, besides the date normally shown in the button, I also want assistive technologies to announce 'Click to change'. I'm not sure if announcing 'Click to change' is required but it seemed helpful.

How has this been tested?

I used voice over and verified the select date is now announced when the button gets focus.

Screenshots

[afercia]

@jorgefilipecosta thanks for looking into this!

Reminder:

• when testing with VoiceOver, please use Safari. Testing with Chrome + VoiceOver may be misleading, as some things might be announced (or not announced) in unexpected ways
• consider that screen reader users navigate content mostly by arrowing (with VoiceOver that is Control-Option-Right (or Left) Arrow) rather than by tabbing

Chrome + VoiceOver before:

Safari + VoiceOver before:

Technically, multiple labels are valid and as you can see Safari+VoiceOver announce both labels. The fact it doesn't work with Chrome is very likely a Chrome bug.

Safari + VoiceOver after the patch:

and, after a brief pause, the aria-describedby is announced:

• I'm not sure using an aria-label="Mar 19, 2019 12:05 am Click to change" to add Click to change overriding the button visible text that already says Mar 19, 2019 12:05 am can help so much. This control is a button: it's implied that can be clicked to do something.
• The aria-describedby targets what the real label should be, but it can be missed as it's announced only after a brief pause. In any case "Publish" shouldn't be the description.
• Pre-existing issue: aria-polite used this way is buggy, will open a separate issue

The real, fundamental problem with these "Publish" and "Visibility" buttons is that their text represents the current value. Instead, it should be the available action: the "what" the buttons are about.

This was initially reported on #470, created on April 2017. Two years ago. Still pending a solution.

I don't want to repeat all the considerations made on #470 but, to summarize: controls should never be labelled with the current value or state. Labels are meant to give controls their accessible name, that's meant to give users the necessary information on what a control does.

Imagine a "first name" input field: would anyone ever label the input field with their first name? (see screenshot below):

I guess nobody would 🙂 However, that's basically what these two buttons do: they're labelled with the current value, which is totally incorrect from a web standards / semantics / accessibility perspective.

For now, I'd suggest to change this PR and make the Publish button the same as the Visibility button: they should work the same and also get the same improvements. Please remove the aria-label, aria-describedby, the id on the span. I'd then recommend to give #470 a higher priority and come to a better solution.

[afercia]

Please see previous comment.

[jorgefilipecosta]

Thank you for all the context provided @afercia.

Please remove the aria-label, aria-describedby, the id on the span.

I followed the suggestion and applied these changes, this control is now equal to the visibility control and the same improvements could be applied to but controls.

[jorgefilipecosta]

This PR was rebased, I guess it is ready to merge.

[afercia]

@jorgefilipecosta thanks! Looks good to me, as it's a simplification and at least the two buttons are now the same.

I've removed aria-live="polite" from the publish date button, as it was triggering an announcement at any change in the date picker. Instead, I'd like to suggest to use a speak() message when users confirm the new date: this could be added, together with other improvements, in #470.

Please do feel free to merge at your leisure (if no objections)!