fix(material/radio): required attribute being set on buttons

fixes when `MatRadioGroup` is set to be required it was setting all of its `MatRadioButton`
to be required as-well which is confusing for assistive technologies, this commit ensures
we only set aria-required on group rather than all buttons unless button is being used
standalone of `MatRadioGroup`

fixes #30399

Author: naaajii

src/material/radio/radio.html

@@ -2,13 +2,17 @@
   <div class="mdc-radio" [class.mdc-radio--disabled]="disabled">
     <!-- Render this element first so the input is on top. -->
     <div class="mat-mdc-radio-touch-target" (click)="_onTouchTargetClick($event)"></div>
+    <!-- We don't want to add required attribute when button is used with MatRadioGroup as
+    we want to set directly it on MatRadioGroup as setting it on all MatRadioButton would be 
+    confusing for assistive technology users unless MatRadioButton is being used 
+    standalone or MatRadioButton is explicitly marked as required -->
     <input #input class="mdc-radio__native-control" type="radio"
            [id]="inputId"
            [checked]="checked"
            [disabled]="disabled && !disabledInteractive"
            [attr.name]="name"
            [attr.value]="value"
-           [required]="required"
+           [required]="getInputRequiredAttribute()"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
            [attr.aria-describedby]="ariaDescribedby"

src/material/radio/radio.spec.ts

@@ -524,6 +524,33 @@ describe('MatRadio', () => {
       expect(groupInstance.selected).toBe(null);
       expect(groupInstance.value).toBe('fire');
     });
+
+    it('should set aria-required on radio group when required', () => {
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      let group = fixture.debugElement.query(By.directive(MatRadioGroup)).nativeElement;
+
+      // by default it shouldn't be there
+      expect(group.hasAttribute('aria-required')).toBeFalse();
+
+      testComponent.isGroupRequired = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      group = fixture.debugElement.query(By.directive(MatRadioGroup)).nativeElement;
+      expect(group.hasAttribute('aria-required')).toBe(true);
+    });
+
+    it('should set not set required attribute on matRadioButton when matRadioGroup is required', () => {
+      testComponent.isGroupRequired = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      for (const radio of radioDebugElements) {
+        expect(radio.nativeElement.hasAttribute('aria-required')).toBeFalse();
+      }
+    });
   });
 
   describe('group with ngModel', () => {

src/material/radio/radio.ts

@@ -118,6 +118,7 @@ export function MAT_RADIO_DEFAULT_OPTIONS_FACTORY(): MatRadioDefaultOptions {
   host: {
     'role': 'radiogroup',
     'class': 'mat-mdc-radio-group',
+    '[attr.aria-required]': 'required ? required : null',
   },
 })
 export class MatRadioGroup implements AfterContentInit, OnDestroy, ControlValueAccessor {
@@ -804,4 +805,17 @@ export class MatRadioButton implements OnInit, AfterViewInit, DoCheck, OnDestroy
       }
     }
   }
+
+  protected getInputRequiredAttribute(): boolean | null {
+    // incase if MatRadioGroup has one of its MatRadioButton explicitly as required, then we
+    // we would wanna set it such as in radio-harness.spec.ts inside "should get required state"
+    // case.
+    if (this.radioGroup && this.required) return this.required;
+    // we never want to set required attribute on input when we have MatRadioGroup as we will set
+    // aria-required directly on MatRadioGroup as setting on all MatRadioButton for
+    // it's MatRadioGroup would be confusing for assistive technology.
+    if (this.radioGroup) return null;
+
+    return this.required;
+  }
 }

tools/public_api_guard/material/radio.md

@@ -50,6 +50,8 @@ export class MatRadioButton implements OnInit, AfterViewInit, DoCheck, OnDestroy
     // (undocumented)
     protected _elementRef: ElementRef<any>;
     focus(options?: FocusOptions, origin?: FocusOrigin): void;
+    // (undocumented)
+    protected getInputRequiredAttribute(): boolean | null;
     id: string;
     _inputElement: ElementRef<HTMLInputElement>;
     get inputId(): string;