SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
426 stars 94 forks source link

[Popover]: [Anything which comes under the Label component is not read by the screen reader also the focus is not set to the Label message.][Component Name]: [Bug Description] #5862

Closed sanjayC5373903 closed 3 weeks ago

sanjayC5373903 commented 1 month ago

Describe the bug

return ( <> <Button
data-testid={popoverBtn-${testid}}
style={{ marginLeft: '0.5em' }} id={'openPopoverBtn'} icon="hint" design="Transparent" accessibleName={labelToolTip} tooltip={labelToolTip} onClick={handleButtonClick} onKeyDown={handleButtonKeyDown} /> {createPortal( <Popover data-testid="iconPopoverBtn" id="iconPopoverBtn" verticalAlign="Bottom" initialFocus="iconPopoverBtn" ref={popoverRef} placementType="Right" onFocus={e => e.stopPropagation()} accessibleName={labelToolTip}

, document.body, )} </> );

Isolated Example

--

Reproduction steps

1. 2. 3. ...

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

0.27.5

UI5 Web Components Version

1.6.0

Browser

Chrome

Operating System

Windows11

Additional Context

--

Relevant log output

No response

Organization

No response

Declaration

MarcusNotheis commented 1 month ago

Hi @sanjayC5373903,

please add a reproducible example, preferably by using this StackBlitz template. In addition to that, are you really running on 0.27.5? This version is close to being two years old, so we can't support versions which are that far away from our current code line.

sanjayC5373903 commented 1 month ago

Hi @MarcusNotheis
I preferably by using this template. added our code. https://stackblitz.com/edit/github-fl3jjf?file=src%2FApp.tsx,tsconfig.json After pressing enter it is not reading the popover text even for the newer Version . it is reading only the btn-name ( info)

MicrosoftTeams-image (1)

The issue is reproducible in latest version. I want the popover text to be read out by jaws reader when user clicks on the button

Lukas742 commented 1 month ago

Hi @sanjayC5373903

I don't have access to JAWS, so I wasn't able to test it with it, but for Apple Voice Over and NVDA removing the initialFocus prop did fix the issue for me. Since the popover itself is not interactive, you shouldn't set the initial focus to it as only interactive elements are focusable.

Here you can find the example that returned correct announcements for me: https://stackblitz.com/edit/github-fl3jjf-qnjwxj?file=src%2FApp.tsx,tsconfig.json

If you're still facing this issue with JAWS, or have additional questions regarding screen reader support of the Popover please let us know. We will then forward this issue to the ui5-webcomponents repo, since the component is developed there.

github-actions[bot] commented 4 weeks ago

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Inactive issues will be closed after 7 days. Thanks.

github-actions[bot] commented 3 weeks ago

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please first check to see if the maintainers have requested additional input and provide it if necessary, or post a detailed description of why this issue is still a problem.