developernm
commented
1 week ago The user adding the aria-label tag to the host element being <admiralty-checkbox> is causing the error "The 'aria-label' attribute is being used on elements with the generic role".
As the component already contains a label nested within, the users need to add an aria-label tag is redundant.
The suggestion of implementing logic to have the label hidden but still visible for screen readers is a possibility, but wouldn't stop the user from getting this error, as they've added the property themselves.
Also after looking into this component, there is another issue regards to the click event behaving differently when clicking inside, outside or on the border of the checkbox.
Describe the bug
The
aria-labelattribute is being used on elements with thegenericrole, which is not allowed. This violates WCAG 2.2 Success Criterion 4.1.2 (Name, Role, Value).To Reproduce
Steps to reproduce the behavior:
Open the web application.
Navigate to the "Confirm exchange set content" page or "Selecting ENCs" page.
Use a web accessibility testing tool (e.g., ARC Toolkit).
Observe the error regarding the use of
aria-labelongenericrole elements.Expected behavior
The
aria-labelattribute should not be used on elements with thegenericrole. Instead, elements should use roles that allow thearia-labelattribute, such asbutton,checkbox, etc.Screenshots
Additional context
admiralty-checkboxclass and containing thearia-labelattribute despite having arole="generic".inputelement for file uploads has thearia-labelattribute despite being assigned thegenericrole.