From f7a13ecf8860d4751d3a6204a0a8075d13406eaa Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 25 Oct 2023 14:39:25 +0100 Subject: [PATCH 1/6] add item altText property --- templates/gmcq.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/gmcq.jsx b/templates/gmcq.jsx index 7d6d1cb..e6480f9 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) =>
Date: Wed, 25 Oct 2023 14:40:51 +0100 Subject: [PATCH 2/6] add altText property to schema --- properties.schema | 9 +++++++++ 1 file changed, 9 insertions(+) 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, From 1b4734a72a77779105744941ac98d3ee77ad3798 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 25 Oct 2023 14:41:59 +0100 Subject: [PATCH 3/6] add altText property 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 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", From 66bbbbedd4b26f7d249ce8fe1081cde4978e4d68 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 25 Oct 2023 14:43:02 +0100 Subject: [PATCH 4/6] add altText example --- example.json | 1 + 1 file changed, 1 insertion(+) 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": { From 1dd16ee658186daab1a04b665a9ab107aedaf744 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 25 Oct 2023 14:44:25 +0100 Subject: [PATCH 5/6] Update README --- README.md | 3 +++ 1 file changed, 3 insertions(+) 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`. From 7a563757797b2d1c5d41d456d11a2187003a250e Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 26 Oct 2023 09:51:10 +0100 Subject: [PATCH 6/6] Normalise altText Co-authored-by: Oliver Foster --- templates/gmcq.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/gmcq.jsx b/templates/gmcq.jsx index e6480f9..ce91319 100644 --- a/templates/gmcq.jsx +++ b/templates/gmcq.jsx @@ -69,8 +69,8 @@ export default function Gmcq(props) { disabled={!_isEnabled} checked={_isActive} aria-label={!_shouldShowMarking ? - `${altText || a11y.normalize(text)} ${_graphic?.alt || ''}` : - `${_shouldBeSelected ? ariaLabels.correct : ariaLabels.incorrect}, ${_isActive ? ariaLabels.selectedAnswer : ariaLabels.unselectedAnswer}. ${altText || 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}