makeup-listbox-button - npm Package Compare versions

Comparing version 0.4.3 to 0.4.4

dist/cjs/index.js

@@ -22,3 +22,4 @@ "use strict";
   // ["text", "icon", "both"],
-  iconSelector: ".icon"
+  listboxOptionIconSelector: ".icon",
+  listboxOptionAriaLabelSelector: null
 };
@@ -145,13 +146,19 @@ class _default {
   const toValue = e.detail.optionValue;
-  const icon = e.detail.el.querySelector(this._options.iconSelector).cloneNode(true);
-  let content = this._buttonPrefix ? "".concat(this._buttonPrefix, " ").concat(toValue) : toValue;
+  const {
+    listboxOptionIconSelector,
+    listboxOptionAriaLabelSelector,
+    buttonValueType,
+    floatingLabelAnimate,
+    floatingLabelInline
+  } = this._options;
+  const icon = e.detail.el.querySelector(listboxOptionIconSelector).cloneNode(true);
+  let btnContent = this._buttonPrefix ? "".concat(this._buttonPrefix).concat(toValue) : toValue;
   if (icon) {
-    switch (this._options.buttonValueType) {
+    switch (buttonValueType) {
       case "both":
-        content = "".concat(icon.outerHTML, " <span>").concat(content, "</span>");
+        btnContent = "".concat(icon.outerHTML, " <span>").concat(btnContent, "</span>");
         break;
       case "icon":
-        icon.setAttribute("aria-label", content);
-        icon.removeAttribute("aria-hidden");
-        content = icon.outerHTML;
+        this._buttonEl.setAttribute("aria-label", btnContent);
+        btnContent = icon.outerHTML;
         break;
@@ -162,9 +169,14 @@ default:
   }
-  this._buttonLabelEl.innerHTML = content;
+  if (listboxOptionAriaLabelSelector) {
+    var _e$detail$el$querySel;
+    const selectorText = (_e$detail$el$querySel = e.detail.el.querySelector(listboxOptionAriaLabelSelector)) === null || _e$detail$el$querySel === void 0 ? void 0 : _e$detail$el$querySel.innerText.trim();
+    this._buttonEl.setAttribute("aria-label", this._buttonPrefix ? "".concat(this._buttonPrefix, " ").concat(selectorText) : selectorText);
+  }
+  this._buttonLabelEl.innerHTML = btnContent;
   if (this._buttonFloatingLabelEl) {
     if (toValue) {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelAnimate);
-      this._buttonFloatingLabelEl.classList.remove(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelAnimate);
+      this._buttonFloatingLabelEl.classList.remove(floatingLabelInline);
     } else {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelInline);
     }
@@ -171,0 +183,0 @@ }

dist/mjs/index.js

@@ -15,3 +15,4 @@ import Expander from "makeup-expander";
   // ["text", "icon", "both"],
-  iconSelector: ".icon"
+  listboxOptionIconSelector: ".icon",
+  listboxOptionAriaLabelSelector: null
 };
@@ -130,13 +131,19 @@ class src_default {
   const toValue = e.detail.optionValue;
-  const icon = e.detail.el.querySelector(this._options.iconSelector).cloneNode(true);
-  let content = this._buttonPrefix ? `${this._buttonPrefix} ${toValue}` : toValue;
+  const {
+    listboxOptionIconSelector,
+    listboxOptionAriaLabelSelector,
+    buttonValueType,
+    floatingLabelAnimate,
+    floatingLabelInline
+  } = this._options;
+  const icon = e.detail.el.querySelector(listboxOptionIconSelector).cloneNode(true);
+  let btnContent = this._buttonPrefix ? `${this._buttonPrefix}${toValue}` : toValue;
   if (icon) {
-    switch (this._options.buttonValueType) {
+    switch (buttonValueType) {
       case "both":
-        content = `${icon.outerHTML} <span>${content}</span>`;
+        btnContent = `${icon.outerHTML} <span>${btnContent}</span>`;
         break;
       case "icon":
-        icon.setAttribute("aria-label", content);
-        icon.removeAttribute("aria-hidden");
-        content = icon.outerHTML;
+        this._buttonEl.setAttribute("aria-label", btnContent);
+        btnContent = icon.outerHTML;
         break;
@@ -147,9 +154,16 @@ default:
   }
-  this._buttonLabelEl.innerHTML = content;
+  if (listboxOptionAriaLabelSelector) {
+    const selectorText = e.detail.el.querySelector(listboxOptionAriaLabelSelector)?.innerText.trim();
+    this._buttonEl.setAttribute(
+      "aria-label",
+      this._buttonPrefix ? `${this._buttonPrefix} ${selectorText}` : selectorText
+    );
+  }
+  this._buttonLabelEl.innerHTML = btnContent;
   if (this._buttonFloatingLabelEl) {
     if (toValue) {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelAnimate);
-      this._buttonFloatingLabelEl.classList.remove(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelAnimate);
+      this._buttonFloatingLabelEl.classList.remove(floatingLabelInline);
     } else {
-      this._buttonFloatingLabelEl.classList.add(this._options.floatingLabelInline);
+      this._buttonFloatingLabelEl.classList.add(floatingLabelInline);
     }
@@ -156,0 +170,0 @@ }

package.json

 {
   "name": "makeup-listbox-button",
   "description": "A JavaScript class representing an ARIA listbox button",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "main": "./dist/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "./dist/mjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

17749

increased by5.96%

Lines of code

381

increased by7.32%

No dependency changes