ui5-webcomponents-react icon indicating copy to clipboard operation
ui5-webcomponents-react copied to clipboard

ObjectStatus: Accessibility issues with reading ObjectStatus stateAnnouncementText and missing tooltips on icon in VoiceOver on Mac OS.

Open samanrasool opened this issue 1 year ago • 0 comments

Describe the bug

The MacOs VoiceOver App does not read the stateAnnouncementText in the ObjectStatus component correctly. This issue has been identified in two ways:

  1. When using the attributes showDefaultIcon and state="Success", the screen reader should read "Success". However, this is not happening.

  2. When only an icon, either the default icon or the Icon component, is used, hovering over the ObjectStatus should display a tooltip describing the icon. However, no tooltip is being provided.

Additionally, instead of reading the relevant information, VoiceOver is reading "Object Status" instead.

This is a bug and needs to be addressed as it does not meet the accessibility requirements for the application.

Isolated Example

https://stackblitz.com/edit/github-8ksjkm?file=src%2FApp.tsx

Reproduction steps

  1. Open VoiceOver app on your mac book
  2. Focus on Object status and notice what voiceover reads.

Expected Behaviour

  1. The screen reader should read state of the object status accordingly.
  2. Hovering over the object status containing only icon should display a tooltip

Screenshots or Videos

Screenshot 2024-03-19 at 9 05 15 PM

UI5 Web Components for React Version

1.26.0

UI5 Web Components Version

1.23.0

Browser

Chrome

Operating System

Mac Os Sonoma 14.3.1

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

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

samanrasool avatar Mar 20 '24 01:03 samanrasool