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

README.md

@@ -73,6 +73,9 @@ guide the learner’s interaction with the component.
 
 >**text** (string): Optional text that is displayed as part of 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): Value can be `true` or `false`. Use `true` for items that must be selected for a correct answer. The value of **\_selectable** can be smaller, match or exceed the 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

@@ -24,6 +24,7 @@
         "_items": [
             {
                 "text": "This is option 1.",
+                "altText": "",
                 "_shouldBeSelected": true,
                 "_isPartlyCorrect": false,
                 "_graphic": {

properties.schema

@@ -134,6 +134,15 @@
             "help": "Text that will be displayed with the image",
             "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

@@ -103,6 +103,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/gmcq.jsx

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