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.56k stars 267 forks source link

ui5-input: aria-describedby content should be customizable #5607

Closed pankajpandey01 closed 2 years ago

pankajpandey01 commented 2 years ago

Feature Request Description

ui5-input: aria-describedby content is not customizable Related Problem: We have a use case in shellbar search field where we need to provide some extra information to screen reader user about the search functionality. This is a descriptive information which can not be put as part of accessible-name (aria-label)

Screen Shot 2022-08-01 at 4 01 54 PM

Proposed Solution

ui5-input: aria-describedby content should be customizable

Priority

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

MapTo0 commented 2 years ago

Hello @SAP/ui5-webcomponents-topic-rl

As we spoke with @elenastoyanovaa I am forwarding that to the queue.

Regards, Martin

elenastoyanovaa commented 2 years ago

Hello,

Currently there is no possibility to add descriptive text, due to the fact that the native input element would be in a different shadow DOM from the element which would be passed to the aria-describedby. You can find more information here in the Web Components & Accessibility section: https://sap.github.io/ui5-webcomponents/playground/advanced/accessibility/

In future we would like to expose an API similar to accessibleName called accessibleDescription and we will internally use aria-description. This attribute is part of the new W3C specification: https://w3c.github.io/aria/#aria-description, but this specification is currently a draft and the attribute is not yet supported in all major browsers: https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescription. This is the reason why we could not yet expose such an API.

Until then I could give you a suggestion for implementation. You could use our new Invisible Messaging service. The information about it could be found in the InvisibleMessaging section here https://sap.github.io/ui5-webcomponents/playground/advanced/accessibility/ There is also an example included. You could attach to the focus event of the input and call the announce method with the desired text.

Kind Regards, Elena