Add aria-haspopup and aria-expanded to invoker (#2989)

primer · Aug 6, 2024 · 36a044a · 36a044a
1 parent 3bf8fd4
commit 36a044a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/tall-ladybugs-divide.md b/.changeset/tall-ladybugs-divide.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Add `aria-haspopup` and `aria-expanded` to `SelectPanel` state
diff --git a/app/components/primer/alpha/select_panel.rb b/app/components/primer/alpha/select_panel.rb
@@ -461,7 +461,7 @@ def initialize(
 
         system_arguments[:aria] = merge_aria(
           system_arguments,
-          { aria: { controls: "#{@panel_id}-dialog" } }
+          { aria: { controls: "#{@panel_id}-dialog", "haspopup": "dialog", "expanded": "false" } }
         )
 
         Primer::Beta::Button.new(**system_arguments)

diff --git a/app/components/primer/alpha/select_panel_element.ts b/app/components/primer/alpha/select_panel_element.ts
@@ -54,6 +54,7 @@ const updateWhenVisible = (() => {
     })
     resizeObserver.observe(el.ownerDocument.documentElement)
     el.addEventListener('dialog:close', () => {
+      el.invokerElement?.setAttribute('aria-expanded', 'false')
       anchors.delete(el)
     })
     el.addEventListener('dialog:open', () => {
@@ -466,6 +467,7 @@ export class SelectPanelElement extends HTMLElement {
     if (event.target === this.dialog && event.type === 'close') {
       // Remove data-ready so it can be set the next time the panel is opened
       this.dialog.removeAttribute('data-ready')
+      this.invokerElement?.setAttribute('aria-expanded', 'false')
 
       this.dispatchEvent(
         new CustomEvent('panelClosed', {
@@ -908,6 +910,7 @@ export class SelectPanelElement extends HTMLElement {
   show() {
     this.updateAnchorPosition()
     this.dialog.showModal()
+    this.invokerElement?.setAttribute('aria-expanded', 'true')
     const event = new CustomEvent('dialog:open', {
       detail: {dialog: this.dialog},
     })