Fix: ariaScaleName property added (#192)

...read out by screen readers to give context to which the scale is a measurement of.

README.md

@@ -44,6 +44,8 @@ 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.
 
+**ariaScaleName** (string): This will be read out by screen readers when focusing on the scale input (slider handle). An appropriate name should give context to which the scale is a measurement of.
+
 **\_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

@@ -10,6 +10,7 @@
         "body": "Question text here",
         "instruction": "Drag the slider to make your choice and select Submit.",
         "ariaQuestion": "Question text specifically for screen readers.",
+        "ariaScaleName": "Scale name specifically for screen readers.",
         "_attempts": 1,
         "_shouldDisplayAttempts": false,
         "_questionWeight": 1,

properties.schema

@@ -86,6 +86,15 @@
       "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
     },
+    "ariaScaleName": {
+      "type": "string",
+      "required": true,
+      "default": "",
+      "inputType": "Text",
+      "validators": [],
+      "help": "This will be read out by screen readers when focusing on the scale input (slider handle). An appropriate name should give context to which the scale is a measurement of.",
+      "translatable": true
+    },
     "_attempts": {
       "type": "number",
       "required": true,

schema/component.schema.json

@@ -8,6 +8,7 @@
     },
     "with": {
       "required": [
+        "ariaScaleName",
         "_attempts",
         "_scaleStart",
         "_scaleEnd"
@@ -43,6 +44,15 @@
             "translatable": true
           }
         },
+        "ariaScaleName": {
+          "type": "string",
+          "title": "ARIA scale name",
+          "description": "This will be read out by screen readers when focusing on the scale input (slider handle). An appropriate name should give context to which the scale is a measurement of.",
+          "default": "",
+          "_adapt": {
+            "translatable": true
+          }
+        },
         "_attempts": {
           "type": "number",
           "title": "Allowed attempts",

templates/slider.jsx

@@ -14,6 +14,7 @@ export default function Slider (props) {
     body,
     instruction,
     ariaQuestion,
+    ariaScaleName,
     labelStart,
     labelEnd,
     _selectedItem,
@@ -176,6 +177,7 @@ export default function Slider (props) {
           <input className='slider__item-input js-slider-item-input'
             type='range'
             role='slider'
+            aria-label={ariaScaleName}
             value={selectedValue}
             min={_scaleStart}
             max={_scaleEnd}