File tree 3 files changed +33
-1
lines changed
3 files changed +33
-1
lines changed Original file line number Diff line number Diff line change 2
2
< div class ="mdc-radio " [class.mdc-radio--disabled] ="disabled ">
3
3
<!-- Render this element first so the input is on top. -->
4
4
< div class ="mat-mdc-radio-touch-target " (click) ="_onTouchTargetClick($event) "> </ div >
5
+ <!-- We don't want to add required attribute when button is used with MatRadioGroup as
6
+ we want to set directly it on MatRadioGroup as setting it on all MatRadioButton would be
7
+ confusing for assistive technology users unless MatRadioButton is being used
8
+ standalone -->
5
9
< input #input class ="mdc-radio__native-control " type ="radio "
6
10
[id] ="inputId "
7
11
[checked] ="checked "
8
12
[disabled] ="disabled && !disabledInteractive "
9
13
[attr.name] ="name "
10
14
[attr.value] ="value "
11
- [required] ="required "
15
+ [required] ="radioGroup ? null : required "
12
16
[attr.aria-label] ="ariaLabel "
13
17
[attr.aria-labelledby] ="ariaLabelledby "
14
18
[attr.aria-describedby] ="ariaDescribedby "
Original file line number Diff line number Diff line change @@ -524,6 +524,33 @@ describe('MatRadio', () => {
524
524
expect ( groupInstance . selected ) . toBe ( null ) ;
525
525
expect ( groupInstance . value ) . toBe ( 'fire' ) ;
526
526
} ) ;
527
+
528
+ it ( 'should set aria-required on radio group when required' , ( ) => {
529
+ fixture . changeDetectorRef . markForCheck ( ) ;
530
+ fixture . detectChanges ( ) ;
531
+
532
+ let group = fixture . debugElement . query ( By . directive ( MatRadioGroup ) ) . nativeElement ;
533
+
534
+ // by default it shouldn't be there
535
+ expect ( group . hasAttribute ( 'aria-required' ) ) . toBeFalse ( ) ;
536
+
537
+ testComponent . isGroupRequired = true ;
538
+ fixture . changeDetectorRef . markForCheck ( ) ;
539
+ fixture . detectChanges ( ) ;
540
+
541
+ group = fixture . debugElement . query ( By . directive ( MatRadioGroup ) ) . nativeElement ;
542
+ expect ( group . hasAttribute ( 'aria-required' ) ) . toBe ( true ) ;
543
+ } ) ;
544
+
545
+ it ( 'should set not set required attribute on matRadioButton when matRadioGroup is required' , ( ) => {
546
+ testComponent . isGroupRequired = true ;
547
+ fixture . changeDetectorRef . markForCheck ( ) ;
548
+ fixture . detectChanges ( ) ;
549
+
550
+ for ( const radio of radioDebugElements ) {
551
+ expect ( radio . nativeElement . hasAttribute ( 'aria-required' ) ) . toBeFalse ( ) ;
552
+ }
553
+ } ) ;
527
554
} ) ;
528
555
529
556
describe ( 'group with ngModel' , ( ) => {
Original file line number Diff line number Diff line change @@ -118,6 +118,7 @@ export function MAT_RADIO_DEFAULT_OPTIONS_FACTORY(): MatRadioDefaultOptions {
118
118
host : {
119
119
'role' : 'radiogroup' ,
120
120
'class' : 'mat-mdc-radio-group' ,
121
+ '[attr.aria-required]' : 'required ? required : null' ,
121
122
} ,
122
123
} )
123
124
export class MatRadioGroup implements AfterContentInit , OnDestroy , ControlValueAccessor {
You can’t perform that action at this time.
0 commit comments