[SF] Object page: a11y issue where expand / collapse header label is misinforming

[gauravroy1995]

Describe the bug

the expand/collapse header button while checking in screen reader outputs as Collapse Header Button Expanded and Expand Header Button Collapsed .

here the intitial collapse/expand keyword is confusing since both are labeled in same sentence.
It can be like Header button collapsed, thats it.

Isolated Example

No response

Reproduction steps

1. Go to any object page example
2. Switch on screen reader
3. Press tab and select the button and toggle it
4. you can see the words being printed/spoken by screen reader as Collapse Header Button Expanded
   ...

Expected Behaviour

Just portray Header Button Expanded or Header Button Collapsed and also a little more explicit control so that more labels can be added to the button

Screenshots or Videos

UI5 Web Components for React Version

2.10.0

UI5 Web Components Version

2.10.0

Browser

Chrome

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]

Hi @gauravroy1995

I wasn't able to reproduce this issue. Please add clear steps how to reproduce it and add the version of the Screen Reader you're using.

I tested it with VoiceOver (MacOs 15.5 (24F74)):

2025-05-20_13-43-57.mp4

[gauravroy1995]

https://github.com/user-attachments/assets/b1a278f0-8764-4f30-a6d4-59cbded5f1d6
so steps tried ,

1. visited https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/layouts-floorplans-objectpage--default
2. turned on voiceover in mac
3. pressed tab and reached the expand/collapse button
4. pressed enter

let me know if there's anything else which you need to reproduce? @Lukas742

[Lukas742]

@gauravroy1995 I changed the verbosity settings to "High" of the speech output of VoiceOver and now the announcement is made.

There are no clear specifications regarding this behavior, so we will follow the SapUI5 implementation and remove the aria-expanded attribute. Although, it's not wrong per se, since verbosity can be changed by screen reader settings - not only for VoiceOver but for others as well (e.g. JAWS, NVDA).

[Lukas742]

@gauravroy1995 I just checked why we implemented the aria-expanded attribute and noticed that there was an issue raised by Successfactors that requested this behavior. Could you please clarify if this is still valid, or if requirements have changed?

This is the issue in question: #5666

[gauravroy1995]

let me ask the team and will get back to you soon.

[Muthu3982]

Hi @Lukas742 I think here the ask is to see if we can remove Expand/Collapse label which is misleading along with the aria-expanded state, also I wouldn't recommend in removing expanded state announcement, hence can you please check if is possible to update the aria-label to avoid redundant information?

[Lukas742]

Hi all,

the "expanded" state announcement is coupled with aria-expanded, so when we remove it the announcement will not be present.

We decided to allow controlling the aria-expanded and aria-label of the button by extending the accessibilityAttributes prop in the linked PR, while per default the behavior stays as it's now. Once this feature is released, you can then for example set:

      <ObjectPage
        accessibilityAttributes={{
          objectPageAnchorBar: {
            expandButton: {
              expanded: undefined, //this will remove `aria-expanded`
              accessibleName: 'Custom Label', // this will override the internal `aria-label`
            },
          },
        }}
      >

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v2.11.0 🎉

The release is available on v2.11.0

Your semantic-release bot 📦🚀