angular icon indicating copy to clipboard operation
angular copied to clipboard

Aria-package documentation: Hide menu-icons from accessible text in example page

Open PhilippMDoerner opened this issue 1 month ago • 1 comments

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.

PhilippMDoerner avatar Dec 01 '25 21:12 PhilippMDoerner

We should probably add aria-hidden to all those icons.

JeanMeche avatar Dec 01 '25 21:12 JeanMeche