From ccef83f4e43690a9109fe21f7a72c57c5a44567f Mon Sep 17 00:00:00 2001
From: JooYoung Seo <jseo1005@illinois.edu>
Date: Thu, 19 Sep 2024 22:05:51 -0500
Subject: [PATCH] refactor: add aria-label to maidr area (#558)

---
 .vscode/extensions.json    |  3 ++-
 galleries/bar_plot.html    |  1 -
 galleries/scatterplot.html |  1 -
 src/js/controls.js         | 12 ++++++++----
 src/js/init.js             | 16 +++++++---------
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index d578a543..9fa3d617 100644
--- a/.vscode/extensions.json
+++ b/.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"]
 }
diff --git a/galleries/bar_plot.html b/galleries/bar_plot.html
index 74d28626..34602085 100644
--- a/galleries/bar_plot.html
+++ b/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',
diff --git a/galleries/scatterplot.html b/galleries/scatterplot.html
index a51fb594..760750e8 100644
--- a/galleries/scatterplot.html
+++ b/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"]',
diff --git a/src/js/controls.js b/src/js/controls.js
index b54a364f..c83f6798 100644
--- a/src/js/controls.js
+++ b/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;
diff --git a/src/js/init.js b/src/js/init.js
index fde56f07..ac581df1 100644
--- a/src/js/init.js
+++ b/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.`);
+    }
   }
 }