Fix: Add ariaQuestion to slider (fixes: 170) (adaptlearning#171)

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`.

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,

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,

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",

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) {
 
       <templates.header {...props} />
 
-      <div className={classes([
-        'component__widget slider__widget',
-        !_isEnabled && 'is-disabled',
-        _isInteractionComplete && 'is-complete is-submitted show-user-answer',
-        _shouldShowMarking && _isCorrect && 'is-correct',
-        _shouldShowMarking && !_isCorrect && 'is-incorrect'
-      ])}>
+      <div
+        className={classes([
+          'component__widget slider__widget',
+          !_isEnabled && 'is-disabled',
+          _isInteractionComplete && 'is-complete is-submitted show-user-answer',
+          _shouldShowMarking && _isCorrect && 'is-correct',
+          _shouldShowMarking && !_isCorrect && 'is-incorrect'
+        ])}
+        aria-labelledby={ariaQuestion ? null : (displayTitle || body || instruction) && `${_id}-header`}
+        aria-label={ariaQuestion || null}
+      >
 
         {(labelStart || labelEnd) &&
         <div className="slider__label-container js-slider-label-container">