IBM Equal Access Accessibility Checker - Latest Deployment
Assistive technology
No response
Description
Problem: The ARIA attributes "aria-label" are not valid for the element
with ARIA role "presentation"
===== DEFECT DESCRIPTION =====
IBM 4.1.2 Name, Role, Value
Functionally, ARIA roles, states, and properties are analogous to CSS for assistive technologies. For screen reader users, ARIA controls the rendering of their non-visual experience. Incorrect ARIA misrepresents the visual experience, with potentially devastating effects on their corresponding non-visual experience. Incorrect ARIA misrepresents the intended experience to all assistive technology users, with potentially devastating effects.
Many HTML elements have native semantics that map, by default, to implied ARIA semantics (roles). Other elements specified as having No corresponding role do not have implicit ARIA semantics. Although they still have meaning it's not provided by ARIA. In order for assistive technologies to predictably represent the context and behavior of these elements (UI controls), these implicit semantics should not be overridden as defined in the ARIA in HTML - Document conformance requirements for use of ARIA attributes in HTML specification. It is therefore recommended that developers only add a role attribute to a semantically neutral and allowed HTML element such as a
or , rather than incorrectly attempting to override the semantics of the detected element. No ARIA is better than bad ARIA for assistive technology users.
===== EXPECTED RESULT =====
ARIA attributes must be valid for the element and ARIA role to which they are assigned
This is issue from https://github.ibm.com/ibmcloud/pal/issues/6271.
Based on the comments from dev: Seems to be related to the carbon Modal component. The PAL TagModal provides the aria-label prop. If this prop is provided then carbon adds it to the
Thanks for reporting this! I can confirm this in our storybook here
aria-label is being applied to the root div with role=presentation and it should not be. It looks like this is happening because we're not destructuring this property out of the component props and it's being included in ...rest spread onto the div.
Looking at v10, it appears to be working correctly. It might be as easy as adding aria-label to the props desctructured at the top of the component file so it's not spread onto the div with role=presentation
Package
@carbon/elements
Browser
Chrome
Operating System
Windows
Package version
V10..
React version
No response
Automated testing tool and ruleset
IBM Equal Access Accessibility Checker - Latest Deployment
Assistive technology
No response
Description
Problem: The ARIA attributes "aria-label" are not valid for the element
===== DEFECT DESCRIPTION ===== IBM 4.1.2 Name, Role, Value
Functionally, ARIA roles, states, and properties are analogous to CSS for assistive technologies. For screen reader users, ARIA controls the rendering of their non-visual experience. Incorrect ARIA misrepresents the visual experience, with potentially devastating effects on their corresponding non-visual experience. Incorrect ARIA misrepresents the intended experience to all assistive technology users, with potentially devastating effects.
Many HTML elements have native semantics that map, by default, to implied ARIA semantics (roles). Other elements specified as having No corresponding role do not have implicit ARIA semantics. Although they still have meaning it's not provided by ARIA. In order for assistive technologies to predictably represent the context and behavior of these elements (UI controls), these implicit semantics should not be overridden as defined in the ARIA in HTML - Document conformance requirements for use of ARIA attributes in HTML specification. It is therefore recommended that developers only add a role attribute to a semantically neutral and allowed HTML element such as a or , rather than incorrectly attempting to override the semantics of the detected element. No ARIA is better than bad ARIA for assistive technology users.
===== EXPECTED RESULT ===== ARIA attributes must be valid for the element and ARIA role to which they are assigned
WCAG 2.1 Violation
No response
Reproduction/example
Reproduce
Steps to reproduce
Code of Conduct
This is issue from https://github.ibm.com/ibmcloud/pal/issues/6271. Based on the comments from dev: Seems to be related to the carbon Modal component. The PAL TagModal provides the aria-label prop. If this prop is provided then carbon adds it to the
Pls help to check and fix, thanks
Thanks for reporting this! I can confirm this in our storybook here
aria-labelis being applied to the root div withrole=presentationand it should not be. It looks like this is happening because we're not destructuring this property out of the component props and it's being included in...restspread onto the div.Looking at v10, it appears to be working correctly. It might be as easy as adding aria-label to the props desctructured at the top of the component file so it's not spread onto the div with role=presentation