fix(core): adopt a11y breaking changes for Textarea and Input states (#13506)

* fix(core): adopt a11y breaking changes for Textarea states

* fix(core): a11y for input and textarea

Author: InnaAtanasova

libs/core/form/form-control/form-control.component.scss

@@ -25,3 +25,17 @@
 .fd-input[readonly]:focus {
     z-index: 1 !important;
 }
+
+.fd-value-state-message__sr-only {
+    position: absolute;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    width: 1px;
+    border: 0;
+    margin-inline: -1px;
+    margin-block: -1px;
+    padding-inline: 0;
+    padding-block: 0;
+    overflow: hidden;
+    white-space: nowrap;
+}

libs/core/form/form-control/form-control.component.ts

@@ -1,85 +1,177 @@
 import {
-    Attribute,
     ChangeDetectionStrategy,
     Component,
+    computed,
+    effect,
     ElementRef,
-    HostBinding,
+    inject,
+    input,
     Input,
     OnChanges,
     OnDestroy,
     OnInit,
+    Renderer2,
+    signal,
     ViewEncapsulation
 } from '@angular/core';
 import { FormStates } from '@fundamental-ngx/cdk/forms';
-import { CssClassBuilder, Nullable, applyCssClass } from '@fundamental-ngx/cdk/utils';
+import { applyCssClass, CssClassBuilder, Nullable } from '@fundamental-ngx/cdk/utils';
 import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
+import { ValueStateAriaMessageService } from '@fundamental-ngx/core/shared';
 import { Subscription } from 'rxjs';
 import { FormItemControl, registerFormItemControl } from '../form-item-control/form-item-control';
 
-/**
- * Directive intended for use on form controls.
- *
- * ```html
- * <input type="text" fd-form-control />
- * ```
- */
+let formControlId = 0;
+
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'input[fd-form-control], textarea[fd-form-control]',
-    template: ` <ng-content></ng-content>`,
+    template: `<ng-content></ng-content>`,
     styleUrl: './form-control.component.scss',
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [registerFormItemControl(FormControlComponent), contentDensityObserverProviders()]
+    providers: [registerFormItemControl(FormControlComponent), contentDensityObserverProviders()],
+    host: {
+        '[attr.type]': 'type()',
+        '[attr.aria-label]': 'ariaLabel',
+        '[attr.aria-labelledby]': 'ariaLabelledBy',
+        '[attr.aria-describedby]': 'combinedAriaDescribedBy()'
+    }
 })
 export class FormControlComponent implements CssClassBuilder, OnInit, OnChanges, OnDestroy, FormItemControl {
+    /** aria-label for form-control. */
+    @Input()
+    ariaLabelledBy: Nullable<string>;
+
+    /** aria-label for form-control. */
+    @Input()
+    ariaLabel: Nullable<string>;
+
     /**
      *  The state of the form control - applies css classes.
      *  Can be `success`, `error`, `warning`, `information` or blank for default.
      */
-    @Input()
-    state: FormStates | null = null;
+    state = input<FormStates | null>(null);
 
     /** Type of the form control. */
-    @HostBinding('attr.type')
-    @Input()
-    type: string;
+    type = input<string>();
 
-    /** user's custom classes */
-    @Input()
-    class: string;
+    /** User's custom classes */
+    class = input<string>();
 
-    /** aria-label for form-control. */
-    @Input()
-    ariaLabel: Nullable<string>;
+    /** Default ARIA message text for the "success" value state. */
+    valueStateSuccessMessage = input<string>(inject(ValueStateAriaMessageService).success);
 
-    /** aria-label for form-control. */
-    @Input()
-    ariaLabelledBy: Nullable<string>;
+    /** Default ARIA message text for the "information" value state. */
+    valueStateInformationMessage = input<string>(inject(ValueStateAriaMessageService).information);
+
+    /** Default ARIA message text for the "warning" value state. */
+    valueStateWarningMessage = input<string>(inject(ValueStateAriaMessageService).warning);
+
+    /** Default ARIA message text for the "error" value state. */
+    valueStateErrorMessage = input<string>(inject(ValueStateAriaMessageService).error);
+
+    /**
+     * @hidden
+     * Stores the value of the `aria-describedby` attribute set by the enclosing Form Item component.
+     */
+    formItemAriaDescribedBy = signal<Nullable<string>>(null);
+
+    /**
+     * @hidden
+     * Computes the full list of element IDs that should be referenced by `aria-describedby`.
+     *
+     * The final string may include:
+     * - The generated ID of the visually hidden span for value state messages (success, error, warning, info).
+     * - Any user-provided IDs from a native `aria-describedby` attribute.
+     * - Any user-provided IDs from a native `aria-errormessage` attribute.
+     * - Any IDs set by the parent Form Item via `formItemAriaDescribedBy`.
+     *
+     * All IDs are concatenated with spaces, and `null` is returned if none exist.
+     */
+
+    combinedAriaDescribedBy = computed(() => {
+        const userAriaDescribedByID = this._userAriaDescribedBy();
+        const userAriaErrorMessageID = this._userAriaErrorMessage();
+        const valueStateId = this.state() ? this._valueStateMessageId : null;
+
+        // Include formItemAriaDescribedBy only if no user-provided IDs exist
+        const formItemAriaDescribedById =
+            !userAriaDescribedByID && !userAriaErrorMessageID ? this.formItemAriaDescribedBy() : null;
+
+        return (
+            [valueStateId, userAriaDescribedByID, userAriaErrorMessageID, formItemAriaDescribedById]
+                .filter(Boolean)
+                .join(' ') || null
+        );
+    });
 
     /** @hidden */
-    @HostBinding('attr.aria-label')
-    private get ariaLabelBinding(): string {
-        return this.ariaLabelAttr || this.ariaLabel || '';
-    }
+    public elementRef = inject(ElementRef);
 
     /** @hidden */
-    @HostBinding('attr.aria-labelledby')
-    private get ariaLabelledByBinding(): string {
-        return this.ariaLabelledByAttr || this.ariaLabelledBy || '';
-    }
+    private contentDensityObserver = inject(ContentDensityObserver);
+
+    /** @hidden */
+    private renderer = inject(Renderer2);
 
     /** @hidden */
     private _subscriptions = new Subscription();
 
+    /**
+     * @hidden
+     * Unique ID assigned to the hidden value state message <span>,
+     * used to link it with `aria-describedby`.
+     */
+    private _valueStateMessageId = `fd-form-control-value-state-${++formControlId}`;
+
+    /**
+     * @hidden
+     * Reference to the hidden <span> element that holds the value state message for screen readers.
+     * Created dynamically when the control has a state.
+     */
+    private _valueStateSpan: HTMLElement | null = null;
+
+    /**
+     * @hidden
+     * Stores the value of the user-defined `aria-describedby` attribute (if present on the host element).
+     */
+    private _userAriaDescribedBy = signal<Nullable<string>>(null);
+
+    /**
+     * @hidden
+     * Stores the value of the user-defined `aria-errormessage` attribute (if present on the host element).
+     */
+    private _userAriaErrorMessage = signal<Nullable<string>>(null);
+
+    /** @hidden */
+    private _valueStateMessages = {
+        success: this.valueStateSuccessMessage,
+        information: this.valueStateInformationMessage,
+        warning: this.valueStateWarningMessage,
+        error: this.valueStateErrorMessage
+    } as const;
+
+    /** @hidden */
+    private _currentValueStateMessage = computed(() => {
+        const st = this.state();
+        const signalMsg = st ? this._valueStateMessages[st] : null;
+        return signalMsg ? signalMsg() : '';
+    });
+
     /** @hidden */
-    constructor(
-        public elementRef: ElementRef<HTMLInputElement | HTMLTextAreaElement>,
-        _contentDensityObserver: ContentDensityObserver,
-        @Attribute('aria-label') private ariaLabelAttr: string,
-        @Attribute('aria-labelledby') private ariaLabelledByAttr: string
-    ) {
-        _contentDensityObserver.subscribe();
+    constructor() {
+        this._subscriptions.add(this.contentDensityObserver.subscribe());
+
+        // Update the hidden span’s text whenever the value state message changes
+        effect(() => {
+            if (!this._valueStateSpan) {
+                return;
+            }
+
+            const msg = this._currentValueStateMessage();
+            this._valueStateSpan.textContent = msg ?? '';
+        });
     }
 
     /**
@@ -92,15 +184,38 @@ export class FormControlComponent implements CssClassBuilder, OnInit, OnChanges,
     buildComponentCssClass(): string[] {
         const tagName = this.elementRef.nativeElement.tagName.toLowerCase();
         return [
-            this.state ? 'is-' + this.state : '',
-            this.class,
-            tagName === 'textarea' ? 'fd-textarea' : tagName === 'input' ? 'fd-input' : ''
-        ];
+            tagName === 'textarea' ? 'fd-textarea' : tagName === 'input' ? 'fd-input' : '',
+            this.state() ? `is-${this.state()}` : '',
+            this.class()
+        ].filter(Boolean) as string[];
     }
 
     /** @hidden */
     ngOnInit(): void {
         this.buildComponentCssClass();
+
+        // Capture user-defined aria-describedby (if present on host element)
+        const userAriaDescribedByValue = this.elementRef.nativeElement.getAttribute('aria-describedby');
+        if (userAriaDescribedByValue) {
+            this._userAriaDescribedBy.set(userAriaDescribedByValue);
+        }
+
+        // Capture user-defined aria-errormessage (if present on host element)
+        const userAriaErrorMessageValue = this.elementRef.nativeElement.getAttribute('aria-errormessage');
+        if (userAriaErrorMessageValue) {
+            this._userAriaErrorMessage.set(userAriaErrorMessageValue);
+        }
+
+        // If the control has a state, create a hidden <span> for the value state message
+        if (this.state()) {
+            this._valueStateSpan = this.renderer.createElement('span');
+            this.renderer.setAttribute(this._valueStateSpan, 'id', this._valueStateMessageId);
+            this.renderer.addClass(this._valueStateSpan, 'fd-value-state-message__sr-only');
+
+            // Insert hidden span right after the input/textarea
+            const parent = this.elementRef.nativeElement.parentNode;
+            this.renderer.insertBefore(parent, this._valueStateSpan, this.elementRef.nativeElement.nextSibling);
+        }
     }
 
     /** @hidden */
@@ -110,6 +225,11 @@ export class FormControlComponent implements CssClassBuilder, OnInit, OnChanges,
 
     /** @hidden */
     ngOnDestroy(): void {
+        if (this._valueStateSpan) {
+            this.renderer.removeChild(this.elementRef.nativeElement.parentNode, this._valueStateSpan);
+            this._valueStateSpan = null;
+        }
+
         this._subscriptions.unsubscribe();
     }
 }

libs/core/form/form-item-control/form-item-control.ts

@@ -1,4 +1,4 @@
-import { ElementRef, InjectionToken, Provider, Type } from '@angular/core';
+import { ElementRef, InjectionToken, Provider, Type, WritableSignal } from '@angular/core';
 import { Nullable } from '@fundamental-ngx/cdk/utils';
 
 /** An injection token, that should be used with all controls, that can be put inside `fd-form-item` */
@@ -17,4 +17,5 @@ export function registerFormItemControl(control: Type<FormItemControl>): Provide
 export interface FormItemControl {
     ariaLabelledBy: Nullable<string>;
     elmRef?: ElementRef;
+    formItemAriaDescribedBy?: WritableSignal<Nullable<string>>;
 }

libs/core/form/form-item/form-item.component.scss

@@ -21,3 +21,9 @@ $form-label-margin: 0.5rem;
         }
     }
 }
+
+/* Disable label pointer events if the same form-item contains a disabled input/textarea */
+.fd-form-item:has(input[disabled], textarea[disabled], input.is-disabled, textarea.is-disabled)
+    .fd-form-label__wrapper {
+    pointer-events: none;
+}