[Sourcing-2][Accessibility: ACC-264.1] Role attribute not provided in FD-DYNAMIC-PAGE

[JyotiKumari1507]

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

Component having issue: https://sap.github.io/fundamental-ngx/#/platform/dynamic-page

At a basic level, all custom controls within a web application should provide information about the component name, state and type. The name of the component is the principal piece of information and should come first in the textual representation of the element. When custom elements do not expose textual equivalents, users who can not see the element or users who can not see color may not be able to fully interact with the element. For example, without knowing the role or state of an element, the user of a screen reader may not know what actions can be performed on an element even if the element exposes a textual name.

This FD-DYNAMIC-PAGE-HEADER is focusable but lacks a role attribute.

Code Snippet:

Shared Keys

Can you handle that on the application side

No

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

All latest version

If this is a bug, please provide steps for reproducing it; the exact components you are using;

Using Access assistant easily can check.

1. Login with the URL Provided.
2. Activate 'shared keys' app. • Download Access assistant tool from level access. • For registered AMP user, login with your SAP email ID into SAP AMP instance: sap.levelaccess.net

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Yes we have got this bug from Accessibility expert only.

Did you check the documentation and the API?

Yes

Did you search for similar issues?

Is there anything else we should know?

[droshev]

There are 1 (+1) issues:

• the header is focusable but missing role and aria-label
• if we set those to the whole header, then the following issue will pop: that there is another focusable button inside this "button" - header. In this case we need to make a focusable header element which is sibling of the toolbar buttons. (example https://ui5.sap.com/#/entity/sap.f.DynamicPage/sample/sap.f.sample.DynamicPageWithStickySubheader and inspect which html elements gets the focus when the user clicks on the header document.activeElement)

This will require some refactoring of the markup