feat(switcher, radio, checkbox): add ariaLabel (#1164)

* feat(checkbox): add ariaLabel, ariaLabelledBy input * feat(radio): add ariaLabel, ariaLabelledBy input * feat(switcher): add ariaLabel, ariaLabelledBy input * feat(switcher,checkbox,radio): update doc, add tests
allianz · Apr 26, 2024 · c85820f · c85820f
1 parent 90452e9
commit c85820f
Show file tree

Hide file tree

Showing 14 changed files with 102 additions and 4 deletions.
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
@@ -69,7 +69,7 @@
                     <td nxTableCell class="nx-table-cell--checkbox">
                         <nx-checkbox
                             (checkedChange)="selection.toggle(item)"
-                            aria-label="Toggle row selection"
+                            [ariaLabel]="'Toggle row ' + item.product + ' selection'"
                             [checked]="selection.isSelected(item)"
                         ></nx-checkbox>
                     </td>

diff --git a/...-aquila/documentation/examples/table/table-single-select/table-single-select-example.html b/...-aquila/documentation/examples/table/table-single-select/table-single-select-example.html
@@ -21,7 +21,7 @@
                     <td nxTableCell class="nx-table-cell--checkbox">
                         <nx-radio
                             (valueChange)="selection.select(item)"
-                            [attr.aria-label]="'Select ' + item.product + ' row'"
+                            [ariaLabel]="'Select ' + item.product + ' row'"
                             [checked]="selection.isSelected(item)"
                         ></nx-radio>
                     </td>

diff --git 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
@@ -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<CheckboxA11y>).componentInstance.ariaLabel = 'label';
+            (fixture as ComponentFixture<CheckboxA11y>).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: `<nx-checkbox [ariaLabel]="ariaLabel" [ariaLabelledBy]="ariaLabelledBy"></nx-checkbox>`,
+})
+class CheckboxA11y extends CheckboxTest {
+    ariaLabel: string | null = null;
+    ariaLabelledBy: string | null = null;
+}
+
 @Component({
     template: `<nx-checkbox [negative]="negative"></nx-checkbox>`,
 })

diff --git 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<HTMLElement>;
 
+    @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
@@ -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.
 
 <!-- example(checkbox-group-inheritance) -->
+
+### 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
@@ -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
@@ -75,3 +75,8 @@ Please note that the `nx-error` is only for **Expert**.
 <!-- example(radio-button-group-validation) -->
 
 </div>
+
+### 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
@@ -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: `
+        <nx-radio-group name="radioGroupTest">
+            <nx-label>What do you prefer?</nx-label>
+            <nx-radio value="0" [ariaLabel]="ariaLabel" [ariaLabelledBy]="ariaLabelledBy">0</nx-radio>
+            <nx-radio value="1">1</nx-radio>
+        </nx-radio-group>
+    `,
+})
+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
@@ -270,6 +270,9 @@ export class NxRadioComponent implements ControlValueAccessor, OnInit, AfterView
     @ViewChild('radioLabelWrapper', { static: true }) _radioLabelWrapper!: ElementRef;
     @ViewChild('input') _nativeInput!: ElementRef<HTMLElement>;
 
+    @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
@@ -9,6 +9,8 @@
     (blur)="touch()"
     role="switch"
     [attr.aria-checked]="checked"
+    [attr.aria-labelledby]="ariaLabelledBy"
+    [attr.aria-label]="ariaLabel"
     class="nx-switcher__input"
 />
 <label [attr.for]="id" class="nx-switcher__label" [class.has-label]="labelHasContent">

diff --git a/projects/ng-aquila/src/switcher/switcher.component.spec.ts b/projects/ng-aquila/src/switcher/switcher.component.spec.ts
@@ -50,6 +50,7 @@ describe('NxSwitcherComponent', () => {
                 LabelSizeSwitcher,
                 ValidationSwitcherForm,
                 LabellessSwitcher,
+                SwitcherA11y,
             ],
             imports: [NxSwitcherModule, FormsModule, ReactiveFormsModule],
         }).compileComponents();
@@ -253,6 +254,21 @@ describe('NxSwitcherComponent', () => {
             createTestComponent(BasicSwitcher);
             await expectAsync(fixture.nativeElement).toBeAccessible();
         });
+
+        it('should set aria-label, aria-labelledBy', () => {
+            createTestComponent(SwitcherA11y);
+
+            expect(inputElement.getAttribute('aria-label')).toBeFalsy();
+            expect(inputElement.getAttribute('aria-labelledby')).toBeFalsy();
+
+            const instance = testInstance as SwitcherA11y;
+            instance.ariaLabel = 'label';
+            instance.ariaLabelledBy = 'labelBy';
+            fixture.detectChanges();
+
+            expect(inputElement.getAttribute('aria-label')).toBe('label');
+            expect(inputElement.getAttribute('aria-labelledby')).toBe('labelBy');
+        });
     });
 });
 
@@ -290,6 +306,14 @@ class SwitcherReactiveForm extends SwitcherTest {
 })
 class LabelSizeSwitcher extends SwitcherTest {}
 
+@Component({
+    template: `<nx-switcher [ariaLabel]="ariaLabel" [ariaLabelledBy]="ariaLabelledBy">basicLabel</nx-switcher>`,
+})
+class SwitcherA11y extends SwitcherTest {
+    ariaLabel: string | null = null;
+    ariaLabelledBy: string | null = null;
+}
+
 @Component({
     template: `
         <form [formGroup]="testForm">

diff --git a/projects/ng-aquila/src/switcher/switcher.component.ts b/projects/ng-aquila/src/switcher/switcher.component.ts
@@ -53,6 +53,9 @@ export class NxSwitcherComponent implements ControlValueAccessor, DoCheck, After
 
     @ViewChild('input') _nativeInput!: ElementRef<HTMLElement>;
 
+    @Input() ariaLabel: string | null = null;
+    @Input() ariaLabelledBy: string | null = null;
+
     /** Sets the id of the switcher */
     @Input() set id(value: string) {
         this._id = value;

diff --git a/projects/ng-aquila/src/switcher/switcher.md b/projects/ng-aquila/src/switcher/switcher.md
@@ -54,3 +54,9 @@ The switcher component can be used in reactive forms.
 ### Disabled
 
 <!-- example(switcher-disabled) -->
+
+
+### Accessibility
+If your switcher 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."