@vaadin/a11y-base - npm Package Compare versions

Comparing version 24.1.0-alpha1 to 24.1.0-alpha10

package.json

 {
   "name": "@vaadin/a11y-base",
-  "version": "24.1.0-alpha1",
+  "version": "24.1.0-alpha10",
   "publishConfig": {
@@ -35,3 +35,3 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.1.0-alpha1",
+    "@vaadin/component-base": "24.1.0-alpha10",
     "lit": "^2.0.0"
@@ -44,3 +44,3 @@ },
   },
-  "gitHead": "599a339181595923b9ad6373d6888d8a79540141"
+  "gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
 }

src/field-aria-controller.d.ts

@@ -32,2 +32,9 @@ /**
   /**
+   * Defines the `aria-label` attribute of the target element.
+   *
+   * To remove the attribute, pass `null` as `label`.
+   */
+  setAriaLabel(label: string | null): void;
+
+  /**
    * Links the target element with a slotted label element
@@ -38,3 +45,3 @@ * via the target's attribute `aria-labelledby`.
    */
-  setLabelId(labelId: string | null): void;
+  setLabelId(labelId: string | null, fromUser: boolean | null): void;
 
@@ -41,0 +48,0 @@ /**

src/field-aria-controller.js

@@ -6,3 +6,7 @@ /**
  */
-import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
+import {
+  removeAriaIDReference,
+  restoreGeneratedAriaIDReference,
+  setAriaIDReference,
+} from '@vaadin/a11y-base/src/aria-id-reference.js';
 
@@ -20,12 +24,2 @@ /**
   /**
-   * `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.
@@ -38,5 +32,10 @@ *
     this.__setAriaRequiredAttribute(this.__required);
-    this.__setLabelIdToAriaAttribute(this.__labelId);
+    // We need to make sure that value in __labelId is stored
+    this.__setLabelIdToAriaAttribute(this.__labelId, this.__labelId);
+    if (this.__labelIdFromUser != null) {
+      this.__setLabelIdToAriaAttribute(this.__labelIdFromUser, this.__labelIdFromUser, true);
+    }
     this.__setErrorIdToAriaAttribute(this.__errorId);
     this.__setHelperIdToAriaAttribute(this.__helperId);
+    this.setAriaLabel(this.__label);
   }
@@ -57,2 +56,14 @@
   /**
+   * Defines the `aria-label` attribute of the target element.
+   *
+   * To remove the attribute, pass `null` as `label`.
+   *
+   * @param {string | null | undefined} label
+   */
+  setAriaLabel(label) {
+    this.__setAriaLabelToAttribute(label);
+    this.__label = label;
+  }
+
+  /**
    * Links the target element with a slotted label element
@@ -65,5 +76,10 @@ * via the target's attribute `aria-labelledby`.
    */
-  setLabelId(labelId) {
-    this.__setLabelIdToAriaAttribute(labelId, this.__labelId);
-    this.__labelId = labelId;
+  setLabelId(labelId, fromUser = false) {
+    const oldLabelId = fromUser ? this.__labelIdFromUser : this.__labelId;
+    this.__setLabelIdToAriaAttribute(labelId, oldLabelId, fromUser);
+    if (fromUser) {
+      this.__labelIdFromUser = labelId;
+    } else {
+      this.__labelId = labelId;
+    }
   }
@@ -100,8 +116,26 @@
   /**
+   * @param {string | null | undefined} label
+   * @private
+   * */
+  __setAriaLabelToAttribute(label) {
+    if (!this.__target) {
+      return;
+    }
+    if (label) {
+      removeAriaIDReference(this.__target, 'aria-labelledby');
+      this.__target.setAttribute('aria-label', label);
+    } else if (this.__label) {
+      restoreGeneratedAriaIDReference(this.__target, 'aria-labelledby');
+      this.__target.removeAttribute('aria-label');
+    }
+  }
+
+  /**
    * @param {string | null | undefined} labelId
    * @param {string | null | undefined} oldLabelId
+   * @param {boolean | null | undefined} fromUser
    * @private
    */
-  __setLabelIdToAriaAttribute(labelId, oldLabelId) {
-    this.__setAriaAttributeId('aria-labelledby', labelId, oldLabelId);
+  __setLabelIdToAriaAttribute(labelId, oldLabelId, fromUser) {
+    setAriaIDReference(this.__target, 'aria-labelledby', { newId: labelId, oldId: oldLabelId, fromUser });
   }
@@ -115,9 +149,3 @@
   __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);
-    }
+    setAriaIDReference(this.__target, 'aria-describedby', { newId: errorId, oldId: oldErrorId, fromUser: false });
   }
@@ -131,9 +159,3 @@
   __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);
-    }
+    setAriaIDReference(this.__target, 'aria-describedby', { newId: helperId, oldId: oldHelperId, fromUser: false });
   }
@@ -161,21 +183,2 @@
   }
-
-  /**
-   * @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);
-    }
-  }
 }

src/focus-utils.d.ts

@@ -8,2 +8,8 @@ /**
 /**
+ * Returns the actually focused element by traversing shadow
+ * trees recursively to ensure it's the leaf element.
+ */
+export declare function getDeepActiveElement(): Element;
+
+/**
  * Returns true if the window has received a keydown
@@ -10,0 +16,0 @@ * event since the last mousedown event.

src/focus-utils.js

@@ -30,2 +30,16 @@ /**
 /**
+ * Returns the actually focused element by traversing shadow
+ * trees recursively to ensure it's the leaf element.
+ *
+ * @return {Element}
+ */
+export function getDeepActiveElement() {
+  let host = document.activeElement || document.body;
+  while (host.shadowRoot && host.shadowRoot.activeElement) {
+    host = host.shadowRoot.activeElement;
+  }
+  return host;
+}
+
+/**
  * Returns true if the window has received a keydown
@@ -138,3 +152,5 @@ * event since the last mousedown event.
   // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
-  if (element.offsetParent === null) {
+  // However `offsetParent` is also null when the element is using fixed
+  // positioning, so additionally check if the element takes up layout space.
+  if (element.offsetParent === null && element.clientWidth === 0 && element.clientHeight === 0) {
     return true;
@@ -141,0 +157,0 @@ }

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

99059

increased by8.77%

Number of package files

35

increased by6.06%

Lines of code

2608

increased by8.71%

Dependency changes

• + Added@vaadin/component-base@24.1.0-alpha10(transitive)

• - Removed@vaadin/component-base@24.1.0-alpha1(transitive)

• Updated@vaadin/component-base@24.1.0-alpha10