bug(MatAnchor): disabledInteractive not correctly applied

[caleniuc]

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

No response

Description

MAT_ANCHOR_HOST applies aria-disabled differently than MAT_BUTTON_HOST. On the anchor, aria-disabled is applied the same as disabled, so disabledInteractive has no effect on it.

Is this intended? I'd expect to be able to navigate via keyboard even on <a> buttons, if disabledInteractive and disabled are set.

Reproduction

StackBlitz link: https://stackblitz.com/edit/soecj6?file=src%2Fexample%2Fbutton-overview-example.html
Steps to reproduce:

1. Try to navigate via keyboard to the two buttons
2. Notice that only <button> is reachable, while <a> is not

Expected Behavior

<a> button is reachable via keyboard if disabledInteractive is set and the button is disabled. - aria-disabled is applied on them, like on <button>

Actual Behavior

<a> button is not reachable via keyboard if disabledInteractive is set and the button is disabled.

Environment

• Angular: v18, v19.0.0-next.2
• CDK/Material: v18, v19.0.0-next.2
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[caleniuc]

The tab navigation issue probably is due to the default tabindex of an <a> that does not have a href.
But still, we'd expect to have an aria-disabled in this case for screen readers, so they can identify it as disabled.

[crisbeto]

You're right that it's because of the lack of href https://stackblitz.com/edit/soecj6-g2sfu3?file=src%2Fexample%2Fbutton-overview-example.html. I don't think there's a way we can work around it, because even with tabindex="0" the browser doesn't allow tabbing to the anchor without an href. I'm closing the issue since omitting the href is invalid anyways.

[caleniuc]

@crisbeto, there's still the part regarding aria-disabled, it does not apply.

It can be seen in your example as well, aria-disabled applies only for the button, not for the a tag. Isn't this still an issue?

VoiceOver recognizes only the button as being disabled, not a as well.

Should I create a separate issue for this or can this be reopened?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}