[BITV] 9.3.3.2/3.4 - Sharing menu: The "Note to recipient" input field does not have a visual label, it only has a placeholder element. (2)

[AndyScherzinger]

see also #37091

• Add accessible label to textarea nextcloud-libraries/nextcloud-vue#4448
• enh(a11y): Add label to share note textbox #40430

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-9f92015c98-v3-n4

• 9.3.3.2/10.4 - https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-9f92015c98-v10-n4

[jancborchardt]

@Pytal @JuliaKirschenheuter for the sharing flow redesign we have a pattern of checkboxes with label which open an input or textarea below: #39472 – same pattern as in the above screenshot essentially.

Question there is: Can we use the same label that is used for the input field also for the input / textarea below? They belong together, and otherwise duplication might be needed. Or which approach would you recommend here?

[jancborchardt]

Also cc @Fenn-CS @artonge on the previous comment as they work on that pull request currently.

[Pytal]

@Pytal @JuliaKirschenheuter for the sharing flow redesign we have a pattern of checkboxes with label which open an input or textarea below: #39472 – same pattern as in the above screenshot essentially.

Question there is: Can we use the same label that is used for the input field also for the input / textarea below? They belong together, and otherwise duplication might be needed. Or which approach would you recommend here?

Good point, since NcCheckboxRadioSwitch contains a label and an input already and a label can only be for a single id (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes) then I believe we could use aria-labelledby here

span
  input id="foo"
  label for="foo" id="bar"
span
textarea aria-labelledby="bar"

Does that work @michaelnissenbaum ?

[ShGKme]

Good point, since NcCheckboxRadioSwitch contains a label and an input already and a label can only be for a single id (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes) then I believe we could use aria-labelledby here

I checked it with NVDA screen reader, and it works fine.

A link to a PoC demo:
https://codepen.io/ShGKme/pen/QWzKxRL

[AndyScherzinger]

@michaelnissenbaum would the solution proposed by @ShGKme in #37088 (comment) be fine by you?

[michaelnissenbaum]

I think you may not have understood the issue here. The problem is that the <textarea> element does not have a visual label. We're not discussing programmatically linked labels in this context.

[Pytal]

The idea of using

span
  input id="foo"
  label for="foo" id="bar"
span
textarea aria-labelledby="bar"

for

was to have "Note to recipient" label both the checkbox and the textarea

Yes, this is not a separate visual label conventionally used for textarea but in this context it makes sense to use the already existing text to label the textarea as well to avoid duplication

The programmatic link then is to ensure that in this case screen readers will read out the label when focused

Does that make sense @michaelnissenbaum ?

[Pytal]

What do you think @michaelnissenbaum about the suggestion ?

[michaelnissenbaum]

I disagree with the proposed solution. The current implementation is confusing and may not be understood by some users. The <textarea> element needs a separate label.