@vaadin/field-base 24.0.5 → 24.1.0-alpha10

package/index.d.ts

@@ -1,5 +1,4 @@
 export { CheckedMixin } from './src/checked-mixin.js';
-export { FieldAriaController } from './src/field-aria-controller.js';
 export { FieldMixin } from './src/field-mixin.js';
 export { InputController } from './src/input-controller.js';
 export { InputControlMixin } from './src/input-control-mixin.js';

package/index.js

@@ -1,5 +1,4 @@
 export { CheckedMixin } from './src/checked-mixin.js';
-export { FieldAriaController } from './src/field-aria-controller.js';
 export { FieldMixin } from './src/field-mixin.js';
 export { InputController } from './src/input-controller.js';
 export { InputControlMixin } from './src/input-control-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.0.5",
+  "version": "24.1.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,8 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.0.5",
+    "@vaadin/a11y-base": "24.1.0-alpha10",
+    "@vaadin/component-base": "24.1.0-alpha10",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +41,5 @@
     "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "e384c1b5c02e01a4382a433f727d075de9a4ee97"
+  "gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
 }

package/src/checked-mixin.d.ts

@@ -4,8 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
-import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 
 /**

package/src/checked-mixin.js

@@ -4,9 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import { isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
 import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
-import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
-import { isElementFocused } from '@vaadin/component-base/src/focus-utils.js';
 import { InputMixin } from './input-mixin.js';
 
 /**

package/src/clear-button-mixin.d.ts

@@ -4,8 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 
 /**
@@ -13,7 +13,11 @@ import type { InputMixinClass } from './input-mixin.js';
  */
 export declare function ClearButtonMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ClearButtonMixinClass> & Constructor<InputMixinClass> & Constructor<KeyboardMixinClass> & T;
+): Constructor<ClearButtonMixinClass> &
+  Constructor<ControllerMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  T;
 
 export declare class ClearButtonMixinClass {
   /**

package/src/clear-button-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { InputMixin } from './input-mixin.js';
 
 /**

package/src/field-mixin.d.ts

@@ -39,6 +39,18 @@ export declare class FieldMixinClass {
    */
   errorMessage: string | null | undefined;
 
+  /**
+   * String used to label the component to screen reader users.
+   * @attr {string} accessible-name
+   */
+  accessibleName: string | null | undefined;
+
+  /**
+   * Id of the element used as label of the component to screen reader users.
+   * @attr {string} accessible-name-ref
+   */
+  accessibleNameRef: string | null | undefined;
+
   protected readonly _errorNode: HTMLElement;
 
   protected readonly _helperNode?: HTMLElement;

package/src/field-mixin.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { FieldAriaController } from '@vaadin/a11y-base/src/field-aria-controller.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ErrorController } from './error-controller.js';
-import { FieldAriaController } from './field-aria-controller.js';
 import { HelperController } from './helper-controller.js';
 import { LabelMixin } from './label-mixin.js';
 import { ValidateMixin } from './validate-mixin.js';
@@ -49,6 +49,24 @@ export const FieldMixin = (superclass) =>
           type: String,
           observer: '_helperTextChanged',
         },
+
+        /**
+         * String used to label the component to screen reader users.
+         * @attr {string} accessible-name
+         */
+        accessibleName: {
+          type: String,
+          observer: '_accessibleNameChanged',
+        },
+
+        /**
+         * Id of the element used as label of the component to screen reader users.
+         * @attr {string} accessible-name-ref
+         */
+        accessibleNameRef: {
+          type: String,
+          observer: '_accessibleNameRefChanged',
+        },
       };
     }
 
@@ -113,6 +131,16 @@ export const FieldMixin = (superclass) =>
       }
     }
 
+    /** @protected */
+    _accessibleNameChanged(accessibleName) {
+      this._fieldAriaController.setAriaLabel(accessibleName);
+    }
+
+    /** @protected */
+    _accessibleNameRefChanged(accessibleNameRef) {
+      this._fieldAriaController.setLabelId(accessibleNameRef, true);
+    }
+
     /** @private */
     __labelChanged(hasLabel, labelNode) {
       // Label ID should be only added when the label content is present.

package/src/input-control-mixin.d.ts

@@ -4,12 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
-import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
 import type { ClearButtonMixinClass } from './clear-button-mixin.js';
 import type { FieldMixinClass } from './field-mixin.js';
 import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';

package/src/input-control-mixin.js

@@ -3,10 +3,10 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { ClearButtonMixin } from './clear-button-mixin.js';
 import { FieldMixin } from './field-mixin.js';
 import { InputConstraintsMixin } from './input-constraints-mixin.js';

package/src/input-field-mixin.d.ts

@@ -4,12 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
-import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
 import type { ClearButtonMixinClass } from './clear-button-mixin.js';
 import type { FieldMixinClass } from './field-mixin.js';
 import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';

package/src/styles/field-shared-styles.js

@@ -26,4 +26,17 @@ export const fieldShared = css`
   :host(:not([has-label])) [part='label'] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    :host(:not([readonly])) [part='input-field'] {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+    :host([focused]) [part='input-field'] {
+      outline-width: 2px;
+    }
+    :host([disabled]) [part='input-field'] {
+      outline-color: GrayText;
+    }
+  }
 `;

package/src/styles/sr-only-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd..
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const screenReaderOnly: CSSResult;

package/src/styles/sr-only-styles.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd..
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @note Taken from Gaël Poupard gist
+ * @author Gaël Poupard
+ * @see https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
+ */
+import { css } from 'lit';
+
+export const screenReaderOnly = css`
+  .sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+  }
+`;

package/src/field-aria-controller.d.ts

@@ -1,56 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A controller for managing ARIA attributes for a field element:
- * either the component itself or slotted `<input>` element.
- */
-export class FieldAriaController {
-  /**
-   * The controller host element.
-   */
-  host: HTMLElement;
-
-  constructor(host: HTMLElement);
-
-  /**
-   * Sets a target element to which ARIA attributes are added.
-   */
-  setTarget(target: HTMLElement): void;
-
-  /**
-   * Toggles the `aria-required` attribute on the target element
-   * if the target is the host component (e.g. a field group).
-   * Otherwise, it does nothing.
-   */
-  setRequired(required: boolean): void;
-
-  /**
-   * Links the target element with a slotted label element
-   * via the target's attribute `aria-labelledby`.
-   *
-   * To unlink the previous slotted label element, pass `null` as `labelId`.
-   */
-  setLabelId(labelId: string | null): void;
-
-  /**
-   * Links the target element with a slotted error element via the target's attribute:
-   * - `aria-labelledby` if the target is the host component (e.g a field group).
-   * - `aria-describedby` otherwise.
-   *
-   * To unlink the previous slotted error element, pass `null` as `errorId`.
-   */
-  setErrorId(errorId: string | null): void;
-
-  /**
-   * Links the target element with a slotted helper element via the target's attribute:
-   * - `aria-labelledby` if the target is the host component (e.g a field group).
-   * - `aria-describedby` otherwise.
-   *
-   * To unlink the previous slotted helper element, pass `null` as `helperId`.
-   */
-  setHelperId(helperId: string | null): void;
-}

package/src/field-aria-controller.js

@@ -1,172 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
-
-/**
- * A controller for managing ARIA attributes for a field element:
- * either the component itself or slotted `<input>` element.
- */
-export class FieldAriaController {
-  constructor(host) {
-    this.host = host;
-    this.__required = false;
-  }
-
-  /**
-   * `true` if the target element is the host component itself, `false` otherwise.
-   *
-   * @return {boolean}
-   * @private
-   */
-  get __isGroupField() {
-    return this.__target === this.host;
-  }
-
-  /**
-   * Sets a target element to which ARIA attributes are added.
-   *
-   * @param {HTMLElement} target
-   */
-  setTarget(target) {
-    this.__target = target;
-    this.__setAriaRequiredAttribute(this.__required);
-    this.__setLabelIdToAriaAttribute(this.__labelId);
-    this.__setErrorIdToAriaAttribute(this.__errorId);
-    this.__setHelperIdToAriaAttribute(this.__helperId);
-  }
-
-  /**
-   * Toggles the `aria-required` attribute on the target element
-   * if the target is the host component (e.g. a field group).
-   * Otherwise, it does nothing.
-   *
-   * @param {boolean} required
-   */
-  setRequired(required) {
-    this.__setAriaRequiredAttribute(required);
-    this.__required = required;
-  }
-
-  /**
-   * Links the target element with a slotted label element
-   * via the target's attribute `aria-labelledby`.
-   *
-   * To unlink the previous slotted label element, pass `null` as `labelId`.
-   *
-   * @param {string | null} labelId
-   */
-  setLabelId(labelId) {
-    this.__setLabelIdToAriaAttribute(labelId, this.__labelId);
-    this.__labelId = labelId;
-  }
-
-  /**
-   * Links the target element with a slotted error element via the target's attribute:
-   * - `aria-labelledby` if the target is the host component (e.g a field group).
-   * - `aria-describedby` otherwise.
-   *
-   * To unlink the previous slotted error element, pass `null` as `errorId`.
-   *
-   * @param {string | null} errorId
-   */
-  setErrorId(errorId) {
-    this.__setErrorIdToAriaAttribute(errorId, this.__errorId);
-    this.__errorId = errorId;
-  }
-
-  /**
-   * Links the target element with a slotted helper element via the target's attribute:
-   * - `aria-labelledby` if the target is the host component (e.g a field group).
-   * - `aria-describedby` otherwise.
-   *
-   * To unlink the previous slotted helper element, pass `null` as `helperId`.
-   *
-   * @param {string | null} helperId
-   */
-  setHelperId(helperId) {
-    this.__setHelperIdToAriaAttribute(helperId, this.__helperId);
-    this.__helperId = helperId;
-  }
-
-  /**
-   * @param {string | null | undefined} labelId
-   * @param {string | null | undefined} oldLabelId
-   * @private
-   */
-  __setLabelIdToAriaAttribute(labelId, oldLabelId) {
-    this.__setAriaAttributeId('aria-labelledby', labelId, oldLabelId);
-  }
-
-  /**
-   * @param {string | null | undefined} errorId
-   * @param {string | null | undefined} oldErrorId
-   * @private
-   */
-  __setErrorIdToAriaAttribute(errorId, oldErrorId) {
-    // For groups, add all IDs to aria-labelledby rather than aria-describedby -
-    // that should guarantee that it's announced when the group is entered.
-    if (this.__isGroupField) {
-      this.__setAriaAttributeId('aria-labelledby', errorId, oldErrorId);
-    } else {
-      this.__setAriaAttributeId('aria-describedby', errorId, oldErrorId);
-    }
-  }
-
-  /**
-   * @param {string | null | undefined} helperId
-   * @param {string | null | undefined} oldHelperId
-   * @private
-   */
-  __setHelperIdToAriaAttribute(helperId, oldHelperId) {
-    // For groups, add all IDs to aria-labelledby rather than aria-describedby -
-    // that should guarantee that it's announced when the group is entered.
-    if (this.__isGroupField) {
-      this.__setAriaAttributeId('aria-labelledby', helperId, oldHelperId);
-    } else {
-      this.__setAriaAttributeId('aria-describedby', helperId, oldHelperId);
-    }
-  }
-
-  /**
-   * @param {boolean} required
-   * @private
-   */
-  __setAriaRequiredAttribute(required) {
-    if (!this.__target) {
-      return;
-    }
-
-    if (['input', 'textarea'].includes(this.__target.localName)) {
-      // Native <input> or <textarea>, required is enough
-      return;
-    }
-
-    if (required) {
-      this.__target.setAttribute('aria-required', 'true');
-    } else {
-      this.__target.removeAttribute('aria-required');
-    }
-  }
-
-  /**
-   * @param {string | null | undefined} newId
-   * @param {string | null | undefined} oldId
-   * @private
-   */
-  __setAriaAttributeId(attr, newId, oldId) {
-    if (!this.__target) {
-      return;
-    }
-
-    if (oldId) {
-      removeValueFromAttribute(this.__target, attr, oldId);
-    }
-
-    if (newId) {
-      addValueToAttribute(this.__target, attr, newId);
-    }
-  }
-}