diff --git a/README.md b/README.md index 8f2de65..b51d107 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,8 @@ In addition to the attributes specifically listed below, [*question components*] **instruction** (string): This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component. +**ariaQuestion** (string): This will be read out by screen readers instead of reading the title, body & instruction fields when focusing on the group or radiogroup. + **\_attempts** (integer): This specifies the number of times a learner is allowed to submit an answer. The default is `1`. **\_shouldDisplayAttempts** (boolean): Determines whether or not the text set in **remainingAttemptText** and **remainingAttemptsText** will be displayed. These two attributes are part of the [core buttons](https://github.com/adaptlearning/adapt_framework/wiki/Core-Buttons) attribute group. The default is `false`. diff --git a/example.json b/example.json index 3065212..d3b743c 100644 --- a/example.json +++ b/example.json @@ -9,6 +9,7 @@ "displayTitle": "Slider type component", "body": "Question text here", "instruction": "Drag the slider to make your choice and select Submit.", + "ariaQuestion": "Question text specifically for screen readers.", "_attempts": 1, "_shouldDisplayAttempts": false, "_questionWeight": 1, diff --git a/properties.schema b/properties.schema index ccb4233..2cad1a7 100644 --- a/properties.schema +++ b/properties.schema @@ -77,6 +77,15 @@ "help": "This is the instruction text", "translatable": true }, + "ariaQuestion": { + "type": "string", + "required": false, + "default": "", + "inputType": "Text", + "validators": [], + "help": "This will be read out by screen readers instead of reading the 'Display title', 'Body' & 'Instruction' fields when focusing on the when focusing on the group or radiogroup. To be clear and concise, ensure the text encompasses only the question associated.", + "translatable": true + }, "_attempts": { "type": "number", "required": true, diff --git a/schema/component.schema.json b/schema/component.schema.json index 1891802..7a96421 100644 --- a/schema/component.schema.json +++ b/schema/component.schema.json @@ -34,6 +34,15 @@ "translatable": true } }, + "ariaQuestion": { + "type": "string", + "title": "ARIA question", + "description": "This will be read out by screen readers instead of reading the 'Display title', 'Body' & 'Instruction' fields when focusing on the options. To be clear and concise, ensure the text encompasses only the question associated.", + "default": "", + "_adapt": { + "translatable": true + } + }, "_attempts": { "type": "number", "title": "Allowed attempts", diff --git a/templates/slider.jsx b/templates/slider.jsx index abe9b4d..ddeab0c 100644 --- a/templates/slider.jsx +++ b/templates/slider.jsx @@ -3,11 +3,16 @@ import { classes, templates } from 'core/js/reactHelpers'; export default function Slider (props) { const { + _id, _globals, _shouldShowMarking, _isInteractionComplete, _isEnabled, _isCorrect, + displayTitle, + body, + instruction, + ariaQuestion, labelStart, labelEnd, _userAnswer, @@ -21,13 +26,17 @@ export default function Slider (props) { -
+
{(labelStart || labelEnd) &&