Add label elements to scheduler and visibility

[Soean]

Description

Changes the html element of the sidebar panel name for post-schedule and post-visibility from span to label. It also adds an ID for better accessibility.

Separated from #3188

[codecov]

Codecov Report

Merging #3317 into master will increase coverage by 0.38%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #3317      +/-   ##
==========================================
+ Coverage   31.17%   31.56%   +0.38%     
==========================================
  Files         235      238       +3     
  Lines        6534     6688     +154     
  Branches     1163     1199      +36     
==========================================
+ Hits         2037     2111      +74     
- Misses       3773     3847      +74     
- Partials      724      730       +6

Impacted Files	Coverage Δ
editor/sidebar/post-visibility/index.js	66.66% <100%> (+26.66%)	⬆️
editor/sidebar/post-schedule/index.js	71.42% <100%> (+21.42%)	⬆️
components/autocomplete/index.js	76.92% <0%> (-12.27%)	⬇️
blocks/library/paragraph/index.js	32% <0%> (-1.34%)	⬇️
blocks/library/gallery/block.js	9.75% <0%> (-0.25%)	⬇️
blocks/api/raw-handling/index.js	83.33% <0%> (ø)	⬆️
editor/sidebar/post-taxonomies/index.js	0% <0%> (ø)	⬆️
editor/sidebar/discussion-panel/index.js	0% <0%> (ø)	⬆️
...itor/sidebar/post-taxonomies/flat-term-selector.js
...ebar/post-taxonomies/hierarchical-term-selector.js
... and 8 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3ea79aa...5f1947a. Read the comment docs.

[aduth]

Looks good 👍

[afercia]

Sorry I'm not sure I understand why we should use label element associated to buttons. What is the reasoning behind this change?

While, technically, buttons are labelable elements, now clicking these new labels will activate the buttons making the popovers appear. This could be confusing for users. Not to mention the buttons accessible name is now calculated based on the new labels and the buttons text, highly confusing for assistive technologies users:

About these two buttons, see also "Controls labels should be meaningful even when read out of context" #470. The current practice to name the buttons with the current value of their underlying options rather than with the name of the available action is far from ideal.

[aduth]

now clicking these new labels will activate the buttons making the popovers appear. This could be confusing for users.

This is what seemed sensible to me in my review, considering the behavior of labels in activating other types of form control (checkbox, radio). I do not feel strongly here and am happy to reverse these changes if this is not the case.

Not to mention the buttons accessible name is now calculated based on the new labels and the buttons text, highly confusing for assistive technologies users:

Is this a result of the changes here, or to the general point raised in #470 that the buttons lack context? Is there any way for the relationship between a label and the button to be leveraged in screen readers to lend clarity here (i.e. Visibility -> Public, Publish -> November 6)?

[afercia]

The primary purpose of a label is giving controls a name. For example, an input field may use an "Email" label. The interaction (clicking on the label focus/checks the control) is a secondary effect.

What happens here is the label contributes to the calculation of the control accessible name. Labels should be meaningful even when read out of context. Users can jump directly to one of these buttons and what they would here would be something like:
"Private Visibility"
and
"November 6, 2017 10:47 pm Publish"

Buttons should identify the underlying action. For example, would you give a form submit button a text "Send on November 6, 2017 10:47 pm"? Certainly not. You would likely just describe the button action: "Submit".

In this case, for example, "Private Visibility" would make me think that activating the button I set Visibility to Private. Highly confusing for users.

This actually increases the confusion caused by giving the buttons a name that is not the available action but the current setting value, as described on #470 and doesn't help to solve the issue.

I'd recommend to reconsider this change.

[Soean]

I wanted to make it more consistent with the labels. But your explanation makes it clear why it doesn't become more user-friendly. Thank you, I have learned something new and will think about it next time. We should therefore reverse this change here.

[afercia]

Thanks @Soean !