diff --git a/projects/ng-aquila/documentation/examples/table/table-selecting/table-selecting-example.html b/projects/ng-aquila/documentation/examples/table/table-selecting/table-selecting-example.html
index 9bb66d89f..256cad48c 100644
--- a/projects/ng-aquila/documentation/examples/table/table-selecting/table-selecting-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-selecting/table-selecting-example.html
@@ -69,7 +69,7 @@
|
diff --git a/projects/ng-aquila/documentation/examples/table/table-single-select/table-single-select-example.html b/projects/ng-aquila/documentation/examples/table/table-single-select/table-single-select-example.html
index 4a8a1f32b..5ec4b4bff 100644
--- a/projects/ng-aquila/documentation/examples/table/table-single-select/table-single-select-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-single-select/table-single-select-example.html
@@ -21,7 +21,7 @@
|
diff --git a/projects/ng-aquila/src/checkbox/checkbox.component.html b/projects/ng-aquila/src/checkbox/checkbox.component.html
index b04398f75..91b51ce6a 100644
--- a/projects/ng-aquila/src/checkbox/checkbox.component.html
+++ b/projects/ng-aquila/src/checkbox/checkbox.component.html
@@ -7,7 +7,8 @@
[indeterminate]="indeterminate"
[disabled]="disabled"
(blur)="touch()"
- [attr.aria-labelledby]="id + '-label'"
+ [attr.aria-labelledby]="ariaLabelledBy"
+ [attr.aria-label]="ariaLabel"
(click)="_onInputClick($event)"
class="nx-checkbox__input"
[value]="value"
diff --git a/projects/ng-aquila/src/checkbox/checkbox.component.spec.ts b/projects/ng-aquila/src/checkbox/checkbox.component.spec.ts
index 43dfe3417..82170ce59 100644
--- a/projects/ng-aquila/src/checkbox/checkbox.component.spec.ts
+++ b/projects/ng-aquila/src/checkbox/checkbox.component.spec.ts
@@ -63,6 +63,7 @@ describe('NxCheckboxComponent', () => {
CheckboxLabelSize,
CheckboxOnPush,
CheckboxNegative,
+ CheckboxA11y,
],
imports: [NxCheckboxModule, FormsModule, ReactiveFormsModule],
}).compileComponents();
@@ -286,6 +287,20 @@ describe('NxCheckboxComponent', () => {
createTestComponent(BasicCheckbox);
await expectAsync(fixture.nativeElement).toBeAccessible();
});
+
+ it('should set aria-label, aria-labelledBy', async () => {
+ createTestComponent(CheckboxA11y);
+
+ expect(inputElement.getAttribute('aria-label')).toBeFalsy();
+ expect(inputElement.getAttribute('aria-labelledby')).toBeFalsy();
+
+ (fixture as ComponentFixture).componentInstance.ariaLabel = 'label';
+ (fixture as ComponentFixture).componentInstance.ariaLabelledBy = 'labelBy';
+ fixture.detectChanges();
+
+ expect(inputElement.getAttribute('aria-label')).toBe('label');
+ expect(inputElement.getAttribute('aria-labelledby')).toBe('labelBy');
+ });
});
});
@@ -321,6 +336,14 @@ class CheckboxTemplateDriven extends CheckboxTest {
required = false;
}
+@Component({
+ template: ``,
+})
+class CheckboxA11y extends CheckboxTest {
+ ariaLabel: string | null = null;
+ ariaLabelledBy: string | null = null;
+}
+
@Component({
template: ``,
})
diff --git a/projects/ng-aquila/src/checkbox/checkbox.component.ts b/projects/ng-aquila/src/checkbox/checkbox.component.ts
index a7143e15d..0a3a62637 100644
--- a/projects/ng-aquila/src/checkbox/checkbox.component.ts
+++ b/projects/ng-aquila/src/checkbox/checkbox.component.ts
@@ -301,6 +301,8 @@ export class NxCheckboxComponent implements ControlValueAccessor, OnDestroy, OnI
@ViewChild('input') _nativeInput!: ElementRef;
+ @Input() ariaLabel: string | null = null;
+ @Input() ariaLabelledBy: string | null = null;
/**
* Id of the checkbox.
*
diff --git a/projects/ng-aquila/src/checkbox/checkbox.md b/projects/ng-aquila/src/checkbox/checkbox.md
index f821112fa..d176d41ef 100644
--- a/projects/ng-aquila/src/checkbox/checkbox.md
+++ b/projects/ng-aquila/src/checkbox/checkbox.md
@@ -93,3 +93,8 @@ With `size` you can change the styling of the checkbox-group's label. The label
The properties can be inherited from the checkbox group to the checkboxes inside it. In this example you can toggle them and check the result.
+
+### Accessibility
+If your checkbox doesn't have any accompanying label text,
+it's recommended to use `ariaLabel` or `ariaLabelledBy`
+inputs to provide helpful information for users relying on screen readers or other assistive technologies."
diff --git a/projects/ng-aquila/src/radio-button/radio-button.html b/projects/ng-aquila/src/radio-button/radio-button.html
index a4c198e1a..3cd23b685 100644
--- a/projects/ng-aquila/src/radio-button/radio-button.html
+++ b/projects/ng-aquila/src/radio-button/radio-button.html
@@ -8,7 +8,8 @@
(change)="_onInputChange($event)"
(click)="_onInputClick($event)"
[checked]="checked"
- [attr.aria-labelledby]="labelId"
+ [attr.aria-labelledby]="ariaLabelledBy"
+ [attr.aria-label]="ariaLabel"
[attr.aria-invalid]="_controlInvalid() || null"
class="nx-radio__input"
/>
diff --git a/projects/ng-aquila/src/radio-button/radio-button.md b/projects/ng-aquila/src/radio-button/radio-button.md
index 26d6acc54..e665b26a9 100755
--- a/projects/ng-aquila/src/radio-button/radio-button.md
+++ b/projects/ng-aquila/src/radio-button/radio-button.md
@@ -75,3 +75,8 @@ Please note that the `nx-error` is only for **Expert**.
+
+### Accessibility
+If your radio button doesn't have any accompanying label text,
+it's recommended to use `ariaLabel` or `ariaLabelledBy`
+inputs to provide helpful information for users relying on screen readers or other assistive technologies."
diff --git a/projects/ng-aquila/src/radio-button/radio-button.spec.ts b/projects/ng-aquila/src/radio-button/radio-button.spec.ts
index 789bd7e76..92b16f104 100644
--- a/projects/ng-aquila/src/radio-button/radio-button.spec.ts
+++ b/projects/ng-aquila/src/radio-button/radio-button.spec.ts
@@ -54,6 +54,7 @@ describe('NxRadioComponent', () => {
RadioGroupTest,
RadioGroupValidation,
RadioGroupValidationTouched,
+ RadioA11y,
],
}).compileComponents();
}));
@@ -534,6 +535,14 @@ describe('NxRadioComponent', () => {
createTestComponent(RadioGroupTest);
await expectAsync(fixture.nativeElement).toBeAccessible();
});
+
+ it('should set aria-label, aria-labelledBy', async () => {
+ createTestComponent(RadioA11y);
+ expect(radioElements.item(0).getAttribute('aria-label')).toBe('label');
+ expect(radioElements.item(0).getAttribute('aria-labelledby')).toBe('labelBy');
+ expect(radioElements.item(1).getAttribute('aria-label')).toBeFalsy();
+ expect(radioElements.item(1).getAttribute('aria-labelledby')).toBeFalsy();
+ });
});
});
@@ -741,3 +750,17 @@ class RadioGroupValidationTouched extends RadioTest {
`,
})
class RadioGroupTest extends RadioTest {}
+
+@Component({
+ template: `
+
+ What do you prefer?
+ 0
+ 1
+
+ `,
+})
+class RadioA11y extends RadioTest {
+ ariaLabel: string | null = 'label';
+ ariaLabelledBy: string | null = 'labelBy';
+}
diff --git a/projects/ng-aquila/src/radio-button/radio-button.ts b/projects/ng-aquila/src/radio-button/radio-button.ts
index e47a460cf..d1174ee5c 100644
--- a/projects/ng-aquila/src/radio-button/radio-button.ts
+++ b/projects/ng-aquila/src/radio-button/radio-button.ts
@@ -270,6 +270,9 @@ export class NxRadioComponent implements ControlValueAccessor, OnInit, AfterView
@ViewChild('radioLabelWrapper', { static: true }) _radioLabelWrapper!: ElementRef;
@ViewChild('input') _nativeInput!: ElementRef;
+ @Input() ariaLabel: string | null = null;
+ @Input() ariaLabelledBy: string | null = null;
+
/** Sets the id of the radio component. */
@Input() set id(value: string) {
if (this._id !== value) {
diff --git a/projects/ng-aquila/src/switcher/switcher.component.html b/projects/ng-aquila/src/switcher/switcher.component.html
index 73a9b9d41..be7cef22d 100644
--- a/projects/ng-aquila/src/switcher/switcher.component.html
+++ b/projects/ng-aquila/src/switcher/switcher.component.html
@@ -9,6 +9,8 @@
(blur)="touch()"
role="switch"
[attr.aria-checked]="checked"
+ [attr.aria-labelledby]="ariaLabelledBy"
+ [attr.aria-label]="ariaLabel"
class="nx-switcher__input"
/>