[Checkbox, CheckboxGroup]: Accessibility fixes (disabled state, aria-describedby)

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.html

@@ -3,6 +3,7 @@
   [labelSize]="'sm'"
   [label]="label"
   [required]="_required"
+  [describedbyId]="id + '_guidance'"
   [errorSummaryBreadcrumb]="false"
   [inputSize]="size"
   [tooltip]="tooltip"
@@ -17,7 +18,7 @@
       [reloadErrorSummary]="_reloadErrorSummary"
       [inputLabel]="label"
       [helpText]="helpText"
-      [for]="id + '-legend'"
+      [for]="id"
       [groupBlurredOut]="groupBlurredOut"
       [formGroup]="formGroup"
     >

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.component.spec.ts

@@ -8,7 +8,7 @@ import { CheckboxComponent } from './checkbox/checkbox.component';
 import {
   FudisCheckboxGroupChangeEvent,
   FudisCheckboxGroupFormGroup,
-  FudisInputSize,
+  fudisInputSizeArray,
 } from '../../../types/forms';
 import { FudisGroupValidators } from '../../../utilities/form/groupValidators';
 import { FudisBreakpointService } from '../../../services/breakpoint/breakpoint.service';
@@ -115,8 +115,8 @@ class MockContainerComponent {
 
 describe('CheckboxGroupComponent', () => {
   let component: CheckboxGroupComponent;
-
   let fixture: ComponentFixture<CheckboxGroupComponent> | ComponentFixture<MockContainerComponent>;
+  let fieldsetElement: HTMLFieldSetElement;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -147,6 +147,10 @@ describe('CheckboxGroupComponent', () => {
       component.helpText = 'Some help text';
 
       fixture.autoDetectChanges();
+
+      fieldsetElement = fixture.nativeElement.querySelector(
+        'fudis-fieldset .fudis-fieldset',
+      ) as HTMLFieldSetElement;
     });
 
     it('should have correct label as legend', () => {
@@ -174,15 +178,10 @@ describe('CheckboxGroupComponent', () => {
     });
 
     it('should pass correct size values to the Fieldset', () => {
-      const sizes: FudisInputSize[] = ['sm', 'md', 'lg'];
-
-      sizes.forEach((size) => {
+      fudisInputSizeArray.forEach((size) => {
         component.size = size;
         fixture.detectChanges();
 
-        const fieldsetElement = fixture.nativeElement.querySelector(
-          'fudis-fieldset .fudis-fieldset',
-        ) as HTMLFieldSetElement;
         expect(fieldsetElement.classList).toContain(`fudis-input-size__${size}`);
       });
     });
@@ -191,20 +190,18 @@ describe('CheckboxGroupComponent', () => {
       component.id = 'my-custom-checkbox-group';
       fixture.detectChanges();
 
-      const fieldsetElement = fixture.nativeElement.querySelector(
-        'fudis-fieldset .fudis-fieldset',
-      ) as HTMLFieldSetElement;
-
       expect(fieldsetElement.getAttribute('id')).toEqual('my-custom-checkbox-group');
     });
 
     it('should generate correct id', () => {
-      const fieldsetElement = fixture.nativeElement.querySelector(
-        'fudis-fieldset .fudis-fieldset',
-      ) as HTMLFieldSetElement;
-
       expect(fieldsetElement.getAttribute('id')).toEqual('fudis-checkbox-group-1');
     });
+
+    it('should have correct aria-describedby value', () => {
+      expect(fieldsetElement.getAttribute('aria-describedby')).toEqual(
+        'fudis-checkbox-group-1_guidance',
+      );
+    });
   });
 
   describe('with Form Group provided', () => {

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group.docs.mdx

@@ -175,7 +175,7 @@ When clicking Checkbox, property `handleChange` will emit an object with propert
 - Fieldset has a legend as its first child element
 - When selection is mandatory, it is communicated with 'Required' text using validators
 - Checkbox options are grouped by name attribute
-- Guidance is linked to the Checkbox Group via id
+- Guidance is linked to the Checkbox Group's fieldset element via aria-describedby
 - Possible error messages are displayed after user blurs out from the whole checkbox group
 
 ## Properties of Checkbox Group Component

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox/checkbox.component.html

@@ -9,8 +9,6 @@
       [formControl]="control"
       [value]="control.value"
       [name]="_checkboxGroup.id"
-      [readonly]="control.disabled"
-      [attr.aria-describedby]="_checkboxGroup.id + '_guidance'"
       [attr.aria-disabled]="control.disabled ? true : null"
       [attr.checked]="control.value ? true : null"
       [attr.aria-invalid]="

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox/checkbox.component.spec.ts

@@ -176,27 +176,22 @@ describe('CheckboxComponent', () => {
     });
 
     it('should create with disabled status, if control is set as disabled', () => {
-      const checkedCheckbox = fixture.nativeElement.querySelector(
+      const unCheckedCheckbox = fixture.nativeElement.querySelector(
         '#fudis-checkbox-group-1 [ng-reflect-control-name="pineapple"]',
       );
 
-      const checkedIcon = checkedCheckbox.querySelector(
+      const checkedIcon = unCheckedCheckbox.querySelector(
         'fudis-icon[ng-reflect-icon="check-small"]',
       );
 
-      const inputElement = checkedCheckbox.querySelector('input');
+      const inputElement = unCheckedCheckbox.querySelector('input');
 
       const inputValue: string | null | undefined = inputElement.getAttribute('value');
-
-      /**
-       * Check that focus preventing `disabled` property, added by formControl on init, has been removed
-       */
       const inputDisabled = inputElement.getAttribute('disabled');
-
       const inputAriaDisabled = inputElement.getAttribute('aria-disabled');
 
       expect(checkedIcon).toBeNull();
-      expect(inputDisabled).toBeNull();
+      expect(inputDisabled).not.toBeNull();
       expect(inputAriaDisabled).toEqual('true');
       expect(inputValue).toEqual('false');
     });

ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox/checkbox.component.ts

@@ -7,7 +7,6 @@ import {
   OnInit,
   ViewEncapsulation,
   OnDestroy,
-  AfterViewInit,
   ViewChild,
   ElementRef,
 } from '@angular/core';
@@ -22,7 +21,7 @@ import { FormControl, FormGroup } from '@angular/forms';
   styleUrls: ['./checkbox.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class CheckboxComponent implements OnInit, OnDestroy, AfterViewInit {
+export class CheckboxComponent implements OnInit, OnDestroy {
   constructor(
     private _idService: FudisIdService,
     @Host() protected _checkboxGroup: CheckboxGroupComponent,
@@ -100,15 +99,6 @@ export class CheckboxComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
-  ngAfterViewInit(): void {
-    /**
-     * If Angular FormControl has 'disabled' property, it will bind this as HTML attribute as well. This prevents user to focus to it. This removes that attribute making checkbox again focusable. The binded click function _checkboxClick will then prevent toggling the checkbox, if control is disabled.
-     */
-    if (this.control.disabled) {
-      this._inputRef.nativeElement.removeAttribute('disabled');
-    }
-  }
-
   ngOnDestroy(): void {
     if (this._controlAddedToParent && this.controlName) {
       if (this._checkboxGroup.formGroup.controls[this.controlName]) {

ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.html

@@ -7,7 +7,11 @@
   [marginBottom]="marginBottom"
   [marginTop]="marginTop"
 >
-  <fieldset [attr.id]="id" [ngClass]="_classes">
+  <fieldset
+    [attr.id]="id"
+    [ngClass]="_classes"
+    [attr.aria-describedby]="describedbyId ? describedbyId : null"
+  >
     <legend
       #fieldsetLegend
       class="fudis-fieldset__legend"

ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts

@@ -121,6 +121,12 @@ export class FieldSetComponent
    */
   @Input() labelSize: 'md' | 'sm' = 'md';
 
+  /**
+   * Accessibility attribute for describing the whole Fieldset.
+   * Used internally in CheckboxGroup.
+   */
+  @Input() describedbyId: string;
+
   /**
    * CSS classes for the native fieldset HTMLelement
    */

ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form-dynamic-validators.stories.ts

@@ -361,11 +361,11 @@ class DynamicValidatorExampleComponent {
       const required = control.hasValidator(this._atLeastOneRequiredValidatorInstance);
 
       if (required) {
-        control.removeValidators(this._atLeastOneRequiredValidatorInstance);
         control.disable();
+        control.removeValidators(this._atLeastOneRequiredValidatorInstance);
       } else {
-        control.addValidators(this._atLeastOneRequiredValidatorInstance);
         control.enable();
+        control.addValidators(this._atLeastOneRequiredValidatorInstance);
       }
 
       control.updateValueAndValidity();

ngx-fudis/projects/ngx-fudis/src/lib/directives/form/fieldset-base/fieldset-base.directive.spec.ts

@@ -119,7 +119,7 @@ describe('FieldSetBaseDirective', () => {
     it('should have guidance with correct id', () => {
       const guidanceElement = getElement(fixtureMock, 'fudis-guidance .fudis-guidance div');
 
-      expect(guidanceElement.id).toEqual('fudis-checkbox-group-1-legend_guidance');
+      expect(guidanceElement.id).toEqual('fudis-checkbox-group-1_guidance');
     });
 
     it('should have correct helpText in guidance', () => {

ngx-fudis/projects/ngx-fudis/src/lib/utilities/storybook.ts

@@ -67,6 +67,7 @@ export const checkboxGroupControlsExclude: RegExp = excludeRegex([
   'groupBlurredOut',
   'setGroupBlurredOut',
   'titleVariant',
+  'handleChange',
   'id',
   'formGroup',
   'triggerEmit',

test/visual-regression/checkbox-group.spec.ts

@@ -25,6 +25,7 @@ test("checkbox group disabled", async ({ page }) => {
   );
   await expect(page).toHaveScreenshot("disabled-1-init.png");
 
-  await page.getByTestId("fudis-checkbox-group-1-item-1").focus();
+  await page.keyboard.press("Tab"); // Focus on tooltip button
+  await page.keyboard.press("Tab"); // Focus on next focusable (i.e. not disabled) checkbox element
   await expect(page).toHaveScreenshot("disabled-2-focused.png");
 });