From 95e2ebe0769a4c1549914cb7aed89fc7c3631c0d Mon Sep 17 00:00:00 2001
From: beckettrowan <browan@amplify.com>
Date: Mon, 3 Nov 2025 10:49:14 -0500
Subject: [PATCH] Added required aria-expanded attributes and fixed closing
 focus

---
 src/components/popup.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/popup.ts b/src/components/popup.ts
index 3ee509c..d6b1ce6 100644
--- a/src/components/popup.ts
+++ b/src/components/popup.ts
@@ -3,16 +3,15 @@
 // (c) Mathigon
 // =============================================================================
 
-
 import {$body, CustomElementView, ElementView, register} from '../';
 
-
 /**
  * Popup component that reveals its `.popup-body` child when clicked.
  */
 @register('x-popup')
 export class Popup extends CustomElementView {
   private animation!: string;
+  private $target!: ElementView;
   private $bubble!: ElementView;
   isOpen = false;
 
@@ -22,8 +21,8 @@ export class Popup extends CustomElementView {
     this.$bubble = this.$('.popup-body')!;
     this.$bubble.hide();
 
-    const $target = this.$('.popup-target')!;
-    $target.on('click', () => this.toggleOpen());
+    this.$target = this.$('.popup-target')!;
+    this.$target.on('click', () => this.toggleOpen());
     this.on('clickOutside', () => this.close());
     for (const $a of this.$bubble.$$('a')) $a.on('click', () => this.close());
 
@@ -42,6 +41,8 @@ export class Popup extends CustomElementView {
     if (this.isOpen) return;
     this.isOpen = true;
 
+    this.$target.setAttr('aria-expanded', true);
+
     this.addClass('active');
     this.$bubble.enter(this.animation, 150);
     this.$bubble.setAttr('role', 'dialog');
@@ -53,9 +54,12 @@ export class Popup extends CustomElementView {
     if (!this.isOpen) return;
     this.isOpen = false;
 
+    this.$target.setAttr('aria-expanded', false);
+
     this.removeClass('active');
     this.$bubble.exit(this.animation, 150);
     this.$bubble.removeAttr('role');
     this.trigger('close');
+    this.$target.focus();
   }
 }