bug(mat-radio-button): VoiceOver reads multiple group, set aria-hidden to supporting elements

[d-timur-reply]

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

Currently mat-radio-button includes some supporting elements, such as MatRipple, .mdc-radio__background and .mat-mdc-radio-touch-target.

These are rendered as div, which get picked up by VoiceOver and read as "group". This is irritating because navigating through a radio group should only read information relevant to radio input (label, state etc.) and ignore purely visual elements without content.

Setting aria-hidden="true" to these elements fixes this issue and each radio button is read according to their label.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-yjytlsyn?file=src%2Fmain.ts
Steps to reproduce:

1. Enable VoiceOver
2. Navigate through radio buttons

Expected Behavior

Navigating through a radio group with a screen reader should only have 1 navigation step per radio button and should not read purely visual elements.

Actual Behavior

Navigating through a radio group reads multiple empty "group" elements per radio button

Environment

• Angular: tested with 18 and 20
• CDK/Material: tested with 18 and 20
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): tested on macOS 26 with VoiceOver