search

primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.22k stars 4.55k forks source link

SelectButton: the aria-labelledby attribute value is invalid for the div.p-button(s) #14979

Open barbGit2 opened 6 months ago

barbGit2 commented 6 months ago

Describe the bug

The div.p-button's aria-labelledby attribute values in the p-selectButton are invalid. The value is the same as the aria-label, but it should be pointing to the id attribute of the label element. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby

Environment

Linux Chrome browser

Reproducer

No response

Angular version

16

PrimeNG version

16.9.1 and master

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.2

Browser(s)

Chrome 122.0.6261.94

Steps to reproduce the behavior

  1. In the browser, G=go to PrimeNG's SelectButton page (https://primeng.org/selectbutton)
  2. Use the browser's Developer tool's Elements tab's 'Select an element' button to select one of the button elements inside the p-selectButton. The aria-labelledby attribute is the value of the option and NOT the id of the label element

Expected behavior

The aria-labelledby attribute should point to the id of the label element

cetincakiroglu commented 6 months ago

Hi,

I tested the component with AxeDevtools and couldn't get the error you mentioned above. Which test tool you've used to catch the error?

barbGit2 commented 6 months ago

I am running jasmine tests using Axe, but my tests are not picking up that error either. I do not think that means that this issue should be ignored. If you look at the docs (Mozilla aria-labelledby and https://w3c.github.io/aria/#aria-labelledby), it does say the 'aria-labelledyby' attribute "identifies the element (or elements) that labels the current element" and that the value should be an 'ID reference list'.

cetincakiroglu commented 6 months ago

Hi,

Overriding any property will be available by PassThrough implementation. You'll be able to override and assign properties. This feature is currently under development in https://github.com/primefaces/primeng/tree/passthrough we're planning to release within v17 for all components. Moving the issue to the 17.next milestone, we'll close this issue once the PassThrough for selectButton is done.