@vaadin/field-base 22.0.1 → 22.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "22.0.1",
+  "version": "22.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.1",
+    "@vaadin/component-base": "^22.0.2",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -39,5 +39,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
+  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
 }

package/src/field-mixin.js

@@ -369,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-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/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/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;
-    }
-  }
-}