search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.5k stars 260 forks source link

Label is nor read out by Narrator when combined with input/select #3644

Closed DLaskov closed 3 years ago

DLaskov commented 3 years ago

Bug Description

When an input with Label has been accessed the label of the input is not conveyed to the user. (With Windows Narrator)

Expected Behavior

Ideally, when an input/select is accessed and it has an associated label with it, it should be read out by Windows Narrator.

Steps to Reproduce

  1. Go to https://sap.github.io/ui5-webcomponents-react/?path=/docs/layouts-floorplans-form--default-story
  2. Open Windows Narrator
  3. Navigate to an Input which has a Label
  4. The Label of the Input is not conveyed.

Context

Priority

Additional Info (if applicable)

https://support.wdf.sap.corp/sap/support/message/2180312189

unazko commented 3 years ago

Hello @SAP/ui5-webcomponents-team,

This is a react sample issue and it is reproducible via the provided by the author steps. The issue is also reproducible via jaws 2021 and jaws 2019 as the labels in the provided sample aren't referenced via aria-label or aria-labelledby in the input fields.

Best Regards, Boyan Rakilovski

angelzbg commented 3 years ago

Hello @SAP/ui5-webcomponents-team, The issue is also reproducible with the component MultiComboBox. https://support.wdf.sap.corp/sap/support/message/2070307117

fifoosid commented 3 years ago

Hi @DLaskov @angelzbg

In the world of web components, the native approach with for attribute is not working

In order to use the ui5-label as acc text in the given components, you can use the accessibleNameRef property which receives id(or many ids) of the elements that label the given component.

2bno1 commented 3 years ago

Hello @fifoosid, I see this fix is release in @latest version. Is there plan to include this in sf releases? We also need this to fix the similar accessibility issue.

fifoosid commented 3 years ago

Hi @2bno1

For which components do you need the accessibleNameRef property?

2bno1 commented 3 years ago

Hello @fifoosid So far I need accessibleNameRef property supported for ui5-input, ui5-textarea, ui5-date-picker, ui5-step-input. Regards.

fifoosid commented 3 years ago

Hi @2bno1

Currently accessibleNameRef is available for all of the listed components.

2bno1 commented 3 years ago

@fifoosid I see accessibleNameRef is available in @latest version. However, I didn't see it's included in sf version (0.31.x).

2bno1 commented 3 years ago

@fifoosid Is it possible to include accessibleNameRef in sf version (0.31.x)?

fifoosid commented 3 years ago

Hi @2bno1

As you might know, the 0.31.x branch is behind the latest our latest version(rc15). We have this functionality in the 0.31 branch, but the naming is different. Instead of using accessibleName and accessibleNameRef, you can use ariaLabel and ariaLabelledby. These two properties work in the exact same way.

2bno1 commented 3 years ago

@fifoosid Our project does not depend on @ui5-webcompnents directly, instead, it depends on @ui5-webcomponents-react which wrap the @ui5-webcomponents, I think there's gap between @ui5-webcomponents-react 0.131.x and @ui5-webcomponents 0.13.x as I see the Input from @ui5-webcomponents-react 0.131.x does not support these a11y related props (either accessibleName, accessibleNameRef or ariaLabel, ariaLabelledby. I'll create a ticket for @ui5-webcomponents-react about this. Thanks.