From ad3c416979aed98d0d3efc8fa2d2bb5333159f7a Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Wed, 12 Nov 2025 15:02:01 -0800
Subject: [PATCH 01/15] [add-missing-group-label] comment out aria-hidden

---
 .../perseus/src/widgets/radio/multiple-choice-component.new.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index 2b5e7122afb..1c8c0f0a2b8 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -113,7 +113,7 @@ const MultipleChoiceComponent = ({
             >
                 <legend
                     id={legendId}
-                    aria-hidden="true"
+                    // aria-hidden="true"
                     className={styles.instructions}
                 >
                     {instructions}

From 1556d7fa105a964b75f315b75f1d830ba4485d11 Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Wed, 12 Nov 2025 15:08:18 -0800
Subject: [PATCH 02/15] [add-missing-group-label] docs(changeset): fix - remove
 aria hidden in radio to enable group label to be read

---
 .changeset/five-seas-walk.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/five-seas-walk.md

diff --git a/.changeset/five-seas-walk.md b/.changeset/five-seas-walk.md
new file mode 100644
index 00000000000..76d209705ce
--- /dev/null
+++ b/.changeset/five-seas-walk.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+fix - remove aria hidden in radio to enable group label to be read

From 9b83bbe76fc825fb9c74db8f3fa9d131e3774588 Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Thu, 13 Nov 2025 09:25:07 -0800
Subject: [PATCH 03/15] [add-missing-group-label] delete aria hidden

---
 .../src/widgets/radio/multiple-choice-component.new.tsx     | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index 1c8c0f0a2b8..f240d040eae 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -111,11 +111,7 @@ const MultipleChoiceComponent = ({
                 ref={containerRef}
                 style={cssVariableDeclaration}
             >
-                <legend
-                    id={legendId}
-                    // aria-hidden="true"
-                    className={styles.instructions}
-                >
+                <legend id={legendId} className={styles.instructions}>
                     {instructions}
                 </legend>
                 <ScrollableView id={scrollId} overflowX="auto">

From 16ca3c2c41f5cc001099a0b26645de588d552aca Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Thu, 13 Nov 2025 10:23:31 -0800
Subject: [PATCH 04/15] [add-missing-group-label] remove both aria hidden and
 aria-labelledby

---
 .../src/widgets/radio/multiple-choice-component.new.tsx      | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index f240d040eae..3a31bb2890f 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -115,10 +115,7 @@ const MultipleChoiceComponent = ({
                     {instructions}
                 </legend>
                 <ScrollableView id={scrollId} overflowX="auto">
-                    <ul
-                        aria-labelledby={legendId}
-                        className={choiceListClasses}
-                    >
+                    <ul className={choiceListClasses}>
                         <ChoiceListItems
                             choices={choices}
                             i18nStrings={strings}

From f497d1615e4f46d9b0d7b853d1294678348c2b47 Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Thu, 13 Nov 2025 14:55:55 -0800
Subject: [PATCH 05/15] [add-missing-group-label] add roles, readd arias

---
 packages/perseus/src/widgets/radio/choice.new.tsx            | 4 ++--
 .../src/widgets/radio/multiple-choice-component.new.tsx      | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/perseus/src/widgets/radio/choice.new.tsx b/packages/perseus/src/widgets/radio/choice.new.tsx
index 9ccfac256bc..f08a6fc98d0 100644
--- a/packages/perseus/src/widgets/radio/choice.new.tsx
+++ b/packages/perseus/src/widgets/radio/choice.new.tsx
@@ -34,8 +34,8 @@ const Choice = (props: IndicatorProps) => {
             Therefore, WCAG 2.1.1 is still satisfied since functionality is
                 aligned with the input method.
          */
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-        <li className={classes} onClick={clickHandler}>
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions,jsx-a11y/no-redundant-roles
+        <li className={classes} onClick={clickHandler} role="listitem">
             <Indicator
                 buttonRef={buttonRef}
                 checked={props.checked}
diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index 3a31bb2890f..3b9daa5d1e8 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -111,11 +111,12 @@ const MultipleChoiceComponent = ({
                 ref={containerRef}
                 style={cssVariableDeclaration}
             >
-                <legend id={legendId} className={styles.instructions}>
+                <legend id={legendId} className={styles.instructions} aria-hidden={true}>
                     {instructions}
                 </legend>
                 <ScrollableView id={scrollId} overflowX="auto">
-                    <ul className={choiceListClasses}>
+                    {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+                    <ul className={choiceListClasses} role="list" aria-labelledby={legendId}>
                         <ChoiceListItems
                             choices={choices}
                             i18nStrings={strings}

From e71ee03ada9cd428fc26d6f93b6cda5b4b3503ff Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Wed, 19 Nov 2025 10:26:46 -0800
Subject: [PATCH 06/15] [add-missing-group-label] add div + perseus sr only
 label to legend

---
 .../src/widgets/radio/multiple-choice-component.new.tsx  | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index 3b9daa5d1e8..2a00307b6ca 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -60,7 +60,6 @@ const MultipleChoiceComponent = ({
     reviewMode,
 }: MultipleChoiceComponentProps): React.ReactElement => {
     const {strings} = usePerseusI18n();
-    const legendId = useId();
     const containerRef = useRef<HTMLFieldSetElement>(null);
     const [backgroundColor, setBackgroundColor] = useState("transparent");
 
@@ -111,12 +110,12 @@ const MultipleChoiceComponent = ({
                 ref={containerRef}
                 style={cssVariableDeclaration}
             >
-                <legend id={legendId} className={styles.instructions} aria-hidden={true}>
+                <legend className="perseus-sr-only">{instructions}</legend>
+                <div className={styles.instructions} aria-hidden="true">
                     {instructions}
-                </legend>
+                </div>
                 <ScrollableView id={scrollId} overflowX="auto">
-                    {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
-                    <ul className={choiceListClasses} role="list" aria-labelledby={legendId}>
+                    <ul className={choiceListClasses}>
                         <ChoiceListItems
                             choices={choices}
                             i18nStrings={strings}

From 7c9dbbc732377988d6221404fcde170c468d42fe Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Wed, 19 Nov 2025 11:11:09 -0800
Subject: [PATCH 07/15] [add-missing-group-label] remove legend

---
 .../radio/multiple-choice-component.new.tsx        | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index 2a00307b6ca..f7aeb27fa11 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -60,6 +60,7 @@ const MultipleChoiceComponent = ({
     reviewMode,
 }: MultipleChoiceComponentProps): React.ReactElement => {
     const {strings} = usePerseusI18n();
+    const legendId = useId();
     const containerRef = useRef<HTMLFieldSetElement>(null);
     const [backgroundColor, setBackgroundColor] = useState("transparent");
 
@@ -110,12 +111,19 @@ const MultipleChoiceComponent = ({
                 ref={containerRef}
                 style={cssVariableDeclaration}
             >
-                <legend className="perseus-sr-only">{instructions}</legend>
-                <div className={styles.instructions} aria-hidden="true">
+                {/* <legend className="perseus-sr-only">{instructions}</legend> */}
+                <div
+                    className={styles.instructions}
+                    aria-hidden="true"
+                    id={legendId}
+                >
                     {instructions}
                 </div>
                 <ScrollableView id={scrollId} overflowX="auto">
-                    <ul className={choiceListClasses}>
+                    <ul
+                        className={choiceListClasses}
+                        aria-labelledby={legendId}
+                    >
                         <ChoiceListItems
                             choices={choices}
                             i18nStrings={strings}

From dbeb13a2b2951a5e66fa7a7ce5c5eb8eae68aee7 Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Wed, 19 Nov 2025 11:13:18 -0800
Subject: [PATCH 08/15] [add-missing-group-label] remove choice redundant role

---
 packages/perseus/src/widgets/radio/choice.new.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/perseus/src/widgets/radio/choice.new.tsx b/packages/perseus/src/widgets/radio/choice.new.tsx
index f08a6fc98d0..9ccfac256bc 100644
--- a/packages/perseus/src/widgets/radio/choice.new.tsx
+++ b/packages/perseus/src/widgets/radio/choice.new.tsx
@@ -34,8 +34,8 @@ const Choice = (props: IndicatorProps) => {
             Therefore, WCAG 2.1.1 is still satisfied since functionality is
                 aligned with the input method.
          */
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions,jsx-a11y/no-redundant-roles
-        <li className={classes} onClick={clickHandler} role="listitem">
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+        <li className={classes} onClick={clickHandler}>
             <Indicator
                 buttonRef={buttonRef}
                 checked={props.checked}

From d318d649e611a970e16a7cd9cb136ea214e7ee26 Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Wed, 19 Nov 2025 14:00:11 -0800
Subject: [PATCH 09/15] [add-missing-group-label] old implementation

---
 .../radio/multiple-choice-component.new.tsx       | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index f7aeb27fa11..ce4b3a25f3d 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -60,7 +60,7 @@ const MultipleChoiceComponent = ({
     reviewMode,
 }: MultipleChoiceComponentProps): React.ReactElement => {
     const {strings} = usePerseusI18n();
-    const legendId = useId();
+    // const legendId = useId();
     const containerRef = useRef<HTMLFieldSetElement>(null);
     const [backgroundColor, setBackgroundColor] = useState("transparent");
 
@@ -111,19 +111,12 @@ const MultipleChoiceComponent = ({
                 ref={containerRef}
                 style={cssVariableDeclaration}
             >
-                {/* <legend className="perseus-sr-only">{instructions}</legend> */}
-                <div
-                    className={styles.instructions}
-                    aria-hidden="true"
-                    id={legendId}
-                >
+                <legend className="perseus-sr-only">{instructions}</legend>
+                <div className={styles.instructions} aria-hidden="true">
                     {instructions}
                 </div>
                 <ScrollableView id={scrollId} overflowX="auto">
-                    <ul
-                        className={choiceListClasses}
-                        aria-labelledby={legendId}
-                    >
+                    <ul className={choiceListClasses}>
                         <ChoiceListItems
                             choices={choices}
                             i18nStrings={strings}

From 9ff7350197590af38521e09f61ec852c9a92308c Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Wed, 19 Nov 2025 14:27:12 -0800
Subject: [PATCH 10/15] [add-missing-group-label] add roles, keep current
 implementation

---
 .../perseus/src/widgets/radio/choice.new.tsx     |  4 ++--
 .../radio/multiple-choice-component.new.tsx      | 16 +++++++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/perseus/src/widgets/radio/choice.new.tsx b/packages/perseus/src/widgets/radio/choice.new.tsx
index 9ccfac256bc..f3eb4a5531d 100644
--- a/packages/perseus/src/widgets/radio/choice.new.tsx
+++ b/packages/perseus/src/widgets/radio/choice.new.tsx
@@ -34,8 +34,8 @@ const Choice = (props: IndicatorProps) => {
             Therefore, WCAG 2.1.1 is still satisfied since functionality is
                 aligned with the input method.
          */
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-        <li className={classes} onClick={clickHandler}>
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-redundant-roles
+        <li className={classes} onClick={clickHandler} role="listitem">
             <Indicator
                 buttonRef={buttonRef}
                 checked={props.checked}
diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index ce4b3a25f3d..75b5299c01a 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -60,7 +60,7 @@ const MultipleChoiceComponent = ({
     reviewMode,
 }: MultipleChoiceComponentProps): React.ReactElement => {
     const {strings} = usePerseusI18n();
-    // const legendId = useId();
+    const legendId = useId();
     const containerRef = useRef<HTMLFieldSetElement>(null);
     const [backgroundColor, setBackgroundColor] = useState("transparent");
 
@@ -111,12 +111,18 @@ const MultipleChoiceComponent = ({
                 ref={containerRef}
                 style={cssVariableDeclaration}
             >
-                <legend className="perseus-sr-only">{instructions}</legend>
-                <div className={styles.instructions} aria-hidden="true">
+                <legend
+                    id={legendId}
+                    className={styles.instructions}
+                    aria-hidden="true"
+                >
                     {instructions}
-                </div>
+                </legend>
                 <ScrollableView id={scrollId} overflowX="auto">
-                    <ul className={choiceListClasses}>
+                    <ul
+                        className={choiceListClasses}
+                        aria-labelledby={legendId}
+                    >
                         <ChoiceListItems
                             choices={choices}
                             i18nStrings={strings}

From b91b27738f5a11230d04a40d6c9a6c7022c2719e Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Wed, 19 Nov 2025 14:37:49 -0800
Subject: [PATCH 11/15] [add-missing-group-label] add roles

---
 .../perseus/src/widgets/radio/multiple-choice-component.new.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index 75b5299c01a..eb32558ffdc 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -119,9 +119,11 @@ const MultipleChoiceComponent = ({
                     {instructions}
                 </legend>
                 <ScrollableView id={scrollId} overflowX="auto">
+                    {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
                     <ul
                         className={choiceListClasses}
                         aria-labelledby={legendId}
+                        role="list"
                     >
                         <ChoiceListItems
                             choices={choices}

From 193946a187177cd352d4701ae13ae534731a349b Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Wed, 19 Nov 2025 15:49:45 -0800
Subject: [PATCH 12/15] [add-missing-group-label] replace legend with div, only

---
 packages/perseus/src/widgets/radio/choice.new.tsx           | 4 ++--
 .../src/widgets/radio/multiple-choice-component.new.tsx     | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/perseus/src/widgets/radio/choice.new.tsx b/packages/perseus/src/widgets/radio/choice.new.tsx
index f3eb4a5531d..9ccfac256bc 100644
--- a/packages/perseus/src/widgets/radio/choice.new.tsx
+++ b/packages/perseus/src/widgets/radio/choice.new.tsx
@@ -34,8 +34,8 @@ const Choice = (props: IndicatorProps) => {
             Therefore, WCAG 2.1.1 is still satisfied since functionality is
                 aligned with the input method.
          */
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-redundant-roles
-        <li className={classes} onClick={clickHandler} role="listitem">
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+        <li className={classes} onClick={clickHandler}>
             <Indicator
                 buttonRef={buttonRef}
                 checked={props.checked}
diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index eb32558ffdc..00e04573786 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -111,19 +111,17 @@ const MultipleChoiceComponent = ({
                 ref={containerRef}
                 style={cssVariableDeclaration}
             >
-                <legend
+                <div
                     id={legendId}
                     className={styles.instructions}
                     aria-hidden="true"
                 >
                     {instructions}
-                </legend>
+                </div>
                 <ScrollableView id={scrollId} overflowX="auto">
-                    {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
                     <ul
                         className={choiceListClasses}
                         aria-labelledby={legendId}
-                        role="list"
                     >
                         <ChoiceListItems
                             choices={choices}

From e028108a0da241c35b9c61252aef0002fc8ecdba Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Thu, 20 Nov 2025 11:02:45 -0800
Subject: [PATCH 13/15] [add-missing-group-label] add roles

---
 packages/perseus/src/widgets/radio/choice.new.tsx      |  4 ++--
 .../widgets/radio/multiple-choice-component.new.tsx    | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/perseus/src/widgets/radio/choice.new.tsx b/packages/perseus/src/widgets/radio/choice.new.tsx
index 9ccfac256bc..f3eb4a5531d 100644
--- a/packages/perseus/src/widgets/radio/choice.new.tsx
+++ b/packages/perseus/src/widgets/radio/choice.new.tsx
@@ -34,8 +34,8 @@ const Choice = (props: IndicatorProps) => {
             Therefore, WCAG 2.1.1 is still satisfied since functionality is
                 aligned with the input method.
          */
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-        <li className={classes} onClick={clickHandler}>
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-redundant-roles
+        <li className={classes} onClick={clickHandler} role="listitem">
             <Indicator
                 buttonRef={buttonRef}
                 checked={props.checked}
diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index 00e04573786..29ae7adea02 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -111,17 +111,19 @@ const MultipleChoiceComponent = ({
                 ref={containerRef}
                 style={cssVariableDeclaration}
             >
-                <div
+                <legend
                     id={legendId}
-                    className={styles.instructions}
                     aria-hidden="true"
+                    className={styles.instructions}
                 >
                     {instructions}
-                </div>
+                </legend>
                 <ScrollableView id={scrollId} overflowX="auto">
+                    {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
                     <ul
-                        className={choiceListClasses}
                         aria-labelledby={legendId}
+                        className={choiceListClasses}
+                        role="list"
                     >
                         <ChoiceListItems
                             choices={choices}

From ffdbed6ee4b25d33594a293a162c354c0ea84e14 Mon Sep 17 00:00:00 2001
From: Anakaren <anakaren@khanacademy.org>
Date: Thu, 20 Nov 2025 11:46:55 -0800
Subject: [PATCH 14/15] Update accessibility roles for screen readers

---
 .changeset/five-seas-walk.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/five-seas-walk.md b/.changeset/five-seas-walk.md
index 76d209705ce..3d97f3ed320 100644
--- a/.changeset/five-seas-walk.md
+++ b/.changeset/five-seas-walk.md
@@ -2,4 +2,4 @@
 "@khanacademy/perseus": patch
 ---
 
-fix - remove aria hidden in radio to enable group label to be read
+fix - add roles to ul and li items to make sure they are visible to screen readers

From 4858fafff2a2e4a28817e8e7fbc97e4543eb3681 Mon Sep 17 00:00:00 2001
From: Anakaren Rojas <anakaren@khanacademy.org>
Date: Tue, 25 Nov 2025 10:59:47 -0800
Subject: [PATCH 15/15] [add-missing-group-label] add comment explaining why
 redundant roles were added

---
 packages/perseus/src/widgets/radio/choice.new.tsx |  8 ++++++++
 .../radio/multiple-choice-component.new.tsx       | 15 +++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/packages/perseus/src/widgets/radio/choice.new.tsx b/packages/perseus/src/widgets/radio/choice.new.tsx
index f3eb4a5531d..46faaa7929f 100644
--- a/packages/perseus/src/widgets/radio/choice.new.tsx
+++ b/packages/perseus/src/widgets/radio/choice.new.tsx
@@ -13,6 +13,14 @@ export interface IndicatorProps {
     showCorrectness?: "correct" | "wrong";
     updateChecked: (isChecked: boolean) => void;
 }
+/*
+ * NOTE: Redundant ARIA roles for <li> element
+ *          Redundant roles were added to address the issue of different screen
+ *          readers handling <fieldset> and <legend> elements inconsistently.
+ *          `role="listitem"` attribute preserves list semantics, as some screen
+ *          readers may remove the implicit list role when `list-style: none` is
+ *          applied via CSS.
+ */
 
 const Choice = (props: IndicatorProps) => {
     const showCorrectness = props.showCorrectness;
diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
index 29ae7adea02..f52b2d59710 100644
--- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
+++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx
@@ -49,6 +49,21 @@ export interface MultipleChoiceComponentProps {
  *           button semantics for both versions of the widget,
  *           and implement additional ARIA attributes where needed.
  *
+ * NOTE: Redundant ARIA roles for <ul> element
+ *      Different screen readers handle <fieldset> and <legend> elements inconsistently,
+ *          causing unpredictable announcement behavior:
+ *              - NVDA + Chrome: Announces the legend when entering the fieldset,
+ *                  providing context for the choices
+ *              - VoiceOver + Safari: Often fails to announce the legend when users
+ *                  navigate directly to form controls, especially with certain
+ *                  navigation methods (arrow keys) or on mobile
+ *      This inconsistency means some users hear the critical instructions
+ *          ("Choose 1 answer", "Choose 3 answers", etc.) while others miss them
+ *          entirely, depending on their assistive technology and navigation method.
+ *          Redundant roles were added to address this issue.`role="list"` attribute
+ *          preserves list semantics, as some screen readers may remove the implicit
+ *          list role when `list-style: none` is applied via CSS.
+ *
  * Created as part of the Radio Revitalization Project (LEMS-2933).
  */
 const MultipleChoiceComponent = ({