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" />