Sidebar : Combination of role 'complementary' and aria-modal attribute causes accessibility violation.

[rohitpant-wtw]

Describe the bug

Currently the role for the prime ng sidebar is set as 'complementary' (not configurable but hardcoded in library [Pic-1]) which is correct for a sidebar panel but due to aria-modal attribute being present in the element we are getting accessibility violation (Pic-2).

As per the aria-modal description, it is only recommended for role values like 'dialog' and 'alertdialog' (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal)

We would ideally want the sidebar to have role 'complementary' with overlay mask behind the sidebar and the aria-modal attribute not present at all (even a value 'false' will result in accessibility violation) in the HTML element.

Otherwise if you are planning to make the [attr.role] as configurable then we will also need to give ability to add [attr.aria-label] for avoiding further accessibility violations.

[Pic-1]

[Pic-2]

Environment

OS: Windows 10

Reproducer

No response

Angular version

16.2.10

PrimeNG version

16.5.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

Chrome, Edge

Steps to reproduce the behavior

1. Open primeng sidebar page (https://primeng.org/sidebar) on Chrome/Edge browser.
2. Open devtools (F12).
3. Open Lighthouse and select accessibility from categories (Pic-1)
4. Run 'Analyze page load' and open the sidebar on the primeng website when the test is running (Pic-2).
5. Once the report is ready accessibility violation is present (Pic-3).

[Pic-1]

[Pic-2]

[Pic-3]

Expected behavior

1. Sidebar should have role 'complementary'. --> Already present
2. Sidebar should have overlay mask behind the sidebar. --> Already present
3. Sidebar div element should not have aria-modal attribute as the combination of role 'complementary' and attribute 'aria-modal' (either true/false) is causing accessibility violation

[cetincakiroglu]

Hi,

Thanks a lot for the detailed explanation, we'll address this issue with the 17.8.0 release.