From e23d6cac991851cdea34bc5525369c10f1f84b9a Mon Sep 17 00:00:00 2001 From: Ivy Olamit Date: Fri, 13 Feb 2026 13:57:50 -0800 Subject: [PATCH 1/2] [LEMS-3407/center-align-text-with-choice-indicator] docs(changeset): Center align text content with radio widget's choice indictor. --- .changeset/four-ghosts-bathe.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/four-ghosts-bathe.md diff --git a/.changeset/four-ghosts-bathe.md b/.changeset/four-ghosts-bathe.md new file mode 100644 index 0000000000..a4a64321ec --- /dev/null +++ b/.changeset/four-ghosts-bathe.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": minor +--- + +Center align text content with radio widget's choice indictor. From 6fcc403a65e7fc62dacda0c245186a148c74ed76 Mon Sep 17 00:00:00 2001 From: Ivy Olamit Date: Fri, 13 Feb 2026 14:05:24 -0800 Subject: [PATCH 2/2] [LEMS-3407/center-align-text-with-choice-indicator] [Radio] Center align text content with radio widget's choice indictor --- .../src/widgets/radio/choice-indicator.module.css | 3 +++ packages/perseus/src/widgets/radio/choice.module.css | 9 +++------ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/perseus/src/widgets/radio/choice-indicator.module.css b/packages/perseus/src/widgets/radio/choice-indicator.module.css index 57cf337e6f..9d33e5fbb3 100644 --- a/packages/perseus/src/widgets/radio/choice-indicator.module.css +++ b/packages/perseus/src/widgets/radio/choice-indicator.module.css @@ -86,6 +86,9 @@ .is-correct[aria-pressed="true"] { background-color: var(--wb-semanticColor-core-background-success-strong); color: var(--wb-semanticColor-core-foreground-knockout-default); + outline: var(--wb-border-width-medium) solid + var(--wb-semanticColor-core-border-success-default); + outline-offset: var(--wb-sizing-size_020); width: var(--perseus-multiple-choice-indicator-correct-size); } diff --git a/packages/perseus/src/widgets/radio/choice.module.css b/packages/perseus/src/widgets/radio/choice.module.css index cc522d52fb..b3ea376a77 100644 --- a/packages/perseus/src/widgets/radio/choice.module.css +++ b/packages/perseus/src/widgets/radio/choice.module.css @@ -27,15 +27,14 @@ --perseus-multiple-choice-divider-space: var( --wb-border-width-medium ); /* Space between the choices, which is also used to position the divider */ + align-items: center; /* Vertically center indicator with content */ border-radius: var(--wb-border-radius-radius_080); + display: flex; /* Enable flexbox layout for indicator and content alignment */ font-size: var(--wb-font-heading-size-medium); font-weight: var(--wb-font-weight-semi); line-height: var(--wb-font-heading-lineHeight-medium); margin-block-end: var(--perseus-multiple-choice-divider-space); min-height: calc(var(--perseus-multiple-choice-spacing) * 4); - outline: var(--wb-border-width-medium) solid - var(--perseus-multiple-choice-correctness-outline-color, transparent); - outline-offset: calc(var(--wb-border-width-medium) * -1); padding: var(--perseus-multiple-choice-spacing); position: relative; /* Needed to enable the dividers (:before and :after pseudo-elements) to position correctly */ width: 100%; @@ -138,10 +137,8 @@ .is-correct { --perseus-multiple-choice-divider-width: 0; - --perseus-multiple-choice-correctness-outline-color: var( - --wb-semanticColor-core-border-success-default - ); color: var(--wb-semanticColor-core-foreground-neutral-strong); + margin-block-end: 3px; /* 3px spacing between correct answers as per design spec */ } .is-wrong {