diff --git a/docs/guides/formly.md b/docs/guides/formly.md index 050a7be00c..8430787029 100644 --- 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 index 87dda999a7..ebb5a72851 100644 --- 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 index 458d1e4a1c..2387f5d4e8 100644 --- 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 index b1f48e4768..4d0a12e981 100644 --- 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 index e1bfe62915..1257e2a0fe 100644 --- 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 index acab6cc223..8cd5d6f65b 100644 --- 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" > 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 index 4b414a939e..dd75cc1c19 100644 --- 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 index 57f3f4cf19..0c81128621 100644 --- 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 index d4f6f33f02..b6e6b2f528 100644 --- 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" > 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 index 82714bc1a3..71d5e14ba3 100644 --- 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 *