feat(listbox-button): added custom aria-label selector (#148)

makeup · Mar 14, 2024 · eb3eb02 · eb3eb02
1 parent 6f41de3
commit eb3eb02
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 61 deletions.
diff --git a/docs/makeup-listbox-button/index.html b/docs/makeup-listbox-button/index.html
@@ -350,11 +350,65 @@ <h3>Unselected - with descripton</h3>
       <h3>With Icons</h3>
 
       <div class="listbox-button listbox-button-with-icon" data-makeup-auto-select="true">
-        <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox">
+        <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox" aria-label="Card Type: AMEX" data-listbox-button-prefix="Card Type: ">
           <span class="btn__cell">
             <span class="btn__text">
-              <svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30"
-                aria-label="Card Type: AMEX">
+              <svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
+                <use href="../icons.svg#icon-amex-18-colored"></use>
+              </svg>
+            </span>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+              <use href="../icons.svg#icon-chevron-down-12"></use>
+            </svg>
+          </span>
+        </button>
+        <div class="listbox-button__listbox" hidden>
+          <div class="listbox-button__options" role="listbox">
+            <div class="listbox-button__option" role="option">
+              <span class="listbox-button__value">
+                <svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
+                  <use href="../icons.svg#icon-amex-18-colored"></use>
+                </svg>
+                <span>AMEX</span>
+              </span>
+              <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                <use href="../icons.svg#icon-tick-16"></use>
+              </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+              <span class="listbox-button__value">
+                <svg class="icon icon--visa-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
+                  <use href="../icons.svg#icon-visa-18-colored"></use>
+                </svg>
+                <span>VISA</span>
+              </span>
+              <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                <use href="../icons.svg#icon-tick-16"></use>
+              </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+              <span class="listbox-button__value">
+                <svg class="icon icon--mastercard-18-colored" focusable="false" height="18" width="30"
+                  aria-hidden="true">
+                  <use href="../icons.svg#icon-mastercard-18-colored"></use>
+                </svg>
+                <span>Mastercard</span>
+              </span>
+              <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                <use href="../icons.svg#icon-tick-16"></use>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h3>With Icons & custom aria-label</h3>
+
+      <div class="listbox-button listbox-button-with-icon-label" data-makeup-auto-select="true">
+        <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox" aria-label="Card Type: AMEX" data-listbox-button-prefix="Card Type: ">
+          <span class="btn__cell">
+            <span class="btn__text">
+              <svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
                 <use href="../icons.svg#icon-amex-18-colored"></use>
               </svg>
             </span>
@@ -371,6 +425,7 @@ <h3>With Icons</h3>
                   <use href="../icons.svg#icon-amex-18-colored"></use>
                 </svg>
                 <span>AMEX</span>
+                <span>Extra text</span>
               </span>
               <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
                 <use href="../icons.svg#icon-tick-16"></use>
@@ -382,6 +437,7 @@ <h3>With Icons</h3>
                   <use href="../icons.svg#icon-visa-18-colored"></use>
                 </svg>
                 <span>VISA</span>
+                <span>Extra text</span>
               </span>
               <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
                 <use href="../icons.svg#icon-tick-16"></use>
@@ -394,6 +450,7 @@ <h3>With Icons</h3>
                   <use href="../icons.svg#icon-mastercard-18-colored"></use>
                 </svg>
                 <span>Mastercard</span>
+                <span>Extra text</span>
               </span>
               <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
                 <use href="../icons.svg#icon-tick-16"></use>

diff --git a/docs/makeup-listbox-button/index.js b/docs/makeup-listbox-button/index.js
@@ -16,15 +16,31 @@ const log = (e) => console.log(e.type, e.detail);
 
 window.onload = function () {
   document.querySelectorAll(".listbox-button").forEach(function (el, i) {
-    const buttonValueType = el.classList.contains("listbox-button-with-iconText")
-      ? "both"
-      : el.classList.contains("listbox-button-with-icon")
-        ? "icon"
-        : "text";
+    const hasCustomLabel = el.classList.contains("listbox-button-with-icon-label");
+    const hasIconText = el.classList.contains("listbox-button-with-iconText");
+    const hasIcon = el.classList.contains("listbox-button-with-icon");
+
+    let buttonValueType;
+    if (hasIconText) {
+      buttonValueType = "both";
+    } else if (hasIcon || hasCustomLabel) {
+      buttonValueType = "icon";
+    } else {
+      buttonValueType = "text";
+    }
+
+    const listboxOptionAriaLabelSelector = hasCustomLabel ? ".listbox-button__value span" : null;
+
     el.addEventListener("makeup-listbox-button-init", log);
     el.addEventListener("makeup-listbox-button-change", log);
     el.addEventListener("makeup-listbox-button-mutation", log);
 
-    widgets.push(new ListboxButton(el, { autoSelect: el.dataset.makeupAutoSelect === "false" ? false : true, buttonValueType }));
+    widgets.push(
+      new ListboxButton(el, {
+        autoSelect: el.dataset.makeupAutoSelect === "false" ? false : true,
+        buttonValueType,
+        listboxOptionAriaLabelSelector,
+      }),
+    );
   });
 };
diff --git a/docs/makeup-listbox-button/index.min.js b/docs/makeup-listbox-button/index.min.js
diff --git a/docs/makeup-listbox-button/index.min.js.map b/docs/makeup-listbox-button/index.min.js.map
diff --git a/packages/makeup-listbox-button/dist/cjs/index.js b/packages/makeup-listbox-button/dist/cjs/index.js
@@ -19,7 +19,8 @@ const defaultOptions = {
   valueSelector: ".listbox-button__value",
   buttonValueType: "text",
   // ["text", "icon", "both"],
-  iconSelector: ".icon"
+  listboxOptionIconSelector: ".icon",
+  listboxOptionAriaLabelSelector: null
 };
 class _default {
   constructor(widgetEl, selectedOptions) {
@@ -141,29 +142,40 @@ function _onListboxInit(e) {
 }
 function _onListboxChange(e) {
   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;
       default:
         break;
     }
   }
-  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);
     }
   }
   this.el.dispatchEvent(new CustomEvent("makeup-listbox-button-change", {

diff --git a/packages/makeup-listbox-button/dist/mjs/index.js b/packages/makeup-listbox-button/dist/mjs/index.js
@@ -12,7 +12,8 @@ const defaultOptions = {
   valueSelector: ".listbox-button__value",
   buttonValueType: "text",
   // ["text", "icon", "both"],
-  iconSelector: ".icon"
+  listboxOptionIconSelector: ".icon",
+  listboxOptionAriaLabelSelector: null
 };
 class src_default {
   constructor(widgetEl, selectedOptions) {
@@ -126,29 +127,42 @@ function _onListboxInit(e) {
 }
 function _onListboxChange(e) {
   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;
       default:
         break;
     }
   }
-  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);
     }
   }
   this.el.dispatchEvent(new CustomEvent("makeup-listbox-button-change", { detail: e.detail }));