@vaadin/field-base 24.7.0-alpha1 → 24.7.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -32,14 +32,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha1",
-    "@vaadin/component-base": "24.7.0-alpha1",
+    "@vaadin/a11y-base": "24.7.0-alpha3",
+    "@vaadin/component-base": "24.7.0-alpha3",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha1",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/chai-plugins": "24.7.0-alpha3",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
+  "gitHead": "dd5cfad6c9b54e676f5b10dffba2233775378f40"
 }

package/src/error-controller.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { announce } from '@vaadin/a11y-base/src/announce.js';
 import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
 
 /**
@@ -108,12 +109,10 @@ export class ErrorController extends SlotChildObserveController {
       errorNode.textContent = hasError ? errorMessage : '';
       errorNode.hidden = !hasError;
 
-      // Role alert will make the error message announce immediately
-      // as the field becomes invalid
       if (hasError) {
-        errorNode.setAttribute('role', 'alert');
-      } else {
-        errorNode.removeAttribute('role');
+        // Assertive mode ensures VoiceOver reads
+        // the error message on commit with Enter.
+        announce(errorMessage, { mode: 'assertive' });
       }
     }
 

package/src/input-mixin.d.ts

@@ -68,6 +68,4 @@ export declare class InputMixinClass {
   protected _toggleHasValue(hasValue: boolean): void;
 
   protected _valueChanged(value?: string, oldValue?: string): void;
-
-  protected _setHasInputValue(event: InputEvent): void;
 }

package/src/input-mixin.js

@@ -32,6 +32,7 @@ export const InputMixin = dedupingMixin(
             type: Object,
             readOnly: true,
             observer: '_inputElementChanged',
+            sync: true,
           },
 
           /**
@@ -63,6 +64,7 @@ export const InputMixin = dedupingMixin(
             type: Boolean,
             value: false,
             observer: '_hasInputValueChanged',
+            sync: true,
           },
         };
       }
@@ -204,7 +206,7 @@ export const InputMixin = dedupingMixin(
        * @private
        */
       __onInput(event) {
-        this._setHasInputValue(event);
+        this._hasInputValue = !!this._inputElementValue;
         this._onInput(event);
       }
 
@@ -265,19 +267,5 @@ export const InputMixin = dedupingMixin(
         // Setting a value programmatically, sync it to input element.
         this._forwardInputValue(newVal);
       }
-
-      /**
-       * Sets the `_hasInputValue` property based on the `input` event.
-       *
-       * @param {InputEvent} event
-       * @protected
-       */
-      _setHasInputValue(event) {
-        // In the case a custom web component is passed as `inputElement`,
-        // the actual native input element, on which the event occurred,
-        // can be inside shadow trees.
-        const target = event.composedPath()[0];
-        this._hasInputValue = target.value.length > 0;
-      }
     },
 );

package/src/validate-mixin.js

@@ -23,6 +23,7 @@ export const ValidateMixin = dedupingMixin(
             reflectToAttribute: true,
             notify: true,
             value: false,
+            sync: true,
           },
 
           /**
@@ -47,6 +48,7 @@ export const ValidateMixin = dedupingMixin(
           required: {
             type: Boolean,
             reflectToAttribute: true,
+            sync: true,
           },
         };
       }