Update: alternative item option text added (fixes #209)

README.md

@@ -69,6 +69,9 @@ guide the learner’s interaction with the component.
 
 >**text** (string): Text that comprises the multiple choice option.
 
+>**altText** (string): This will be read out by screen readers instead of reading `text`.
+Optional for providing alternative text, for example, to specify how a word should be pronounced.
+
 >**\_shouldBeSelected** (boolean): Determines whether the *item* must be selected for the answer to be correct. Value can be `true` or `false`. The value of **\_selectable** can be smaller, match or exceed the total number of **\_items** where **\_shouldBeSelected** is set to `true`.
 
 >**\_isPartlyCorrect** (boolean): Determines whether the *item* when selected marks the question as partly correct. Value can be `true` or `false`. Default is `false`.

example.json

@@ -23,6 +23,7 @@
         "_items": [
             {
                 "text": "This is option 1 (Correct)",
+                "altText": "",
                 "_shouldBeSelected": true,
                 "_isPartlyCorrect": false
             },

properties.schema

@@ -94,6 +94,15 @@
             "help": "This text will display as the answer text",
             "translatable": true
           },
+          "altText": {
+            "type": "string",
+            "required": false,
+            "default": "",
+            "inputType": "Text",
+            "validators": [],
+            "help": "This will be read out by screen readers instead of reading 'text'. Optional for providing alternative text, for example, to specify how a word should be pronounced.",
+            "translatable": true
+          },
           "_shouldBeSelected": {
             "type": "boolean",
             "required": true,

schema/component.schema.json

@@ -58,6 +58,14 @@
                   "translatable": true
                 }
               },
+              "altText": {
+                "type": "string",
+                "description": "This will be read out by screen readers instead of reading 'text'. Optional for providing alternative text, for example, to specify how a word should be pronounced.",
+                "default": "",
+                "_adapt": {
+                  "translatable": true
+                }
+              },
               "_shouldBeSelected": {
                 "type": "boolean",
                 "title": "Mark this option as correct",

templates/mcq.jsx

@@ -42,7 +42,7 @@ export default function Mcq(props) {
         aria-label={ariaQuestion || null}
       >
 
-        {props._items.map(({ text, _index, _isActive, _shouldBeSelected, _isHighlighted }, index) =>
+        {props._items.map(({ text, altText, _index, _isActive, _shouldBeSelected, _isHighlighted }, index) =>
 
           <div
             className={classes([
@@ -61,8 +61,8 @@ export default function Mcq(props) {
               disabled={!_isEnabled}
               checked={_isActive}
               aria-label={!_shouldShowMarking ?
-                a11y.normalize(text) :
-                `${_shouldBeSelected ? ariaLabels.correct : ariaLabels.incorrect}, ${_isActive ? ariaLabels.selectedAnswer : ariaLabels.unselectedAnswer}. ${a11y.normalize(text)}`}
+                a11y.normalize(altText || text) :
+                `${_shouldBeSelected ? ariaLabels.correct : ariaLabels.incorrect}, ${_isActive ? ariaLabels.selectedAnswer : ariaLabels.unselectedAnswer}. ${a11y.normalize(altText || text)}`}
               data-adapt-index={_index}
               onKeyPress={onKeyPress}
               onChange={onItemSelect}