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`. 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 }, 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, 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", diff --git a/templates/mcq.jsx b/templates/mcq.jsx index a2dc4b3..7700cf5 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) =>