feat: add aria-label property to formly components

intershop · Aug 29, 2023 · d60c051 · d60c051
1 parent cfe40ff
commit d60c051
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 1 deletion.
diff --git a/docs/guides/formly.md b/docs/guides/formly.md
@@ -251,7 +251,8 @@ Refer to the tables below for an overview of these parts.
 
 ### Field Types
 
-Template option `inputClass`: These css class(es) will be added to all input/select/textarea/text tags.
+- Template option `inputClass`: These CSS class(es) will be added to all input/select/textarea/text tags.
+- Template option `ariaLabel`: Adds an aria-label to all input/select/textarea tags.
 
 | Name                 | Description                                                                                  | Relevant props                                                                                                                                                                                                                                                                    |
 | -------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

diff --git a/src/app/shared/formly/types/checkbox-field/checkbox-field.component.html b/src/app/shared/formly/types/checkbox-field/checkbox-field.component.html
@@ -5,4 +5,5 @@
   class="form-check-input"
   [ngClass]="props.inputClass"
   [attr.data-testing-id]="field.key"
+  [attr.aria-label]="props.ariaLabel"
 />
diff --git a/src/app/shared/formly/types/checkbox-field/checkbox-field.component.ts b/src/app/shared/formly/types/checkbox-field/checkbox-field.component.ts
@@ -4,6 +4,8 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
 /**
  * Type for a basic checkbox field.
  *
+ * @props **ariaLabel** adds an aria-label to the component for better accessibility, recommended if there is no associated label
+ *
  * @defaultWrappers form-field-checkbox-horizontal
  *
  * @usageNotes

diff --git a/src/app/shared/formly/types/radio-field/radio-field.component.html b/src/app/shared/formly/types/radio-field/radio-field.component.html
@@ -7,4 +7,5 @@
   class="form-check-input"
   [ngClass]="props.inputClass"
   [attr.data-testing-id]="'radio-' + props.label"
+  [attr.aria-label]="props.ariaLabel"
 />
diff --git a/src/app/shared/formly/types/radio-field/radio-field.component.ts b/src/app/shared/formly/types/radio-field/radio-field.component.ts
@@ -4,6 +4,7 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
 /**
  * Basic type for radio buttons
  *
+ * @props **ariaLabel** adds an aria-label to the component for better accessibility, recommended if there is no associated label
  * @props **label** - the text that should be shown next to the radio button
  * @props **value** - the value that should be associated with this radio button
  *

diff --git a/src/app/shared/formly/types/select-field/select-field.component.html b/src/app/shared/formly/types/select-field/select-field.component.html
@@ -5,6 +5,7 @@
   class="form-control"
   [ngClass]="props.inputClass"
   [attr.data-testing-id]="field.key"
+  [attr.aria-label]="props.ariaLabel"
 >
   <ng-container *ngIf="selectOptions && selectOptions | formlySelectOptions : field | async as opts">
     <ng-container *ngFor="let opt of opts">

diff --git a/src/app/shared/formly/types/text-input-field/text-input-field.component.html b/src/app/shared/formly/types/text-input-field/text-input-field.component.html
@@ -5,4 +5,5 @@
   class="form-control"
   [ngClass]="props.inputClass"
   [attr.data-testing-id]="field.key"
+  [attr.aria-label]="props.ariaLabel"
 />
diff --git a/src/app/shared/formly/types/text-input-field/text-input-field.component.ts b/src/app/shared/formly/types/text-input-field/text-input-field.component.ts
@@ -4,6 +4,7 @@ import { FieldType, FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core'
 /**
  * Type for a basic input field
  *
+ * @props **ariaLabel** adds an aria-label to the component for better accessibility, recommended if there is no associated label
  * @props **type** supports all text types; 'text' (default), 'email', 'password', 'tel'
  *
  * @defaultWrappers form-field-horizontal & validation

diff --git a/src/app/shared/formly/types/textarea-field/textarea-field.component.html b/src/app/shared/formly/types/textarea-field/textarea-field.component.html
@@ -6,4 +6,5 @@
   class="form-control"
   [ngClass]="props.inputClass"
   [attr.data-testing-id]="field.key"
+  [attr.aria-label]="props.ariaLabel"
 ></textarea>
diff --git a/src/app/shared/formly/types/textarea-field/textarea-field.component.ts b/src/app/shared/formly/types/textarea-field/textarea-field.component.ts
@@ -4,6 +4,7 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
 /**
  * Type for a basic textarea field
  *
+ * @props **ariaLabel** adds an aria-label to the component for better accessibility, recommended if there is no associated label
  * @props **cols** - the amount of columns the textarea should have
  * @props **rows** - the amount of rows the textarea should have
  *