components
components copied to clipboard
bug(MAT-ICON): aria-disabled="false" is not set anymore (version >= 17.1.0)
Is this a regression?
- [X] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
17.0.6
Description
For active a
-tags with mat-icon-buttons there was the label aria-disabled="false"
set.
It won't be set anymore for every Version >= 17.1.0.
Reproduction
stackblitz won't run my code, I don't know why. It cannot install the dependencies.
That's why I created a github repo: https://github.com/B34v0n/mat-icon-aria/branches .
On the main branch, there is a working example with 17.0.6 and on the branch update-to-17.3.1
there is exactly the same, but with updated dependecies.
Steps to reproduce:
- Add a mat-icon-button like so:
<a mat-icon-button><mat-icon>save</mat-icon></a>
- Inspect in Console, there is no
aria-disabled="false"
set in thea
-tag (version >= 17.1.0) - In 17.0.6 it is still set
Expected Behavior
The attribute aria-disabled="false"
should be set for active a-Tags.
Actual Behavior
The attribute aria-disabled="false"
is not set for active a-Tags.
Environment
- Angular: 17.3.1
- CDK/Material: 17.3.1
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
This seems like it could be related to https://github.com/angular/components/pull/28242
Hello folks,
From Icon accessibility instructions,
...mat-icon is marked as aria-hidden="true" by default, but this can be overridden by adding aria-hidden="false" to the element.
Does adding aria-hidden="false" resolve the issue for you?
Best Regards,
Zach
Hi @zarend, It has nothing to do with hidden, it's about disabled. So sadly, that does not resolve the issue.
Hi @wagnermaciel, yes, it seems like it absolutely has to do something with your mentioned issue.
I found this part: https://github.com/angular/components/pull/28242/files#diff-acd842e8c1b9a16bb01e58101293d68888bd462f26515cbd527a0b43579aa61cL178, where the aria-disabled is set to the disabled attribute to String (so 'true' or 'false').
Now it's set to _getDisabledAttribute()
, which returns null or true.
Can you say, if that is on purpose, that the aria-disabled is set like that and it can not be set to false
anymore? or was that kind of a mistake?
I myself think, it is important to set aria-disabled='false'
because of accessibility.
Hello @B34v0n ,
Thank you for clarifying. I'm not sure I understand the problem statement. I don't think that MatIcon
is intended to be interactive. Since they're not interactive, I don't see why aria-disabled
needs to be in play here.
Best Regards,
Zach
Closing based on the discussion.