fix(LEMS-3666): Adds roles to ul and li

.changeset/five-seas-walk.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+fix - add roles to ul and li items to make sure they are visible to screen readers

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}

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
                         aria-labelledby={legendId}
                         className={choiceListClasses}
+                        role="list"
                     >
                         <ChoiceListItems
                             choices={choices}