Aria-package documentation: Hide menu-icons from accessible text in example page
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
No
Description
I believe the examples for aria-menu would benefit from hiding the icons from screenreaders, as the accessible text they produce is somewhat confusing.
Currently the name of the icon itself also gets spoken.
I think it makes sense to just generally add aria-hidden="true" to icons on the angular page - they tend to not convey any additional information you don't provide regardless and as in this case just add confusing noise. If you have an interactive element such as a button or link consisting of only an icon, you should be adding invisible text or aria-label to the button/anchor-tag anyway.
Please provide a link to a minimal reproduction of the bug
https://angular.dev/guide/aria/menu
Please provide the exception or error you saw
When you go over the menu-examples with a screenreader, you get texts such as this for the first example:
- "Mark line email line read mark as read"
- "Snooze snooze"
- "Categories categorize"
- "Archiv archive"
- "Report report spam"
- "Delete delete"
Please provide the environment you discovered this bug in (run ng version)
Angular v21 and whatever else angular.dev uses.
Anything else?
@angular/aria makes sense to add to the Which @angular/* package(s) are the source of the bug? dropdown.
It is currently not part of it. I'm happy to provide a small PR for this, but I'd like to first get the confirmation that this is desired before I go through the hassle.
We should probably add aria-hidden to all those icons.