refactor: add aria-label to maidr area (#558)

.vscode/extensions.json

@@ -21,7 +21,8 @@
     // "codium.codium",
     "ms-vscode.vscode-speech",
     "vivaxy.vscode-conventional-commits",
-    "joshbolduc.commitlint"
+    "joshbolduc.commitlint",
+    "ms-vscode.live-server"
   ],
   "unwantedRecommendations": ["ms-vscode.js-debug"]
 }

galleries/bar_plot.html

@@ -1134,7 +1134,6 @@
         id: 'barplot1',
         title: 'The Number of Diamonds by Cut.',
         selector: 'g[id^="geom_rect"] > rect',
-        name: 'test test test',
         axes: {
           x: {
             label: 'Cut',

galleries/scatterplot.html

@@ -4594,7 +4594,6 @@
         type: ['point', 'smooth'],
         id: 'scatter1',
         title: 'Highway Mileage by Engine Displacement.',
-        name: 'Tutorial 4: Scatterplot',
         selector: [
           'g[id^="geom_point"] > use',
           'g[id^="geom_smooth.gTree"] > g[id^="GRID.polyline"] > polyline[id^="GRID.polyline"]',

src/js/controls.js

@@ -2392,14 +2392,18 @@ class Control {
       if (position.x > xMax) {
         position.x = xMax;
         didLockHappen = true;
-        constants.brailleInput.selectionStart =
-          constants.brailleInput.value.length;
+        if ( constants.brailleMode != 'off' ) {
+          constants.brailleInput.selectionStart =
+            constants.brailleInput.value.length;
+        }
       }
       if (position.y > yMax) {
         position.y = yMax;
         didLockHappen = true;
-        constants.brailleInput.selectionStart =
-          constants.brailleInput.value.length;
+        if ( constants.brailleMode != 'off' ) {
+          constants.brailleInput.selectionStart =
+            constants.brailleInput.value.length;
+        }
       }
     }
     return didLockHappen;

src/js/init.js

@@ -112,15 +112,13 @@ function InitMaidr(thisMaidr) {
     // actually do eventlisteners for all events
     this.SetEvents();
 
-    // once everything is set up, announce the chart name (or title as a backup) to the user
-    setTimeout(function () {
-      // this is hacky, but we delay just a tick so that the chart has time to load
-      if ('name' in singleMaidr) {
-        display.announceText(singleMaidr.name);
-      } else if ('title' in singleMaidr) {
-        display.announceText(singleMaidr.title);
-      }
-    }, 200);
+    // once everything is set up, expose the chart name (or title as a backup) to the user
+    if ('name' in singleMaidr) {
+      constants.chart.setAttribute('aria-label', singleMaidr.name);
+    } else if ('title' in singleMaidr || 'labels' in singleMaidr && 'title' in singleMaidr.labels) {
+      let title = 'title' in singleMaidr ? singleMaidr.title : singleMaidr.labels.title;
+      constants.chart.setAttribute('aria-label', `${singleMaidr.type} plot of ${title}. Use Arrows to navigate data points. Press BTSR to toggle braille, text, sonification, and review mode respectively. Use H key for help.`);
+    }
   }
 }