From 04055d81986b7a9f519f0ea82457be1e344cfd49 Mon Sep 17 00:00:00 2001
From: JooYoung Seo <jseo1005@illinois.edu>
Date: Fri, 20 Sep 2024 17:03:15 -0500
Subject: [PATCH] refactor: make instruction message audible and visible for
 BLV and sighted users when focused in the maidr plot area (#562)

---
 galleries/bar_plot.html    |  1 -
 galleries/scatterplot.html |  1 -
 src/js/init.js             | 23 ++++++++++++++++++++---
 3 files changed, 20 insertions(+), 5 deletions(-)

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/init.js b/src/js/init.js
index fde56f07..ba16f029 100644
--- a/src/js/init.js
+++ b/src/js/init.js
@@ -117,10 +117,27 @@ function InitMaidr(thisMaidr) {
       // 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);
+      } else if ('title' in singleMaidr || 'labels' in singleMaidr && 'title' in singleMaidr.labels) {
+        let title = 'title' in singleMaidr ? singleMaidr.title : singleMaidr.labels.title;
+
+        // Determine whether type is multiple or single. If multiple, put commas and "and" in between. If single, just put the type.
+        let plotTypeString = Array.isArray(singleMaidr.type) 
+          ? singleMaidr.type.slice(0, -1).join(', ') + ' and ' + singleMaidr.type.slice(-1)
+          : singleMaidr.type;
+
+        // Prepare the instruction text for multi-layered plot
+        let multiLayerInstruction = 'This is a multi-layered plot. Use PageUp and PageDown to switch between layers.';
+
+        // Check if plotTypeString has multiple types
+        let isMultiLayered = Array.isArray(singleMaidr.type) && singleMaidr.type.length > 1;
+
+        // Construct the final announceText string
+        let announceText = `${plotTypeString} plot of ${title}: Use Arrows to navigate data points. ${isMultiLayered ? multiLayerInstruction : ' '}Toggle B for Braille, T for Text, S for Sonification, and R for Review mode. Use H for Help.`;
+
+        // Display the announcement text
+        display.announceText(announceText);
       }
-    }, 200);
+    }, 100);
   }
 }