アクセシビリティの設定を追加

uzabase · Nov 23, 2024 · 2fa9ab4 · 2fa9ab4
1 parent 657c3b7
commit 2fa9ab4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/src/components/dropdownAction/sp-dropdown-action-button.ts b/src/components/dropdownAction/sp-dropdown-action-button.ts
@@ -30,6 +30,18 @@ export class SpDropdownActionButton extends UbButton {
     iconElement.size = "small";
     this.buttonElement.insertBefore(iconElement, this.textElement.nextSibling);
   }
+
+  setAriaHasPopup(value: string) {
+    this.buttonElement.setAttribute("aria-haspopup", value);
+  }
+
+  setAriaExpanded(value: string) {
+    this.buttonElement.setAttribute("aria-expanded", value);
+  }
+
+  setAriaControls(value: string) {
+    this.buttonElement.setAttribute("aria-controls", value);
+  }
 }
 
 declare global {

diff --git a/src/components/dropdownAction/sp-dropdown-action.ts b/src/components/dropdownAction/sp-dropdown-action.ts
@@ -13,6 +13,10 @@ function isValidPosition(value: string): value is Position {
   return positions.some((position) => position === value);
 }
 
+function createMenuId() {
+  return `sp-dropdown-action-menu-${Math.random().toString(32).substring(2)}`;
+}
+
 const styles = new CSSStyleSheet();
 styles.replaceSync(`${foundationStyle} ${dropdownActionStyle}`);
 
@@ -21,6 +25,8 @@ export class SpDropdownAction extends HTMLElement {
   #buttonElement = document.createElement("sp-dropdown-action-button");
   #menuElement = document.createElement("div");
   #menuSlotElement = document.createElement("slot");
+
+  #menuId = createMenuId();
 
   #open: boolean = false;
   #disabled: boolean = false;
@@ -87,7 +93,7 @@ export class SpDropdownAction extends HTMLElement {
   connectedCallback() {
     this.#buttonElement.addEventListener(
       "click",
-      this.#toggle.bind(this),
+      this.#toggleMenuVisibility.bind(this),
     );
 
     this.#baseElement.appendChild(this.#buttonElement);
@@ -103,6 +109,7 @@ export class SpDropdownAction extends HTMLElement {
 
     this.shadowRoot?.appendChild(this.#baseElement);
 
+    this.#setupAccessibilityAttributes();
     this.#syncMenuMinWidthWithButtonWidth();
   }
 
@@ -132,12 +139,25 @@ export class SpDropdownAction extends HTMLElement {
     }
   }
 
-  #toggle() {
+  #toggleMenuVisibility() {
     this.open = !this.open;
+    this.#updateAriaExpandedAttribute();
   }
 
   #hideMenu() {
     this.open = false;
+    this.#updateAriaExpandedAttribute();
+  }
+
+  #setupAccessibilityAttributes() {
+    this.#buttonElement.setAriaHasPopup("true");
+    this.#buttonElement.setAriaControls(this.#menuId);
+    this.#menuElement.setAttribute("id", this.#menuId);
+    this.#updateAriaExpandedAttribute();
+  }
+
+  #updateAriaExpandedAttribute() {
+    this.#buttonElement.setAriaExpanded(this.open ? "true" : "false");
   }
 
   #syncMenuMinWidthWithButtonWidth() {