fix(core): set aria-hidden to required marker (#2913)

fix #2887
ngx-formly · Jul 6, 2021 · 2d70d9f · 2d70d9f
1 parent 32fac5b
commit 2d70d9f
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 8 deletions.
diff --git a/src/bootstrap/src/lib/types/checkbox.ts b/src/bootstrap/src/lib/types/checkbox.ts
@@ -26,7 +26,7 @@ import { FieldType } from '@ngx-formly/core';
         [class.custom-control-label]="to.formCheck.indexOf('custom') === 0"
       >
         {{ to.label }}
-        <span *ngIf="to.required && to.hideRequiredMarker !== true">*</span>
+        <span *ngIf="to.required && to.hideRequiredMarker !== true" aria-hidden="true">*</span>
       </label>
     </div>
   `,

diff --git a/src/bootstrap/src/lib/wrappers/form-field.wrapper.ts b/src/bootstrap/src/lib/wrappers/form-field.wrapper.ts
@@ -7,7 +7,7 @@ import { FieldWrapper } from '@ngx-formly/core';
     <div class="form-group" [class.has-error]="showError">
       <label *ngIf="to.label && to.hideLabel !== true" [attr.for]="id">
         {{ to.label }}
-        <span *ngIf="to.required && to.hideRequiredMarker !== true">*</span>
+        <span *ngIf="to.required && to.hideRequiredMarker !== true" aria-hidden="true">*</span>
       </label>
 
       <ng-template #fieldComponent></ng-template>

diff --git a/src/ionic/src/lib/wrappers/form-field.ts b/src/ionic/src/lib/wrappers/form-field.ts
@@ -7,7 +7,7 @@ import { FieldWrapper } from '@ngx-formly/core';
     <ion-item [lines]="to.itemLines">
       <ion-label [position]="to.labelPosition">
         {{ to.label }}
-        <span *ngIf="to.required && to.hideRequiredMarker !== true">*</span>
+        <span *ngIf="to.required && to.hideRequiredMarker !== true" aria-hidden="true">*</span>
       </ion-label>
       <ng-template #fieldComponent></ng-template>
     </ion-item>

diff --git a/src/kendo/src/lib/types/checkbox.ts b/src/kendo/src/lib/types/checkbox.ts
@@ -13,7 +13,7 @@ import { FieldType } from '@ngx-formly/core';
     <label [for]="id" class="k-checkbox-label">
       <span>
         {{ to.label }}
-        <span *ngIf="to.required && to.hideRequiredMarker !== true" class="k-required">*</span>
+        <span *ngIf="to.required && to.hideRequiredMarker !== true" aria-hidden="true" class="k-required">*</span>
       </span>
     </label>
   `,

diff --git a/src/kendo/src/lib/wrappers/form-field.ts b/src/kendo/src/lib/wrappers/form-field.ts
@@ -7,7 +7,7 @@ import { FieldWrapper } from '@ngx-formly/core';
     <label [for]="id" class="k-form-field">
       <span *ngIf="to.label && to.hideLabel !== true">
         {{ to.label }}
-        <span *ngIf="to.required && to.hideRequiredMarker !== true" class="k-required">*</span>
+        <span *ngIf="to.required && to.hideRequiredMarker !== true" aria-hidden="true" class="k-required">*</span>
       </span>
       <ng-container #fieldComponent></ng-container>
     </label>

diff --git a/src/material/checkbox/src/checkbox.type.ts b/src/material/checkbox/src/checkbox.type.ts
@@ -15,7 +15,7 @@ import { FocusMonitor } from '@angular/cdk/a11y';
       [color]="to.color"
       [labelPosition]="to.align || to.labelPosition">
       {{ to.label }}
-      <span *ngIf="to.required && to.hideRequiredMarker !== true" class="mat-form-field-required-marker">*</span>
+      <span *ngIf="to.required && to.hideRequiredMarker !== true" aria-hidden="true" class="mat-form-field-required-marker">*</span>
     </mat-checkbox>
   `,
 })

diff --git a/src/material/form-field/src/form-field.wrapper.ts b/src/material/form-field/src/form-field.wrapper.ts
@@ -22,7 +22,7 @@ interface MatFormlyFieldConfig extends FormlyFieldConfig {
       <ng-container #fieldComponent></ng-container>
       <mat-label *ngIf="to.label && to.hideLabel !== true">
         {{ to.label }}
-        <span *ngIf="to.required && to.hideRequiredMarker !== true" class="mat-form-field-required-marker">*</span>
+        <span *ngIf="to.required && to.hideRequiredMarker !== true" aria-hidden="true" class="mat-form-field-required-marker">*</span>
       </mat-label>
 
       <ng-container matPrefix *ngIf="to.prefix || to._matPrefix">

diff --git a/src/primeng/src/lib/wrappers/form-field.ts b/src/primeng/src/lib/wrappers/form-field.ts
@@ -7,7 +7,7 @@ import { FieldWrapper } from '@ngx-formly/core';
     <div *ngIf="to.label && to.hideLabel !== true" class="ui-widget">
       <label [for]="id">
         {{ to.label }}
-        <span *ngIf="to.required && to.hideRequiredMarker !== true">*</span>
+        <span *ngIf="to.required && to.hideRequiredMarker !== true" aria-hidden="true">*</span>
       </label>
     </div>
     <ng-container #fieldComponent></ng-container>