Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(MAT-ICON): aria-disabled="false" is not set anymore (version >= 17.1.0) #28772

Open
1 task done
B34v0n opened this issue Mar 25, 2024 · 5 comments
Open
1 task done
Labels
Accessibility This issue is related to accessibility (a11y) area: material/button P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@B34v0n
Copy link

B34v0n commented Mar 25, 2024

Is this a regression?

  • 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:

  1. Add a mat-icon-button like so: <a mat-icon-button><mat-icon>save</mat-icon></a>
  2. Inspect in Console, there is no aria-disabled="false" set in the a-tag (version >= 17.1.0)
  3. 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
@B34v0n B34v0n added the needs triage This issue needs to be triaged by the team label Mar 25, 2024
@wagnermaciel
Copy link
Contributor

This seems like it could be related to #28242

@wagnermaciel wagnermaciel added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) area: material/button and removed needs triage This issue needs to be triaged by the team labels Mar 27, 2024
@zarend
Copy link
Contributor

zarend commented Mar 29, 2024

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

@B34v0n
Copy link
Author

B34v0n commented Apr 8, 2024

Hi @zarend, It has nothing to do with hidden, it's about disabled. So sadly, that does not resolve the issue.

@B34v0n
Copy link
Author

B34v0n commented Apr 8, 2024

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.

@zarend
Copy link
Contributor

zarend commented Apr 15, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility This issue is related to accessibility (a11y) area: material/button P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

No branches or pull requests

3 participants