ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard
verified publisher icon SAP

[input form components]: associated label is not read out

Open nnaydenow opened this issue 11 months ago • 5 comments

Bug Description

If input form component is linked with associated label that has for attribute, the label is not read out if the input form component is focused

  • [ ] ui5-checkbox
  • [x] ui5-combobox
  • [ ] ui5-daterange-picker
  • [ ] ui5-datetime-picker
  • [x] ui5-multi-combobox
  • [x] ui5-multi-input
  • [ ] ui5-date-picker
  • [x] ui5-input
  • [ ] ui5-radio-button
  • [x] ui5-slider
  • [x] ui5-range-slider
  • [ ] ui5-select
  • [ ] ui5-step-input
  • [ ] ui5-switch
  • [x] ui5-textarea
  • [ ] ui5-time-picker

Affected Component

all input form components

Expected Behaviour

To be validated which component should announce its associated label

Isolated Example

https://sap.github.io/ui5-webcomponents/nightly/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpOyBoZWlnaHQ6IDQ1MHB4O1wiPlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblxuXG48dWk1LWxhYmVsIGZvcj1cImNiXCI-TGFiZWwgdG8gZGVzY3JpYmUgdWk1LWNoZWNrYm94PC91aTUtbGFiZWw-XG48dWk1LWNoZWNrYm94IGlkPVwiY2JcIj48L3VpNS1jaGVja2JveD5cbjxiciAvPlxuPHVpNS1sYWJlbCBmb3I9XCJjb21ib1wiPkxhYmVsIHRvIGRlc2NyaWJlIHVpNS1jb21ib2JveDwvdWk1LWxhYmVsPlxuPHVpNS1jb21ib2JveCBpZD1cImNvbWJvXCI-PC91aTUtY29tYm9ib3g-XG48YnIgLz5cbjx1aTUtbGFiZWwgZm9yPVwiZHJwXCI-TGFiZWwgdG8gZGVzY3JpYmUgdWk1LWRhdGVyYW5nZS1waWNrZXI8L3VpNS1sYWJlbD5cbjx1aTUtZGF0ZXJhbmdlLXBpY2tlciBpZD1cImRycFwiPjwvdWk1LWRhdGVyYW5nZS1waWNrZXI-XG48YnIgLz5cbjx1aTUtbGFiZWwgZm9yPVwiZHRwXCI-TGFiZWwgdG8gZGVzY3JpYmUgdWk1LWRhdGV0aW1lLXBpY2tlcjwvdWk1LWxhYmVsPlxuPHVpNS1kYXRldGltZS1waWNrZXIgaWQ9XCJkdHBcIj48L3VpNS1kYXRldGltZS1waWNrZXI-XG48YnIgLz5cbjx1aTUtbGFiZWwgZm9yPVwibWNiXCI-TGFiZWwgdG8gZGVzY3JpYmUgdWk1LW11bHRpLWNvbWJvYm94PC91aTUtbGFiZWw-XG48dWk1LW11bHRpLWNvbWJvYm94IGlkPVwibWNiXCI-PC91aTUtbXVsdGktY29tYm9ib3g-XG48YnIgLz5cbjx1aTUtbGFiZWwgZm9yPVwibWlcIj5MYWJlbCB0byBkZXNjcmliZSB1aTUtbXVsdGktaW5wdXQ8L3VpNS1sYWJlbD5cbjx1aTUtbXVsdGktaW5wdXQgaWQ9XCJtaVwiPjwvdWk1LW11bHRpLWlucHV0PlxuPGJyIC8-XG48dWk1LWxhYmVsIGZvcj1cImRwXCI-TGFiZWwgdG8gZGVzY3JpYmUgdWk1LWRhdGUtcGlja2VyPC91aTUtbGFiZWw-XG48dWk1LWRhdGUtcGlja2VyIGlkPVwiZHBcIj48L3VpNS1kYXRlLXBpY2tlcj5cbjxiciAvPlxuPHVpNS1sYWJlbCBmb3I9XCJpbnB1dFwiPkxhYmVsIHRvIGRlc2NyaWJlIHVpNS1pbnB1dDwvdWk1LWxhYmVsPlxuPHVpNS1pbnB1dCBpZD1cImlucHV0XCI-PC91aTUtaW5wdXQ-XG48YnIgLz5cbjx1aTUtbGFiZWwgZm9yPVwicmJcIj5MYWJlbCB0byBkZXNjcmliZSB1aTUtcmFkaW8tYnV0dG9uPC91aTUtbGFiZWw-XG48dWk1LXJhZGlvLWJ1dHRvbiBpZD1cInJiXCI-PC91aTUtcmFkaW8tYnV0dG9uPlxuPGJyIC8-XG48dWk1LWxhYmVsIGZvcj1cInNsaWRlclwiPkxhYmVsIHRvIGRlc2NyaWJlIHVpNS1zbGlkZXI8L3VpNS1sYWJlbD5cbjx1aTUtc2xpZGVyIGlkPVwic2xpZGVyXCI-PC91aTUtc2xpZGVyPlxuPGJyIC8-XG48dWk1LWxhYmVsIGZvcj1cInJzbGlkZXJcIj5MYWJlbCB0byBkZXNjcmliZSB1aTUtcmFuZ2Utc2xpZGVyPC91aTUtbGFiZWw-XG48dWk1LXJhbmdlLXNsaWRlciBpZD1cInJzbGlkZXJcIj48L3VpNS1yYW5nZS1zbGlkZXI-XG48YnIgLz5cbjx1aTUtbGFiZWwgZm9yPVwic2VsZWN0XCI-TGFiZWwgdG8gZGVzY3JpYmUgdWk1LXNlbGVjdDwvdWk1LWxhYmVsPlxuPHVpNS1zZWxlY3QgaWQ9XCJzZWxlY3RcIj48L3VpNS1zZWxlY3Q-XG48YnIgLz5cbjx1aTUtbGFiZWwgZm9yPVwic2lcIj5MYWJlbCB0byBkZXNjcmliZSB1aTUtc3RlcC1pbnB1dDwvdWk1LWxhYmVsPlxuPHVpNS1zdGVwLWlucHV0IGlkPVwic2lcIj48L3VpNS1zdGVwLWlucHV0PlxuPGJyIC8-XG48dWk1LWxhYmVsIGZvcj1cInN3XCI-TGFiZWwgdG8gZGVzY3JpYmUgdWk1LXN3aXRjaDwvdWk1LWxhYmVsPlxuPHVpNS1zd2l0Y2ggaWQ9XCJzd1wiPjwvdWk1LXN3aXRjaD5cbjxiciAvPlxuPHVpNS1sYWJlbCBmb3I9XCJ0YVwiPkxhYmVsIHRvIGRlc2NyaWJlIHVpNS10ZXh0YXJlYTwvdWk1LWxhYmVsPlxuPHVpNS10ZXh0YXJlYSBpZD1cInRhXCI-PC91aTUtdGV4dGFyZWE-XG48YnIgLz5cbjx1aTUtbGFiZWwgZm9yPVwidHBcIj5MYWJlbCB0byBkZXNjcmliZSB1aTUtdGltZS1waWNrZXI8L3VpNS1sYWJlbD5cbjx1aTUtdGltZS1waWNrZXIgaWQ9XCJ0cFwiPjwvdWk1LXRpbWUtcGlja2VyPlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cblxuPC9odG1sPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuIn0sIm1haW4uanMiOnsibmFtZSI6Im1haW4uanMiLCJjb250ZW50IjoiLyogcGxheWdyb3VuZC1oaWRlICovXG5pbXBvcnQgXCIuL3BsYXlncm91bmQtc3VwcG9ydC5qc1wiO1xuLyogcGxheWdyb3VuZC1oaWRlLWVuZCAqL1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvRGF0ZVBpY2tlci5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvSW5wdXQuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0xhYmVsLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9DaGVja0JveC5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvQ29sb3JQaWNrZXIuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0NvbWJvQm94LmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9EYXRlUmFuZ2VQaWNrZXIuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0RhdGVUaW1lUGlja2VyLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9NdWx0aUNvbWJvQm94LmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9NdWx0aUNvbWJvQm94SXRlbS5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvTXVsdGlJbnB1dC5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvVG9rZW4uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1JhZGlvQnV0dG9uLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9SYW5nZVNsaWRlci5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvU2VsZWN0LmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9PcHRpb24uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1NsaWRlci5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvU3RlcElucHV0LmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9Td2l0Y2guanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1RleHRBcmVhLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9UaW1lUGlja2VyLmpzXCI7XG4ifX0

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

nightly

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

  • [x] I’m not disclosing any internal or sensitive information.

nnaydenow avatar Jan 29 '25 16:01 nnaydenow

Hello @unazko, @elenastoyanovaa, @yanaminkova, @GerganaKremenska,

Please revise the components and address wherever it's expected.

nnaydenow avatar Jan 29 '25 16:01 nnaydenow

Hi @nnaydenow ,

The example you linked is not loading for me, but in order for the for attribute to work for a certain component the component should support it first. In order to support this case "getAssociatedLabelForTexts" from the AccessibilityTextsHelper should be used for each component.

As far as I checked the components only the TextArea and the Input have this enabled.

I wouldn't classify this as a bug as there was a general agreement to enable this on request. Rather PO's should open BLI for each team to enable the for attribute support for each form/input control. Please inform the team PO's in order for them to move this to their planning boards and plan accordingly.

Kind Regards, Elena

elenastoyanovaa avatar Jan 30 '25 07:01 elenastoyanovaa

Hi colleagues,

We believe that we are ready with the components in our team scope.

Best Regards, Hristo

hristop avatar May 15 '25 05:05 hristop

Internal Reference: BGSOFUIPIRIN-6858

dobrinyonkov avatar May 30 '25 08:05 dobrinyonkov