bug(mat-button-toggle): Disabled buttons are not ignored in radio pattern interaction for single select

[pmpak]

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

After the implementation of the keyboard interaction in v18 (#28548) we spotted a small issue with the behavior when there are disabled buttons in the mat-button-toggle-group. While navigating the selection in the group via keyboard, the selection can move into the disabled buttons and then stops, preventing the navigation to the rest of the items after the disabled button. Also, visually it looks like both disabled and the previous button are highlighted.

Reproduction

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

1. Open the example provided in Stackblitz
2. Set the focus on the mat-button-toggle component. (e.g. Press tab until you reach it, or simply click on the first item)
3. Use the arrow keys (either left/right or up/down) to navigate through the items.
4. Observe that the disabled button receives focus and gets selected.

Extra notes:
While the selection is on the disabled item, if you hit Space or Enter the selection will move back to the previous active item.

Expected Behavior

By using the arrow keys, the selection should rotate around the active buttons and ignore the disabled ones.

Actual Behavior

The selection allows selecting a disabled button, and once selected, it cannot move the selection further. When attempting to move back, the selection jumps over one item.

Environment

• Angular: 18.0.4
• CDK/Material: 18.0.4
• Browser(s): Firefox, Chrome, Safari
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, MacOS

Angular CLI: 18.0.5
Node: 18.20.3
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 18.0.4
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, material-experimental
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.5
@angular-devkit/build-angular   18.0.5
@angular-devkit/core            18.0.5
@angular-devkit/schematics      18.0.5
@angular/cli                    18.0.5
@schematics/angular             18.0.5
rxjs                            7.4.0
typescript                      5.4.5
zone.js                         0.14.6

[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.}