From 36a044a28f6070e422681c8765693d1c21411fea Mon Sep 17 00:00:00 2001
From: Joyce Zhu <joycezhu@github.com>
Date: Tue, 6 Aug 2024 13:19:20 -0400
Subject: [PATCH] Add `aria-haspopup` and `aria-expanded` to invoker (#2989)

---
 .changeset/tall-ladybugs-divide.md                  | 5 +++++
 app/components/primer/alpha/select_panel.rb         | 2 +-
 app/components/primer/alpha/select_panel_element.ts | 3 +++
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tall-ladybugs-divide.md

diff --git a/.changeset/tall-ladybugs-divide.md b/.changeset/tall-ladybugs-divide.md
new file mode 100644
index 0000000000..810c246c4d
--- /dev/null
+++ 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
index 6dcca1826a..499c71b078 100644
--- 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
index 8f0ffafcbe..9765f5fedd 100644
--- 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},
     })