From 5102451b0e39780c0150cc2d62827560930b2a3f Mon Sep 17 00:00:00 2001
From: kirsty-hames <kirsty-hames@users.noreply.github.com>
Date: Thu, 26 Oct 2023 10:02:16 +0100
Subject: [PATCH] Update: alternative item option text added (fixes #172) 
 (#173)

* add item altText property

* add altText property to schema

* add altText property to schema

* add altText example

* Update README

* Normalise altText

Co-authored-by: Oliver Foster <oliver.foster@kineo.com>

---------

Co-authored-by: Oliver Foster <oliver.foster@kineo.com>
---
 README.md                    | 3 +++
 example.json                 | 1 +
 properties.schema            | 9 +++++++++
 schema/component.schema.json | 8 ++++++++
 templates/gmcq.jsx           | 6 +++---
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 5f0888f..e55db30 100644
--- a/README.md
+++ b/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`.
diff --git a/example.json b/example.json
index b26b54f..9a5f75a 100644
--- a/example.json
+++ b/example.json
@@ -24,6 +24,7 @@
         "_items": [
             {
                 "text": "This is option 1.",
+                "altText": "",
                 "_shouldBeSelected": true,
                 "_isPartlyCorrect": false,
                 "_graphic": {
diff --git a/properties.schema b/properties.schema
index 70edf98..e0c4dbf 100644
--- a/properties.schema
+++ b/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,
diff --git a/schema/component.schema.json b/schema/component.schema.json
index 16f06d1..39b2073 100644
--- a/schema/component.schema.json
+++ b/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",
diff --git a/templates/gmcq.jsx b/templates/gmcq.jsx
index 7d6d1cb..ce91319 100644
--- a/templates/gmcq.jsx
+++ b/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 || ''}`}
+                `${a11y.normalize(altText || text)} ${_graphic?.alt || ''}` :
+                `${_shouldBeSelected ? ariaLabels.correct : ariaLabels.incorrect}, ${_isActive ? ariaLabels.selectedAnswer : ariaLabels.unselectedAnswer}. ${a11y.normalize(altText || text)} ${_graphic?.alt || ''}`}
               data-adapt-index={_index}
               onKeyPress={onKeyPress}
               onChange={onItemSelect}