ui5-link: Cannot set aria-describedby attribute

[rama1990br]

Describe the bug Can't set aria-describedby attribute on <ui5-link>.

Steps to reproduce the behavior: Set aria-describedby attribute on <ui5-link> Actual Results Only the <ui5-link> tag in the light dom gets the aria-describedby attribute. The <a> tag within the shadow dom doesn't get the aria-describedby attribute because of which the screenreader does not read out the content of the aria-describedby attribute.

Expected behavior The aria-describedby attribute should also be set on the <a> tag in the shadow dom so that the screenreader reads out its content.

Alternatives I tried and why they didn't work: I tried setting the aria-label attribute with whatever I wanted read out by the screenreader. While the text was read out by the screenreader, it was not ideal cause the text was "External training link opens a new tab or window" but the screenreader read out "External training link opens a new tab or window link" (since the role is set to link for ui5-link). So ideally, I would set aria-label to "External training" and aria-describedby to "opens a new tab or window" which should eventually result in the screenreader reading out "External training link opens a new tab or window".

[rama1990br]

I have filed this issue for SuccessFactors, so please add the "SF" label to this issue, and this is also an accessibility issue so please add "ACC" as well.

[ilhan007]

Hello @rama1990br I will forward your request to the responsible team. Is this requirement critical for the 2111 release as usually the feature requests take time until its processed planned and developed.

What is the timeline for resolving it? Which version do you use? 0.31.18?

Also as far I could see even the aria-label support has been removed in the master. I will involve a11y experts to advise.

BR, ilhan

[petyabegovska]

Hi @rama1990br,

Please provide some more details on your use case, so that we can evaluate what is the best way to achieve it and decide which properties are needed in the ui5-link component.

Best regards, Petya

[unazko]

Hello @rama1990br,

After discussion with colleagues in the accessibility area I can confirm that there is currently a limitation in providing ID references for elements with shadow DOM. You can check for more information regarding this in our accessibility documentation https://sap.github.io/ui5-webcomponents/playground/advanced/accessibility/

For that reason, it is not currently possible to add support for accessible descriptions. We plan to expose an "accessibleDescription" property similar to the "accessibleName" and "accessibleNameRef", which will map to aria-description property https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescription This will be implemented once ARIA 1.2 is officially published and it is not in draft.

For the time being, we would suggest to use "accessibleName" as it seems like a reasonable solution, even with an repetitive speech output. What is important is that the end user will receive all the information.

Best Regards, Boyan

[elenastoyanovaa]

Hello @rama1990br ,

As @unazko mentioned the handling of descriptions is not that clear at this point due to limitation related to shadow DOM, so this should be handled carefully and centrally. For this we created #6445 where you could read detailed information related to the descriptions as well as track the process of implementation.

Thank you for reporting!

Elena