fix(multiple-choice): improve screen reader experience for answer choices by removing duplicate announcements and simplifying SR output PIE-148

Author: CarlaCostea

packages/multiple-choice/src/choice-input.jsx

@@ -296,11 +296,27 @@ export class ChoiceInput extends React.Component {
       }),
     };
 
+    const hasMathOrImage =
+      typeof label === 'string' &&
+      (label.includes('<math') ||
+        label.includes('\\(') ||
+        label.includes('\\[') ||
+        label.includes('<img') ||
+        label.includes('data-latex') ||
+        label.includes('data-raw') ||
+        label.includes('<mjx-container'));
+
+    const screenReaderLabel = displayKey ? (
+      <SrOnly id={this.descId}>
+        {hasMathOrImage ? `Pick the answer below, ${displayKey}` : displayKey}
+      </SrOnly>
+    ) : null;
+
     const choicelabel = (
       <>
         {displayKey && !isSelectionButtonBelow ? (
           <Row component="span">
-            {displayKey}.{'\u00A0'}
+            <span aria-hidden="true">{displayKey}.{'\u00A0'}</span>
             <PreviewPrompt className="prompt-label" prompt={label} tagName="span" />
           </Row>
         ) : (
@@ -309,12 +325,6 @@ export class ChoiceInput extends React.Component {
       </>
     );
 
-    const screenReaderLabel = (
-      <SrOnly id={this.descId}>
-        {choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below'}
-      </SrOnly>
-    );
-
     const tagProps = {
       disabled,
       checked,
@@ -324,28 +334,18 @@ export class ChoiceInput extends React.Component {
       id: this.choiceId,
       onChange: this.onToggleChoice,
       onKeyDown: this.handleKeyDown,
-      'aria-describedby': this.descId,
+      ...(screenReaderLabel ? { 'aria-describedby': this.descId } : {}),
     };
 
-    const hasMathOrImage =
-      typeof label === 'string' &&
-      (label.includes('<math') ||
-        label.includes('\\(') ||
-        label.includes('\\[') ||
-        label.includes('<img') ||
-        label.includes('data-latex') ||
-        label.includes('data-raw') ||
-        label.includes('<mjx-container'));
-
     const control = isSelectionButtonBelow ? (
       <BelowSelectionComponent>
-        {hasMathOrImage && screenReaderLabel}
+        {screenReaderLabel}
         <Tag {...tagProps} style={{ padding: 0 }} />
-        {displayKey ? `${displayKey}.` : ''}
+        <span aria-hidden="true">{displayKey ? `${displayKey}.` : ''}</span>
       </BelowSelectionComponent>
     ) : (
       <>
-        {hasMathOrImage && screenReaderLabel}
+        {screenReaderLabel}
         <Tag {...tagProps} slotProps={{ input: { ref: this.props.autoFocusRef } }} />
       </>
     );