From 79b1ff3ed5251a061f5b463d616e7100798dc95b Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Tue, 11 Mar 2025 11:51:38 -0700
Subject: [PATCH 1/6] Reinstate the focus outline of the x button in math-input
 component, and adjusted styling

---
 .../src/components/keypad/keypad-mathquill.stories.tsx    | 2 +-
 packages/math-input/src/components/keypad/shared-keys.tsx | 2 +-
 packages/perseus/src/components/math-input.tsx            | 8 +++-----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx b/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx
index ae4331c041..2ca7af741a 100644
--- a/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx
+++ b/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx
@@ -77,7 +77,7 @@ export function V2KeypadWithMathquill() {
                 content={
                     <PopoverContentCore
                         style={{
-                            padding: 10,
+                            padding: 0,
                             maxWidth: "initial",
                         }}
                     >
diff --git a/packages/math-input/src/components/keypad/shared-keys.tsx b/packages/math-input/src/components/keypad/shared-keys.tsx
index 18308ef4ae..e256987d09 100644
--- a/packages/math-input/src/components/keypad/shared-keys.tsx
+++ b/packages/math-input/src/components/keypad/shared-keys.tsx
@@ -103,7 +103,7 @@ export default function SharedKeys(props: Props) {
                 keyConfig={Keys.BACKSPACE}
                 onClickKey={onClickKey}
                 coord={[5, 3]}
-                action
+                secondary
             />
         </>
     );
diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx
index 690e1deec9..462084a710 100644
--- a/packages/perseus/src/components/math-input.tsx
+++ b/packages/perseus/src/components/math-input.tsx
@@ -341,9 +341,6 @@ class InnerMathInput extends React.Component<InnerProps, State> {
                     />
                     <Popover
                         rootBoundary="document"
-                        opened={this.state.keypadOpen}
-                        onClose={() => this.closeKeypad()}
-                        dismissEnabled
                         aria-label={this.context.strings.mathInputTitle}
                         aria-describedby={`popover-content-${popoverContentUniqueId}`}
                         content={() => (
@@ -355,7 +352,6 @@ class InnerMathInput extends React.Component<InnerProps, State> {
                                     {this.context.strings.mathInputDescription}
                                 </HeadingMedium>
                                 <PopoverContentCore
-                                    closeButtonVisible
                                     style={styles.popoverContent}
                                 >
                                     <DesktopKeypad
@@ -372,10 +368,13 @@ class InnerMathInput extends React.Component<InnerProps, State> {
                                             mapButtonSets(
                                                 this.props?.buttonSets,
                                             ))}
+                                        showDismiss
                                     />
                                 </PopoverContentCore>
                             </>
                         )}
+                        dismissEnabled
+                        opened={this.state.keypadOpen}
                     >
                         {this.props.buttonsVisible === "never" ? (
                             <MathInputIcon
@@ -554,7 +553,6 @@ const styles = StyleSheet.create({
     },
     popoverContent: {
         padding: 0,
-        paddingBottom: spacing.xxSmall_6,
         maxWidth: "initial",
     },
 });

From 391629a6b8c788bb6c0623f609ecdc86fef025ba Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Tue, 11 Mar 2025 12:03:54 -0700
Subject: [PATCH 2/6] update snapshots

---
 .../__tests__/__snapshots__/keypad.test.tsx.snap     |  4 ++--
 .../__tests__/__snapshots__/renderer.test.tsx.snap   |  6 +++---
 .../dropdown/__snapshots__/dropdown.test.ts.snap     |  4 ++--
 .../__snapshots__/graded-group-set-jipt.test.ts.snap |  6 +++---
 .../__snapshots__/graded-group-set.test.ts.snap      |  2 +-
 .../__snapshots__/graded-group.test.ts.snap          |  2 +-
 .../__snapshots__/interactive-graph.test.tsx.snap    | 12 ++++++------
 .../widgets/video/__snapshots__/video.test.ts.snap   |  4 ++--
 8 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
index e149a9ebdc..142e52d663 100644
--- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
+++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap
@@ -835,7 +835,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_wps3dh"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
@@ -1891,7 +1891,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
                 class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
               >
                 <div
-                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_wps3dh"
+                  class="default_xu2jcg-o_O-base_muxx52-o_O-inlineStyles_s65xgl"
                 >
                   <svg
                     fill="none"
diff --git a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap
index c3806b6a17..68a1613e87 100644
--- a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap
+++ b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap
@@ -371,7 +371,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
-                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_55qvad"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_13mg2xx"
                 id=":r3:"
                 role="combobox"
                 type="button"
@@ -463,7 +463,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
-                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_55qvad"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_13mg2xx"
                 id=":r6:"
                 role="combobox"
                 type="button"
@@ -555,7 +555,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
-                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_55qvad"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_13mg2xx"
                 id=":r0:"
                 role="combobox"
                 type="button"
diff --git a/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap b/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap
index 44cfae5a40..2c4d23e978 100644
--- a/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap
+++ b/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap
@@ -38,7 +38,7 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Select an answer"
-                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_55qvad"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_13mg2xx"
                 id=":r3:"
                 role="combobox"
                 type="button"
@@ -124,7 +124,7 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Select an answer"
-                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_55qvad"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_13mg2xx"
                 id=":r0:"
                 role="combobox"
                 type="button"
diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
index c08258840a..863944c714 100644
--- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
@@ -87,7 +87,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_9hhwrw"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_ggcqzw"
                 role="button"
                 type="button"
               >
@@ -165,7 +165,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_9hhwrw"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_ggcqzw"
                 role="button"
                 type="button"
               >
@@ -243,7 +243,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_9hhwrw"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_ggcqzw"
                 role="button"
                 type="button"
               >
diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
index c4850712da..c32e1cf3b0 100644
--- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
@@ -153,7 +153,7 @@ exports[`graded group widget should snapshot 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_9hhwrw"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_ggcqzw"
                 role="button"
                 type="button"
               >
diff --git a/packages/perseus/src/widgets/graded-group/__snapshots__/graded-group.test.ts.snap b/packages/perseus/src/widgets/graded-group/__snapshots__/graded-group.test.ts.snap
index a880ba4ca0..751aa15e04 100644
--- a/packages/perseus/src/widgets/graded-group/__snapshots__/graded-group.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group/__snapshots__/graded-group.test.ts.snap
@@ -408,7 +408,7 @@ exports[`graded-group should snapshot: initial render (mobile: false) 1`] = `
             />
             <button
               aria-disabled="false"
-              class="button_vr44p2-o_O-shared_lwskrm-o_O-default_9hhwrw"
+              class="button_vr44p2-o_O-shared_lwskrm-o_O-default_ggcqzw"
               role="button"
               type="button"
             >
diff --git a/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap b/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap
index 72b706392f..e1c441aa3c 100644
--- a/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap
+++ b/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap
@@ -2066,7 +2066,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
             >
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1jo3m5b-o_O-inlineStyles_16y2sco"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1m2y2k0-o_O-inlineStyles_16y2sco"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -2332,7 +2332,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
             >
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_1jo3m5b-o_O-disabled_6p5ssv-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_1m2y2k0-o_O-disabled_oj20kr-o_O-inlineStyles_1kc2paq"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -2346,7 +2346,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
               </button>
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_9hhwrw-o_O-disabled_6p5ssv-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_ggcqzw-o_O-disabled_oj20kr-o_O-inlineStyles_1kc2paq"
                 role="button"
                 tabindex="-1"
                 type="button"
@@ -3390,7 +3390,7 @@ exports[`Interactive Graph question Should render predictably: first render 3`]
             >
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1jo3m5b-o_O-inlineStyles_16y2sco"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1m2y2k0-o_O-inlineStyles_16y2sco"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -3656,7 +3656,7 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
             >
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_1jo3m5b-o_O-disabled_6p5ssv-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_1m2y2k0-o_O-disabled_oj20kr-o_O-inlineStyles_1kc2paq"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -3670,7 +3670,7 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
               </button>
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_9hhwrw-o_O-disabled_6p5ssv-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_ggcqzw-o_O-disabled_oj20kr-o_O-inlineStyles_1kc2paq"
                 role="button"
                 tabindex="-1"
                 type="button"
diff --git a/packages/perseus/src/widgets/video/__snapshots__/video.test.ts.snap b/packages/perseus/src/widgets/video/__snapshots__/video.test.ts.snap
index 651990415a..4b45427c2a 100644
--- a/packages/perseus/src/widgets/video/__snapshots__/video.test.ts.snap
+++ b/packages/perseus/src/widgets/video/__snapshots__/video.test.ts.snap
@@ -60,7 +60,7 @@ exports[`video widget should snapshot on mobile: first mobile render 1`] = `
                 class="default_xu2jcg-o_O-inlineStyles_sc01dy"
               />
               <a
-                class="shared_17fj7pd-o_O-rest_16mfksr visited-no-recolor"
+                class="shared_17fj7pd-o_O-resting_nelfll visited-no-recolor"
                 href="/transcript/videoNotFound"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -136,7 +136,7 @@ exports[`video widget should snapshot: first render 1`] = `
                 class="default_xu2jcg-o_O-inlineStyles_sc01dy"
               />
               <a
-                class="shared_17fj7pd-o_O-rest_16mfksr visited-no-recolor"
+                class="shared_17fj7pd-o_O-resting_nelfll visited-no-recolor"
                 href="/transcript/videoNotFound"
                 rel="noopener noreferrer"
                 target="_blank"

From e16dfb88f2e1d206c392bbb569845a5b2f946a1d Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Tue, 11 Mar 2025 12:12:25 -0700
Subject: [PATCH 3/6] docs(changeset): [LEMS-2880] Bugfix the close button
 focus outline on hover in keypad and other style issues

---
 .changeset/dry-shirts-refuse.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/dry-shirts-refuse.md

diff --git a/.changeset/dry-shirts-refuse.md b/.changeset/dry-shirts-refuse.md
new file mode 100644
index 0000000000..28dabf23ed
--- /dev/null
+++ b/.changeset/dry-shirts-refuse.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+---
+
+[LEMS-2880] Bugfix the close button focus outline on hover in keypad and other style issues

From 49c25376a9194e95b03bdba8789e9d66594f25dd Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Tue, 11 Mar 2025 15:48:49 -0700
Subject: [PATCH 4/6] [bugfix/LEMS-2880-reinstate-focus-outline] Handle close
 keypad

---
 packages/perseus/src/components/math-input.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx
index 462084a710..9bb34a1c36 100644
--- a/packages/perseus/src/components/math-input.tsx
+++ b/packages/perseus/src/components/math-input.tsx
@@ -282,9 +282,13 @@ class InnerMathInput extends React.Component<InnerProps, State> {
         //   a keyboard event is "keydown" type.
         //   In react without WonderBlocks, "enter" or "space" keydown events
         //   are also "click" events, differentiated by "detail".
-        if (e.type === "click") {
+        if (e?.type === "click") {
             this.focus();
         }
+
+        if (key === "DISMISS") {
+            this.closeKeypad();
+        }
     };
 
     render(): React.ReactNode {
@@ -340,6 +344,8 @@ class InnerMathInput extends React.Component<InnerProps, State> {
                         onBlur={() => this.blur()}
                     />
                     <Popover
+                        opened={this.state.keypadOpen}
+                        dismissEnabled
                         rootBoundary="document"
                         aria-label={this.context.strings.mathInputTitle}
                         aria-describedby={`popover-content-${popoverContentUniqueId}`}
@@ -373,8 +379,6 @@ class InnerMathInput extends React.Component<InnerProps, State> {
                                 </PopoverContentCore>
                             </>
                         )}
-                        dismissEnabled
-                        opened={this.state.keypadOpen}
                     >
                         {this.props.buttonsVisible === "never" ? (
                             <MathInputIcon

From fc048e31b6a6a5299228a67edffbef5a6867001f Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Wed, 12 Mar 2025 10:03:11 -0700
Subject: [PATCH 5/6] [bugfix/LEMS-2880-reinstate-focus-outline] updated
 snapshots

---
 .../__tests__/__snapshots__/renderer.test.tsx.snap   |  6 +++---
 .../dropdown/__snapshots__/dropdown.test.ts.snap     |  4 ++--
 .../__snapshots__/graded-group-set-jipt.test.ts.snap |  6 +++---
 .../__snapshots__/graded-group-set.test.ts.snap      |  2 +-
 .../__snapshots__/graded-group.test.ts.snap          |  2 +-
 .../__snapshots__/interactive-graph.test.tsx.snap    | 12 ++++++------
 .../widgets/video/__snapshots__/video.test.ts.snap   |  4 ++--
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap
index 68a1613e87..c3806b6a17 100644
--- a/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap
+++ b/packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap
@@ -371,7 +371,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
-                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_13mg2xx"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_55qvad"
                 id=":r3:"
                 role="combobox"
                 type="button"
@@ -463,7 +463,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
-                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_13mg2xx"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_55qvad"
                 id=":r6:"
                 role="combobox"
                 type="button"
@@ -555,7 +555,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
-                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_13mg2xx"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_55qvad"
                 id=":r0:"
                 role="combobox"
                 type="button"
diff --git a/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap b/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap
index 2c4d23e978..44cfae5a40 100644
--- a/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap
+++ b/packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap
@@ -38,7 +38,7 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Select an answer"
-                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_13mg2xx"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_55qvad"
                 id=":r3:"
                 role="combobox"
                 type="button"
@@ -124,7 +124,7 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Select an answer"
-                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_13mg2xx"
+                class="button_vr44p2-o_O-shared_u51dsh-o_O-default_55qvad"
                 id=":r0:"
                 role="combobox"
                 type="button"
diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
index 863944c714..c08258840a 100644
--- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
@@ -87,7 +87,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_ggcqzw"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_9hhwrw"
                 role="button"
                 type="button"
               >
@@ -165,7 +165,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_ggcqzw"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_9hhwrw"
                 role="button"
                 type="button"
               >
@@ -243,7 +243,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_ggcqzw"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_9hhwrw"
                 role="button"
                 type="button"
               >
diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
index c32e1cf3b0..c4850712da 100644
--- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
@@ -153,7 +153,7 @@ exports[`graded group widget should snapshot 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_ggcqzw"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_9hhwrw"
                 role="button"
                 type="button"
               >
diff --git a/packages/perseus/src/widgets/graded-group/__snapshots__/graded-group.test.ts.snap b/packages/perseus/src/widgets/graded-group/__snapshots__/graded-group.test.ts.snap
index 751aa15e04..a880ba4ca0 100644
--- a/packages/perseus/src/widgets/graded-group/__snapshots__/graded-group.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group/__snapshots__/graded-group.test.ts.snap
@@ -408,7 +408,7 @@ exports[`graded-group should snapshot: initial render (mobile: false) 1`] = `
             />
             <button
               aria-disabled="false"
-              class="button_vr44p2-o_O-shared_lwskrm-o_O-default_ggcqzw"
+              class="button_vr44p2-o_O-shared_lwskrm-o_O-default_9hhwrw"
               role="button"
               type="button"
             >
diff --git a/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap b/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap
index e1c441aa3c..72b706392f 100644
--- a/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap
+++ b/packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap
@@ -2066,7 +2066,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
             >
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1m2y2k0-o_O-inlineStyles_16y2sco"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1jo3m5b-o_O-inlineStyles_16y2sco"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -2332,7 +2332,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
             >
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_1m2y2k0-o_O-disabled_oj20kr-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_1jo3m5b-o_O-disabled_6p5ssv-o_O-inlineStyles_1kc2paq"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -2346,7 +2346,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
               </button>
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_ggcqzw-o_O-disabled_oj20kr-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_9hhwrw-o_O-disabled_6p5ssv-o_O-inlineStyles_1kc2paq"
                 role="button"
                 tabindex="-1"
                 type="button"
@@ -3390,7 +3390,7 @@ exports[`Interactive Graph question Should render predictably: first render 3`]
             >
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1m2y2k0-o_O-inlineStyles_16y2sco"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1jo3m5b-o_O-inlineStyles_16y2sco"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -3656,7 +3656,7 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
             >
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_1m2y2k0-o_O-disabled_oj20kr-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_1jo3m5b-o_O-disabled_6p5ssv-o_O-inlineStyles_1kc2paq"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -3670,7 +3670,7 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
               </button>
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_ggcqzw-o_O-disabled_oj20kr-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-disabled_mqm918-o_O-default_9hhwrw-o_O-disabled_6p5ssv-o_O-inlineStyles_1kc2paq"
                 role="button"
                 tabindex="-1"
                 type="button"
diff --git a/packages/perseus/src/widgets/video/__snapshots__/video.test.ts.snap b/packages/perseus/src/widgets/video/__snapshots__/video.test.ts.snap
index 4b45427c2a..651990415a 100644
--- a/packages/perseus/src/widgets/video/__snapshots__/video.test.ts.snap
+++ b/packages/perseus/src/widgets/video/__snapshots__/video.test.ts.snap
@@ -60,7 +60,7 @@ exports[`video widget should snapshot on mobile: first mobile render 1`] = `
                 class="default_xu2jcg-o_O-inlineStyles_sc01dy"
               />
               <a
-                class="shared_17fj7pd-o_O-resting_nelfll visited-no-recolor"
+                class="shared_17fj7pd-o_O-rest_16mfksr visited-no-recolor"
                 href="/transcript/videoNotFound"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -136,7 +136,7 @@ exports[`video widget should snapshot: first render 1`] = `
                 class="default_xu2jcg-o_O-inlineStyles_sc01dy"
               />
               <a
-                class="shared_17fj7pd-o_O-resting_nelfll visited-no-recolor"
+                class="shared_17fj7pd-o_O-rest_16mfksr visited-no-recolor"
                 href="/transcript/videoNotFound"
                 rel="noopener noreferrer"
                 target="_blank"

From 3caf2c770326510c595eaf34d6bc6c22ef9fea5c Mon Sep 17 00:00:00 2001
From: Ivy Olamit <ivy@khanacademy.org>
Date: Wed, 19 Mar 2025 11:17:33 -0700
Subject: [PATCH 6/6] [bugfix/LEMS-2880-reinstate-focus-outline] updated
 changeset

---
 .changeset/dry-shirts-refuse.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/dry-shirts-refuse.md b/.changeset/dry-shirts-refuse.md
index 28dabf23ed..7605007bef 100644
--- a/.changeset/dry-shirts-refuse.md
+++ b/.changeset/dry-shirts-refuse.md
@@ -3,4 +3,4 @@
 "@khanacademy/perseus": patch
 ---
 
-[LEMS-2880] Bugfix the close button focus outline on hover in keypad and other style issues
+Fix expression widget styling issues. Close button focus outline is now visible, backspace button styling is now consistent with other buttons, and adjusted the popover padding.