SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

[Menu]: a11y: Menu dialog does not have an accessible name #9313

Closed pankajpandey01 closed 3 months ago

pankajpandey01 commented 4 months ago

Describe the bug

[Menu]: a11y: Menu dialog does not have an accessible name

Isolated Example

No response

Reproduction steps

  1. Go to https://sap.github.io/ui5-webcomponents-react/?path=/story/modals-popovers-menu--default&globals=backgrounds.grid:!false
  2. Open Menu dialog
  3. Run axe tool on browser

Observed error in Axe: ARIA dialog and alertdialog nodes should have an accessible name

Expected Behaviour

accessibleName property should be provided.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.0

UI5 Web Components Version

1.24.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SuccessFactors

Declaration

Lukas742 commented 4 months ago

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

kineticjs commented 4 months ago

Hi @pankajpandey01 ,

UI5 Web Components provide the prerequisites for screen reader support based on the HTML, ARIA, and WCAG standards. All screen readers that follow those standards should work fine. Nevertheless, there are deviations in the interpretation depending on the combination of browser and screen reader. UI5 Web Components focus on compliance with the standards, rely on automated checks for accessibility and manual tests with reference testing environments.

For Screen Reader Support, we recommend using JAWS 2021 + Chrome (latest), and for HTML/ARIA validation the recommended testing tool is Access Assistant. UI5 Web Components support other environments to the extent of providing a valid HTML and ARIA implementation following the WCAG standards.

Please note that reference testing environments may change over time to reflect changes in the usage of different browsers, their maintenance period, and increased accessibility compliance.

When reporting issues with different testing environments, please ensure that the issue is not false positive, a real accessibility concern is present and there is an impact over the users. Therefore, we recommend to retest the issue using the mentioned reference testing tools and additionally with plain HTML.

In order to process the issues correctly, we would like to have the following information provided:

Issue description Reference to the suspected violated accessibility requirement (e.g. Web Content Accessibility Guidelines, WCAG 2.0, BITV 2.0, EN 301 549) Isolated example Steps to reproduce UI5 Web Components version OS/Platform: {...} Browser: {...} Testing Tool

Thank you

pankajpandey01 commented 4 months ago

HI @kineticjs Requested information is provided in description. Thanks, Pankaj

GerganaKremenska commented 4 months ago

Hello @ui5-webcomponents-topic-b I am forwarding this issue to you, because ui5-menu compomnent is missing an accessible name. To reproduce: 1) open https://sap.github.io/ui5-webcomponents/components/Menu/ 2) open menu. 3) in Dev Tools run "Axe".

Missing accessbile name of element with role="dialog". Need to add accessible name to the wrapping responsive popover of the menu. Screenshot 2024-07-08 at 11 41 10

Best Regards, Gergana