bug: overriding aria attributes is not easy or straightforward
See original GitHub issueBug Report
Ionic version: [x] 4.x
Current behavior: Most Accessibility attributes, e.g. Aria-Label, Aria-LabeledBy, Role set on the Ion-Button does not work
Expected behavior: The Accessibility attributes should work on Ion-Button
Steps to reproduce: Create a simple Ion-Button with following attributes:
<ion-button role="link" aria-label="this is my data">
View my data </ion-button>
This sample code should be read out as: “this is my data link”, but instead it reads out “View my data button”
Other information: Root Cause: Ion-Button has a shadow root: “button” . The attributes are not copied over to the button element. So the aria attributes not working.
Note: A workaround is to create a directive with MutationObserver to copy the aria attributes from Ion-Button to its shadow-root button.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Providing Accessible Names and Descriptions | APG - W3C
Several of the naming techniques highlight specific accessibility advantages of using HTML features instead of ARIA attributes. Rule 4: Avoid Browser Fallback.
Read more >ARIA states and properties - Accessibility - MDN Web Docs
ARIA attributes enable modifying an element's states and properties as defined in the accessibility tree. Note: ARIA only modifies the ...
Read more >Provide helpful error messages | Digital Accessibility
Make it easy to locate the problem: Programmatically associate each error message with its corresponding form control using the aria-describedby attribute.
Read more >What are these attributes: `aria-labelledby` and `aria-hidden`
aria -hidden (state) : Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented...
Read more >Decoding Label and Name for Accessibility - WebAIM
If an element uses ARIA labels ( aria-label or aria-labelledby ), this will override any other contender for accessible name, sometimes with ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@BingSZou, can-you show us an example of your workaround? We have the same problem.
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.