[list]: Screen reader announcement issue for additionalText and lack of announcement for selected record

[wilson-xu-sap]

Describe the bug

1. There is no way to set accessible name for additionalText now. additionalText should not join with text directly sometimes.
2. There is no way to set detailed announcement after selecting one item. Only selected is announced.

Isolated Example

https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/data-display-list--docs

Reproduction steps

1. Click on one of the list item
2. use arrow keys to navigate
3. check the screen reader
   ...

Expected Behaviour

1. A way to set accessible name for additionalText.
2. Screen reader users should receive an announcement indicating which record is currently selected when navigating the list.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.7

UI5 Web Components Version

2.7

Browser

Edge

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[TeodorTaushanov]

Hello @SAP/ui5-webcomponents-topic-p, can you check this issue?

[dobrinyonkov]

Hi @wilson-xu-sap,

thanks for reporting this.

we need a few more details to help you:

1. it's not clear what you expect to happen with additionalText.
   – when should the screen reader announce it?
   – where do you mean to set the accessible name?
   – can you give an example of what you'd expect the screen reader to say, and what the HTML or API should look like?

Note: If you set the accessible-name, attribute to the item, the text and the additionat text get overridden by it:

<ui5-li additional-text="1">Item 1</ui5-li>
<!-- screen reader ouput = Item 1 1 -->
<ui5-li accessible-name="My custom announcement" additional-text="1">Item 1</ui5-li>
<!-- screen reader ouput = My custom announcement -->

Would that work for your use case?

2. for announcing custom messages when an item is selected, you can use the InvisibleMessage service.

Let us know more when you can.

Regards,
Dobrin

[wilson-xu-sap]

Hi @dobrinyonkov I cannot remember this ticket clearly. I think now additionalText will be read followed by the content. However, sometimes additional text should not be read straightly or should not be read. Is there a way to handle this?

[dobrinyonkov]

Hi @wilson-xu-sap, the standard way to do that in HTML is to set an accessible name, either via aria-label or aria-labelledby.
With ui5-webcomponents, that means using the accessible-name attribute like this:

<ui5-li accessible-name="Item 1" additional-text="some additional text that will no longer be read">Item 1</ui5-li>
<!-- screen reader output = Item 1 -->

Keep in mind that doing this can leave visually impaired users at a disadvantage. They won’t hear the additional text read out by screen readers, even though it's shown visually.

If that extra information is important, consider including it in the accessible name, or rethinking how the content is structured. The goal is to give all users the same understanding, regardless of how they access the content.

Let me know if you have more questions.

Regards,
Dobrin

[github-actions]

This issue has been closed. To reopen, just leave a comment!