@vaadin/field-base 23.0.0-alpha1 → 23.0.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.0.0-alpha1",
+  "version": "23.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-alpha1",
+    "@vaadin/component-base": "23.0.0-alpha2",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -39,5 +39,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "fbcb07328fdf88260e3b461088d207426b21c710"
+  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
 }

package/src/field-aria-controller.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { addValueToAttribute, removeValueFromAttribute } from './utils.js';
 
 /**
  * A controller for managing ARIA attributes for a field element:
@@ -160,16 +161,12 @@ export class FieldAriaController {
       return;
     }
 
-    const value = this.__target.getAttribute(attr);
-    const ids = value ? new Set(value.split(' ')) : new Set();
-
     if (oldId) {
-      ids.delete(oldId);
+      removeValueFromAttribute(this.__target, attr, oldId);
     }
+
     if (newId) {
-      ids.add(newId);
+      addValueToAttribute(this.__target, attr, newId);
     }
-
-    this.__target.setAttribute(attr, [...ids].join(' '));
   }
 }

package/src/field-mixin.js

@@ -301,6 +301,7 @@ export const FieldMixin = (superclass) =>
       }
       const hasError = Boolean(invalid && errorMessage);
       error.textContent = hasError ? errorMessage : '';
+      error.hidden = !hasError;
       this.toggleAttribute('has-error-message', hasError);
 
       // Role alert will make the error message announce immediately
@@ -368,12 +369,18 @@ export const FieldMixin = (superclass) =>
      * @protected
      */
     _invalidChanged(invalid) {
-      // Error message ID needs to be dynamically added / removed based on the validity
-      // Otherwise assistive technologies would announce the error, even if we hide it.
-      if (invalid) {
-        this._fieldAriaController.setErrorId(this._errorId);
-      } else {
-        this._fieldAriaController.setErrorId(null);
-      }
+      // This timeout is needed to prevent NVDA from announcing the error message twice:
+      // 1. Once adding the `[role=alert]` attribute by the `_updateErrorMessage` method (OK).
+      // 2. Once linking the error ID with the ARIA target here (unwanted).
+      // Related issue: https://github.com/vaadin/web-components/issues/3061.
+      setTimeout(() => {
+        // Error message ID needs to be dynamically added / removed based on the validity
+        // Otherwise assistive technologies would announce the error, even if we hide it.
+        if (invalid) {
+          this._fieldAriaController.setErrorId(this._errorId);
+        } else {
+          this._fieldAriaController.setErrorId(null);
+        }
+      });
     }
   };

package/src/input-constraints-mixin.js

@@ -49,9 +49,8 @@ export const InputConstraintsMixin = dedupingMixin(
       checkValidity() {
         if (this.inputElement && this._hasValidConstraints(this.constructor.constraints.map((c) => this[c]))) {
           return this.inputElement.checkValidity();
-        } else {
-          return !this.invalid;
         }
+        return !this.invalid;
       }
 
       /**

package/src/input-controller.d.ts

@@ -3,9 +3,9 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotController } from './slot-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to create and initialize slotted `<input>` element.
  */
-export class InputController implements SlotController {}
+export class InputController extends SlotController {}

package/src/input-controller.js

@@ -3,14 +3,15 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotController } from './slot-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to create and initialize slotted `<input>` element.
  */
 export class InputController extends SlotController {
   constructor(host, callback) {
-    super(host, [
+    super(
+      host,
       'input',
       () => document.createElement('input'),
       (host, node) => {
@@ -30,6 +31,6 @@ export class InputController extends SlotController {
           callback(node);
         }
       }
-    ]);
+    );
   }
 }

package/src/pattern-mixin.js

@@ -55,7 +55,6 @@ export const PatternMixin = (superclass) =>
           this._inputDebouncer = Debouncer.debounce(this._inputDebouncer, timeOut.after(200), () => {
             this.removeAttribute('input-prevented');
           });
-          return;
         }
       }
     }

package/src/text-area-controller.d.ts

@@ -3,9 +3,9 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotController } from './slot-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to create and initialize slotted `<textarea>` element.
  */
-export class TextAreaController implements SlotController {}
+export class TextAreaController extends SlotController {}

package/src/text-area-controller.js

@@ -3,14 +3,15 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotController } from './slot-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to create and initialize slotted `<textarea>` element.
  */
 export class TextAreaController extends SlotController {
   constructor(host, callback) {
-    super(host, [
+    super(
+      host,
       'textarea',
       () => document.createElement('textarea'),
       (host, node) => {
@@ -33,6 +34,6 @@ export class TextAreaController extends SlotController {
           callback(node);
         }
       }
-    ]);
+    );
   }
 }

package/src/utils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Adds a value to an attribute containing space-delimited values.
+ */
+export declare function addValueToAttribute(element: HTMLElement, attr: string, value: string): void;
+
+/**
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
+ */
+export declare function removeValueFromAttribute(element: HTMLElement, attr: string, value: string): void;

package/src/utils.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @param {string} value
+ * @return {Set<string>}
+ */
+function deserializeAttributeValue(value) {
+  if (!value) {
+    return new Set();
+  }
+
+  return new Set(value.split(' '));
+}
+
+/**
+ * @param {Set<string>} values
+ * @return {string}
+ */
+function serializeAttributeValue(values) {
+  return [...values].join(' ');
+}
+
+/**
+ * Adds a value to an attribute containing space-delimited values.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+export function addValueToAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.add(value);
+  element.setAttribute(attr, serializeAttributeValue(values));
+}
+
+/**
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+export function removeValueFromAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.delete(value);
+  if (values.size === 0) {
+    element.removeAttribute(attr);
+    return;
+  }
+  element.setAttribute(attr, serializeAttributeValue(values));
+}

package/src/slot-controller.d.ts

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

package/src/slot-controller.js

@@ -1,36 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-export class SlotController {
-  constructor(host, [slotName, slotFactory, slotInitializer]) {
-    this.host = host;
-    this.slotName = slotName;
-    this.slotFactory = slotFactory;
-    this.slotInitializer = slotInitializer;
-  }
-
-  hostConnected() {
-    if (!this.__initialized) {
-      const { host, slotName, slotFactory } = this;
-
-      const slotted = host.querySelector(`[slot=${slotName}]`);
-
-      if (!slotted) {
-        const slotContent = slotFactory(host);
-        if (slotContent instanceof Element) {
-          slotContent.setAttribute('slot', slotName);
-          host.appendChild(slotContent);
-          this.__slotContent = slotContent;
-        }
-      } else {
-        this.__slotContent = slotted;
-      }
-
-      this.slotInitializer(host, this.__slotContent);
-
-      this.__initialized = true;
-    }
-  }
-}