@vaadin/field-base - npm Package Compare versions

Comparing version 22.0.0-alpha9 to 22.0.0-beta1

package.json

 {
   "name": "@vaadin/field-base",
-  "version": "22.0.0-alpha9",
+  "version": "22.0.0-beta1",
   "publishConfig": {
@@ -33,3 +33,3 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-alpha9",
+    "@vaadin/component-base": "22.0.0-beta1",
     "lit": "^2.0.0"
@@ -42,3 +42,3 @@ },
   },
-  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

src/aria-label-controller.js

@@ -11,12 +11,6 @@ /**
 export class AriaLabelController {
-  constructor(input, label) {
+  constructor(host, input, label) {
     this.input = input;
-    this.label = label;
     this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
-  }
 
-  hostConnected() {
-    const label = this.label;
-    const input = this.input;
-
     if (label) {
@@ -26,4 +20,8 @@ label.addEventListener('click', this.__preventDuplicateLabelClick);
       if (input) {
-        input.setAttribute('aria-labelledby', label.id);
         label.setAttribute('for', input.id);
+
+        this.__setAriaLabelledBy(input, host.hasAttribute('has-label') ? label.id : null);
+        host.addEventListener('has-label-changed', (event) =>
+          this.__setAriaLabelledBy(input, event.detail.value ? label.id : null)
+        );
       }
@@ -33,9 +31,2 @@ }
 
-  hostDisconnected() {
-    const label = this.label;
-    if (label) {
-      label.removeEventListener('click', this.__preventDuplicateLabelClick);
-    }
-  }
-
   /**
@@ -56,2 +47,16 @@ * The native platform fires an event for both the click on the label, and also
   }
+
+  /**
+   * Sets or removes the `aria-labelledby` attribute on the input element.
+   * @param {HTMLElement} input
+   * @param {string | null | undefined} value
+   * @private
+   */
+  __setAriaLabelledBy(input, value) {
+    if (value) {
+      input.setAttribute('aria-labelledby', value);
+    } else {
+      input.removeAttribute('aria-labelledby');
+    }
+  }
 }

src/checked-mixin.d.ts

@@ -19,4 +19,9 @@ /**
 
-interface CheckedMixin extends DelegateStateMixin, DisabledMixin, InputMixin {}
+interface CheckedMixin extends DelegateStateMixin, DisabledMixin, InputMixin {
+  /**
+   * True if the element is checked.
+   */
+  checked: boolean;
+}
 
 export { CheckedMixinConstructor, CheckedMixin };

src/field-mixin.js

@@ -62,3 +62,2 @@ /**
           error.textContent = this.errorMessage;
-          error.setAttribute('aria-live', 'assertive');
           return error;
@@ -71,3 +70,3 @@ }
       return [
-        '__ariaChanged(invalid, _helperId)',
+        '__ariaChanged(invalid, _helperId, required)',
         '__observeOffsetHeight(errorMessage, invalid, label, helperText)',
@@ -78,3 +77,6 @@ '_updateErrorMessage(invalid, errorMessage)'
 
-    /** @protected */
+    /**
+     * @protected
+     * @return {HTMLElement}
+     */
     get _errorNode() {
@@ -84,3 +86,6 @@ return this._getDirectSlotChild('error-message');
 
-    /** @protected */
+    /**
+     * @protected
+     * @return {HTMLElement}
+     */
     get _helperNode() {
@@ -90,3 +95,6 @@ return this._getDirectSlotChild('helper');
 
-    /** @protected */
+    /**
+     * @protected
+     * @return {string}
+     */
     get _ariaAttr() {
@@ -177,3 +185,6 @@ return 'aria-describedby';
 
-    /** @private */
+    /**
+     * @param {HTMLElement} helper
+     * @private
+     */
     __applyCustomHelper(helper) {
@@ -185,3 +196,6 @@ this.__updateHelperId(helper);
 
-    /** @private */
+    /**
+     * @param {string} helperText
+     * @private
+     */
     __isNotEmpty(helperText) {
@@ -208,3 +222,6 @@ return helperText && helperText.trim() !== '';
 
-    /** @private */
+    /**
+     * @param {string} helperText
+     * @private
+     */
     __applyDefaultHelper(helperText) {
@@ -227,3 +244,6 @@ let helper = this._helperNode;
 
-    /** @private */
+    /**
+     * @param {boolean} hasHelper
+     * @private
+     */
     __toggleHasHelper(hasHelper) {
@@ -260,2 +280,3 @@ this.toggleAttribute('has-helper', hasHelper);
      * @param {boolean} invalid
+     * @param {string} errorMessage
      * @protected
@@ -276,5 +297,16 @@ */
       this.toggleAttribute('has-error-message', hasError);
+
+      // Role alert will make the error message announce immediately
+      // as the field becomes invalid
+      if (hasError) {
+        error.setAttribute('role', 'alert');
+      } else {
+        error.removeAttribute('role');
+      }
     }
 
-    /** @private */
+    /**
+     * @param {HTMLElement} customHelper
+     * @private
+     */
     __updateHelperId(customHelper) {
@@ -293,3 +325,6 @@ let newId;
 
-    /** @protected */
+    /**
+     * @param {string} helperText
+     * @protected
+     */
     _helperTextChanged(helperText) {
@@ -299,14 +334,23 @@ this.__applyDefaultHelper(helperText);
 
-    /** @protected */
+    /**
+     * @param {HTMLElement} target
+     * @protected
+     */
     _ariaTargetChanged(target) {
       if (target) {
-        this._updateAriaAttribute(this.invalid, this._helperId);
+        this._updateAriaAttribute(target, this.invalid, this._helperId);
+        this._updateAriaRequiredAttribute(target, this.required);
       }
     }
 
-    /** @protected */
-    _updateAriaAttribute(invalid, helperId) {
+    /**
+     * @param {HTMLElement} target
+     * @param {boolean} invalid
+     * @param {string} helperId
+     * @protected
+     */
+    _updateAriaAttribute(target, invalid, helperId) {
       const attr = this._ariaAttr;
 
-      if (this.ariaTarget && attr) {
+      if (target && attr) {
         // For groups, add all IDs to aria-labelledby rather than aria-describedby -
@@ -322,10 +366,34 @@ // that should guarantee that it's announced when the group is entered.
 
-        this.ariaTarget.setAttribute(attr, ariaIds.join(' '));
+        target.setAttribute(attr, ariaIds.join(' '));
       }
     }
 
-    /** @private */
-    __ariaChanged(invalid, helperId) {
-      this._updateAriaAttribute(invalid, helperId);
+    /**
+     * @param {HTMLElement} target
+     * @param {boolean} required
+     * @protected
+     */
+    _updateAriaRequiredAttribute(target, required) {
+      if (target !== this) {
+        // native <input> or <textarea>, required is enough
+        return;
+      }
+
+      if (required) {
+        target.setAttribute('aria-required', true);
+      } else {
+        target.removeAttribute('aria-required');
+      }
     }
+
+    /**
+     * @param {boolean} invalid
+     * @param {string} helperId
+     * @param {boolean} required
+     * @private
+     */
+    __ariaChanged(invalid, helperId, required) {
+      this._updateAriaAttribute(this.ariaTarget, invalid, helperId);
+      this._updateAriaRequiredAttribute(this.ariaTarget, required);
+    }
   };

src/input-control-mixin.d.ts

@@ -21,3 +21,3 @@ /**
   /**
-   * Specify that the value should be automatically selected when the field gains focus.
+   * If true, the input text gets fully selected when the field is focused using click or touch / tap.
    */
@@ -24,0 +24,0 @@ autoselect: boolean;

src/input-control-mixin.js

@@ -27,3 +27,3 @@ /**
         /**
-         * Specify that the value should be automatically selected when the field gains focus.
+         * If true, the input text gets fully selected when the field is focused using click or touch / tap.
          */
@@ -30,0 +30,0 @@ autoselect: {

src/label-mixin.js

@@ -72,3 +72,3 @@ /**
 
-          this.__labelNodeObserver.observe(this._labelNode, { childList: true });
+          this.__labelNodeObserver.observe(this._labelNode, { childList: true, subtree: true, characterData: true });
         }
@@ -91,2 +91,3 @@ }
           this.toggleAttribute('has-label', hasLabel);
+          this.dispatchEvent(new CustomEvent('has-label-changed', { detail: { value: hasLabel } }));
         }
@@ -93,0 +94,0 @@ }

src/text-area-controller.js

@@ -28,3 +28,3 @@ /**
         // Ensure every instance has unique ID
-        const uniqueId = (TextAreaController._uniqueTextAreaId = 1 + TextAreaController._uniqueInputId || 0);
+        const uniqueId = (TextAreaController._uniqueTextAreaId = 1 + TextAreaController._uniqueTextAreaId || 0);
         host._textareaId = `${host.localName}-${uniqueId}`;
@@ -31,0 +31,0 @@ node.id = host._textareaId;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91862

increased by2.22%

Lines of code

2468

increased by3.18%

Dependency changes

• + Added@vaadin/component-base@22.0.0-beta1(transitive)

• - Removed@vaadin/component-base@22.0.0-alpha9(transitive)

• Updated@vaadin/component-base@22.0.0-beta1