From b3192915736b49b96e882870a203d53c4b5b978b Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 24 Oct 2023 14:45:52 +0100 Subject: [PATCH 1/6] add item altText property --- templates/mcq.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/mcq.jsx b/templates/mcq.jsx index a2dc4b3..f5543f1 100644 --- a/templates/mcq.jsx +++ b/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) =>
Date: Tue, 24 Oct 2023 14:48:41 +0100 Subject: [PATCH 2/6] add altText to schema --- schema/component.schema.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/schema/component.schema.json b/schema/component.schema.json index 19fe271..be09537 100644 --- a/schema/component.schema.json +++ b/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", From f925237a6ce7bf60b8dfa64166fd575924dbe1d3 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 24 Oct 2023 14:49:33 +0100 Subject: [PATCH 3/6] add altText example --- example.json | 1 + 1 file changed, 1 insertion(+) diff --git a/example.json b/example.json index 3b30e91..873c643 100644 --- a/example.json +++ b/example.json @@ -23,6 +23,7 @@ "_items": [ { "text": "This is option 1 (Correct)", + "altText": "", "_shouldBeSelected": true, "_isPartlyCorrect": false }, From adf5334c6f9cba80493fbc6658a1b7c79b7ded47 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 24 Oct 2023 14:51:15 +0100 Subject: [PATCH 4/6] add altText to schema --- properties.schema | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/properties.schema b/properties.schema index 5ccf80b..d234019 100644 --- a/properties.schema +++ b/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, From d7fa55c50337de36144704326a74aa2418ac7f8c Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 24 Oct 2023 14:59:17 +0100 Subject: [PATCH 5/6] update README --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 4acd582..31bd59c 100644 --- a/README.md +++ b/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`. From fa5af8329769ca0b0fd0005b4d1e6ac44c742b5b Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 26 Oct 2023 09:49:41 +0100 Subject: [PATCH 6/6] Normalise altText Co-authored-by: Oliver Foster --- templates/mcq.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/mcq.jsx b/templates/mcq.jsx index f5543f1..7700cf5 100644 --- a/templates/mcq.jsx +++ b/templates/mcq.jsx @@ -61,8 +61,8 @@ export default function Mcq(props) { disabled={!_isEnabled} checked={_isActive} aria-label={!_shouldShowMarking ? - altText || a11y.normalize(text) : - `${_shouldBeSelected ? ariaLabels.correct : ariaLabels.incorrect}, ${_isActive ? ariaLabels.selectedAnswer : ariaLabels.unselectedAnswer}. ${altText} || ${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}