p-slider doesn't pass Accessibility Insights for Web Fastpass (See also issue #11725)

[StevenLHale]

Describe the bug

We are using p-slider and are failing Accessibility Insights Fastpass aria-allowed-attr rule. Looks like the p-slider-handle span doesn't allow aria-valuemin, etc. unless it has a role set to support those attributes, such as "slider" role, which also requires aria-label of some sort. As workaround we set the role and aria-label in code which allows Fastpass to pass. I looked for a way to set it in the html but didn't find it. We see FastPass failing on this sample as well: https://www.primefaces.org/primeng-v14-lts/slider, even after adding ariaLabel as docs recommend.

Given issue #11725 was resolved Completed I tried to remove the workaround code we have that uses ngAfterViewInit() and element.setAttribute(). With the workaround Accessibility Insights FastPass succeeds for p-slider, but after removing it then it fails again. FastPass results:

Title: WCAG 4.1.2: Ensures every ARIA input field has an accessible name (.p-slider-handle[role="slider"][pautofocus=""])
Tags: Accessibility, WCAG 4.1.2, aria-input-field-name

Issue: Ensures every ARIA input field has an accessible name (aria-input-field-name - https://accessibilityinsights.io/info-examples/web/aria-input-field-name)

Element path: .zoom-options[_ngcontent-ng-c2119708552=""][ng-reflect-ng-class="[object Object]"] > .zoom-slider-wrapper[ng-reflect-content="Zoom in"][tooltipposition="left"] > p-slider > .p-slider.p-slider-vertical[data-pc-name="slider"] > .p-slider-handle[role="slider"][pautofocus=""]

Snippet:

How to fix:
Fix any of the following:
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute

Environment

Environment: Microsoft Edge version 131.0.0.0, Windows 11, Angular

Reproducer

No response

Angular version

17.3.12

PrimeNG version

17.18.10

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

Edge 131.0.0.0

Steps to reproduce the behavior

No response

Expected behavior

Accessibility Insights FastPass should pass when using p-slider.