@anypoint-web-components/anypoint-listbox - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

AnypointListbox.js

 import { html, css, LitElement } from 'lit-element';
 import { AnypointMenuMixin } from '@anypoint-web-components/anypoint-menu-mixin/anypoint-menu-mixin.js';
 
+let globalId = 1;
+
 export class AnypointListbox extends AnypointMenuMixin(LitElement) {
@@ -24,2 +26,9 @@ static get styles() {
 
+  constructor() {
+    super();
+    this.useAriaSelected = true;
+    this._selectHandler = this._selectHandler.bind(this);
+    this._deselectHandler = this._deselectHandler.bind(this);
+  }
+
   connectedCallback() {
@@ -29,2 +38,3 @@ if (!this.hasAttribute('role')) {
     }
+    this.setAttribute('aria-activedescendant', '');
     /* istanbul ignore else */
@@ -34,3 +44,58 @@ if (super.connectedCallback) {
     }
+    this.addEventListener('select', this._selectHandler);
+    this.addEventListener('deselect', this._deselectHandler);
+
+    this._initSeelction();
   }
+
+  disconnectedCallback() {
+    /* istanbul ignore else */
+    if (super.disconnectedCallback) {
+      super.disconnectedCallback();
+    }
+    this.removeEventListener('select', this._selectHandler);
+    this.removeEventListener('deselect', this._deselectHandler);
+  }
+  /**
+   * Initializes `aria-activedescendant` when element is attached to the DOM.
+   */
+  _initSeelction() {
+    if (this.selectedItem) {
+      this._setActiveDescendant(this.selectedItem);
+    }
+  }
+  /**
+   * Sets `aria-activedescendant` value to selected element's id.
+   * @param {CustomEvent} e
+   */
+  _selectHandler(e) {
+    const { item } = e.detail;
+    this._setActiveDescendant(item);
+  }
+  /**
+   * Sets `aria-activedescendant` value to node's id.
+   * @param {Element} node
+   */
+  _setActiveDescendant(node) {
+    this._ensureNodeId(node);
+    this.setAttribute('aria-activedescendant', node.id);
+  }
+  /**
+   * Removes `aria-activedescendant` from the element when item is
+   * deselected.
+   */
+  _deselectHandler() {
+    this.setAttribute('aria-activedescendant', '');
+  }
+  /**
+   * Ensures the node to have an ID.
+   * It is later used with aria attributes.
+   * @param {Element} node
+   */
+  _ensureNodeId(node) {
+    if (!node.id) {
+      node.id = 'anypointlistbox-' + globalId;
+      globalId++;
+    }
+  }
 }

package.json

 {
   "name": "@anypoint-web-components/anypoint-listbox",
   "description": "Anypoint styled list of options",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "Apache-2.0",
@@ -6,0 +6,0 @@ "main": "index.js",

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

36467

increased by4.91%

Lines of code

93

increased by190.63%

No dependency changes