Fix: add scale context to slider start and end labels (fixes #82) (#93)

adaptlearning · Apr 3, 2023 · d40a881 · d40a881
1 parent 0fde822
commit d40a881
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/properties.schema b/properties.schema
@@ -21,19 +21,23 @@
       "translatable": true
     },
     "labelStart": {
-      "type": "number",
-      "required": true,
-      "default": "1",
-      "inputType": "Number",
+      "type": "string",
+      "required": false,
+      "default": "Start of the scale",
+      "title": "Scale Label - start aria label",
+      "inputType": "Text",
       "validators": [],
+      "help": "Aria label for the start of the slider scale",
       "translatable": true
     },
     "labelEnd": {
-      "type": "number",
-      "required": true,
-      "default": "1",
-      "inputType": "Number",
+      "type": "string",
+      "required": false,
+      "default": "End of the scale",
+      "title": "Scale Label - end aria label",
+      "inputType": "Text",
       "validators": [],
+      "help": "Aria label for the end of the slider scale",
       "translatable": true
     }
   },

diff --git a/schema/course.schema.json b/schema/course.schema.json
@@ -29,6 +29,22 @@
                       "_adapt": {
                         "translatable": true
                       }
+                    },
+                    "labelStart": {
+                      "type": "string",
+                      "title": "Scale start ARIA label",
+                      "default": "Start of the scale",
+                      "_adapt": {
+                        "translatable": true
+                      }
+                    },
+                    "labelEnd": {
+                      "type": "string",
+                      "title": "Scale end ARIA label",
+                      "default": "End of the scale",
+                      "_adapt": {
+                        "translatable": true
+                      }
                     }
                   }
                 }

diff --git a/templates/confidenceSlider.jsx b/templates/confidenceSlider.jsx
@@ -73,16 +73,18 @@ export default function ConfidenceSlider (props) {
         <div className="slider__label-container js-slider-label-container">
 
           {labelStart &&
-          <div className="slider__label-start" aria-label={_globals._components._confidenceSlider.labelStart}>
+          <div className="slider__label-start">
             <div className="slider__label-start-inner">
+              <span className="aria-label">{_globals._components._confidenceSlider.labelStart} {_scaleStart}</span>
               {labelStart}
             </div>
           </div>
           }
 
           {labelEnd &&
-          <div className="slider__label-end" aria-label={_globals._components._confidenceSlider.labelEnd}>
+          <div className="slider__label-end">
             <div className="slider__label-end-inner">
+              <span className="aria-label">{_globals._components._confidenceSlider.labelEnd} {_scaleEnd}</span>
               {labelEnd}
             </div>
           </div>