Sidebar: Close button is missing discernible text

[WTW-Steve-Martin]

Describe the bug

The Axe Dev Tools for Accessibility is reporting that the close button for the p-sidebar doesn't have any discernible text.

Environment

Windows 10

Reproducer

No response

Angular version

17.2.1

PrimeNG version

17.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

Chrome and Edge

Steps to reproduce the behavior

1. Install the Axe Dev Tools for Accessibility plug-in.
2. Open primeng sidebar page (https://primeng.org/sidebar) on Chrome/Edge browser.
3. Scan the page with Axe

Expected behavior

The sidebar passes all Axe tests.

[maruthumj]

@WTW-Steve-Martin I will start working on this one

[WTW-Steve-Martin]

Thanks very much

[maruthumj]

@WTW-Steve-Martin there is one @input property is there called "ariaLabel". can you please pass value to that property and check?

[WTW-Steve-Martin]

I'm afraid adding the ariaLabel property (highlighted in yellow) to the p-sidebar did not change it's associated close button.

As you can see the close button (highlighted in grey) does not include an aria label.

Ideally, I would like it to have the aria-label of 'sidebar aria-label' + '_close'. Or something like that.

[maruthumj]

@WTW-Steve-Martin sorry didn't notice it was a sidenav. you can pass the aria-label by using "ariaCloseLabel" property from sidenav. I hope this will resolve your issue!

[WTW-Steve-Martin]

That solved it. Thanks very much