From 5a1c21b861f86a81cf9825a30d09cb386dee2f49 Mon Sep 17 00:00:00 2001
From: Andrew Pikul <ajpikul@gmail.com>
Date: Tue, 27 May 2025 13:59:53 -0400
Subject: [PATCH 1/6] Change float to grid for aria

---
 devtools/test_dashboard/index.html | 4 ++--
 devtools/test_dashboard/style.css  | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/devtools/test_dashboard/index.html b/devtools/test_dashboard/index.html
index c2fc16aa4c5..b58b9b9bc24 100644
--- a/devtools/test_dashboard/index.html
+++ b/devtools/test_dashboard/index.html
@@ -10,9 +10,9 @@
   <header>
     <img src="http://images.plot.ly/logo/plotlyjs-logo@2x.png" onClick="Tabs.reload();" />
     <span id="reload-time"></span>
-
-    <input id="mocks-search" type="text" placeholder="mocks search" />
+    <div></div> <!-- spacer -->
     <input id="css-transform" type="text" placeholder="css transform" />
+    <input id="mocks-search" type="text" placeholder="mocks search" />
   </header>
 
   <section id="mocks-list"></section>
diff --git a/devtools/test_dashboard/style.css b/devtools/test_dashboard/style.css
index bea18056312..4eb2a9f00ef 100644
--- a/devtools/test_dashboard/style.css
+++ b/devtools/test_dashboard/style.css
@@ -6,6 +6,10 @@ html, body{
 }
 header{
   position: fixed;
+  display: grid;
+  grid-template-columns: auto auto 1fr auto auto;
+  align-items: center;
+  gap: 0.5em;
   top: 0;
   height: 40px;
   width: 100%;
@@ -19,7 +23,6 @@ header img{
   vertical-align: top;
 }
 header input{
-  float: right;
   background-color: none;
   border: none;
   border-bottom: 1px solid #ddd;

From d744ef5a44c10d8e15b1481bdbf652022f658e7b Mon Sep 17 00:00:00 2001
From: Andrew Pikul <ajpikul@gmail.com>
Date: Tue, 27 May 2025 14:00:10 -0400
Subject: [PATCH 2/6] Fix tabindex

---
 devtools/test_dashboard/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/devtools/test_dashboard/index.html b/devtools/test_dashboard/index.html
index b58b9b9bc24..54c726f94e1 100644
--- a/devtools/test_dashboard/index.html
+++ b/devtools/test_dashboard/index.html
@@ -16,8 +16,8 @@
   </header>
 
   <section id="mocks-list"></section>
-  <div id="plots">
-    <div id="graph"></div>
+  <div id="plots" tabindex="-1"> <!-- Don't focus the container -->
+    <div id="graph" tabindex="0"></div> <!-- focus the graph -->
   </div>
   <div id="snapshot"></div>
 

From 448d24a96aab60ab1be3becefc8834b4f20d9457 Mon Sep 17 00:00:00 2001
From: Andrew Pikul <ajpikul@gmail.com>
Date: Tue, 27 May 2025 14:00:41 -0400
Subject: [PATCH 3/6] Add notification for inspecting focus

---
 devtools/test_dashboard/index.html | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/devtools/test_dashboard/index.html b/devtools/test_dashboard/index.html
index 54c726f94e1..fcb0a0952a2 100644
--- a/devtools/test_dashboard/index.html
+++ b/devtools/test_dashboard/index.html
@@ -20,9 +20,26 @@
     <div id="graph" tabindex="0"></div> <!-- focus the graph -->
   </div>
   <div id="snapshot"></div>
-
+  <div id="focus-display"
+       aria-hidden="true"
+       tabindex="-1"
+       style="pointer-events: none; margin: .5em; padding: .5em; border: 1px solid gray">
+    Focused element will appear here. Helpful for debugging &lt;tab&gt; behavior.
+  </div>
   <script src="../../node_modules/@plotly/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
   <script charset="utf-8" id="source" src="../../build/plotly.js"></script>
   <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
+  <script>
+  const display = document.getElementById('focus-display');
+  document.addEventListener('focusin', () => {
+    const el = document.activeElement;
+    const tag = el.tagName.toLowerCase();
+    const id = el.id ? `#${el.id}` : '';
+    const cls = el.className ? `.${el.className.replace(/\s+/g, '.')}` : '';
+    const type = el.type ? ` type="${el.type}"` : '';
+    display.textContent = `Focused: <${tag}${id}${cls}${type}>`;
+  });
+</script>
+
 </body>
 </html>

From bb3cfbfc85f7a9f05da74122e5c1afe964b913d0 Mon Sep 17 00:00:00 2001
From: Andrew Pikul <ajpikul@gmail.com>
Date: Tue, 27 May 2025 14:01:51 -0400
Subject: [PATCH 4/6] Add new mock for testing sound.

---
 test/image/mocks/line_scatter_4y.json | 63 +++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 test/image/mocks/line_scatter_4y.json

diff --git a/test/image/mocks/line_scatter_4y.json b/test/image/mocks/line_scatter_4y.json
new file mode 100644
index 00000000000..fd294107598
--- /dev/null
+++ b/test/image/mocks/line_scatter_4y.json
@@ -0,0 +1,63 @@
+{
+ "data": [
+  {
+   "name":"x1 on y1 1",
+   "x": [1, 2, 3, 4],
+   "y": [10, 15, 13, 17],
+   "mode": "markers",
+   "type": "scatter",
+   "marker": {
+    "opacity": 0.5
+   }
+  },
+  {
+   "name":"x1 on y1 2",
+   "x": [2, 3, 4, 5],
+   "y": [16, 5, 11, 9],
+   "mode": "lines",
+   "type": "scatter",
+   "opacity": 0.5
+  },
+  {
+   "name":"x1 on y2 1",
+   "x": [1, 2, 3, 4],
+   "y": [12, 9, 15, 12],
+   "mode": "lines+markers",
+   "type": "scatter",
+   "opacity": 0.707,
+   "marker": {
+    "opacity": 0.707
+   },
+   "yaxis": "y2"
+  },
+  {
+   "name":"x1 on y2 2",
+   "x": [1, 2, 3],
+   "y": [1, 2, 3],
+   "opacity": 0.2,
+   "line": { "width": 10, "color": "red" },
+   "marker": { "size": 20, "color": "blue" },
+   "yaxis": "y2"
+  }
+ ],
+  "layout": {
+    "showlegend": false,
+    "yaxis": {
+      "anchor": "x",
+      "title": {
+        "text": "<b>Primary</b> yaxis title"
+      }
+    },
+    "yaxis2": {
+      "anchor": "x",
+      "overlaying": "y",
+      "side": "right",
+      "title": {
+        "text": "<b>Secondary</b> yaxis title"
+      }
+    },
+    "title": {
+      "text": "4 Y Axis Example"
+    }
+  }
+}

From 6c11fb87ee8a40de498bb2d56acbe8c1076cc39d Mon Sep 17 00:00:00 2001
From: Andrew Pikul <ajpikul@gmail.com>
Date: Tue, 27 May 2025 14:10:40 -0400
Subject: [PATCH 5/6] Add 3rd and 4th axis

---
 test/image/mocks/line_scatter_4y.json | 49 +++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/test/image/mocks/line_scatter_4y.json b/test/image/mocks/line_scatter_4y.json
index fd294107598..ad5aa5780a5 100644
--- a/test/image/mocks/line_scatter_4y.json
+++ b/test/image/mocks/line_scatter_4y.json
@@ -38,6 +38,35 @@
    "line": { "width": 10, "color": "red" },
    "marker": { "size": 20, "color": "blue" },
    "yaxis": "y2"
+  },
+  {
+   "name":"x1 on y3 1",
+   "x": [1, 2, 3, 4],
+   "y": [4, 5, 6, 7],
+   "type": "scatter",
+   "yaxis": "y3"
+   }
+  },
+  {
+   "name":"x1 on y3 2",
+   "x": [2, 3, 4, 5],
+   "y": [8, 9, 10, 11],
+   "type": "scatter",
+   "yaxis": "y3"
+  },
+  {
+   "name":"x1 on y4 1",
+   "x": [1, 2, 3, 4],
+   "y": [12, 9, 15, 12],
+   "type": "scatter",
+   "yaxis": "y4"
+  },
+  {
+   "name":"x1 on y4 2",
+   "x": [1, 2, 3],
+   "y": [11, 12, 13],
+   "type": "scatter",
+   "yaxis": "y4"
   }
  ],
   "layout": {
@@ -45,7 +74,7 @@
     "yaxis": {
       "anchor": "x",
       "title": {
-        "text": "<b>Primary</b> yaxis title"
+        "text": "<b>First</b> yaxis title"
       }
     },
     "yaxis2": {
@@ -53,7 +82,23 @@
       "overlaying": "y",
       "side": "right",
       "title": {
-        "text": "<b>Secondary</b> yaxis title"
+        "text": "<b>Second</b> yaxis title"
+      }
+    },
+    "yaxis3": {
+      "anchor": "x",
+      "overlaying": "y",
+      "side": "right",
+      "title": {
+        "text": "<b>Third</b> yaxis title"
+      }
+    },
+    "yaxis4": {
+      "anchor": "x",
+      "overlaying": "y",
+      "side": "left",
+      "title": {
+        "text": "<b>Fourth</b> yaxis title"
       }
     },
     "title": {

From b12bafcc49b487b78d8b250da338e46bdfd0a747 Mon Sep 17 00:00:00 2001
From: Andrew Pikul <ajpikul@gmail.com>
Date: Tue, 27 May 2025 17:47:22 -0400
Subject: [PATCH 6/6] Fix axes 3, 4

---
 test/image/mocks/line_scatter_4y.json | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/test/image/mocks/line_scatter_4y.json b/test/image/mocks/line_scatter_4y.json
index ad5aa5780a5..d3b8bad2f6e 100644
--- a/test/image/mocks/line_scatter_4y.json
+++ b/test/image/mocks/line_scatter_4y.json
@@ -45,7 +45,6 @@
    "y": [4, 5, 6, 7],
    "type": "scatter",
    "yaxis": "y3"
-   }
   },
   {
    "name":"x1 on y3 2",
@@ -86,20 +85,22 @@
       }
     },
     "yaxis3": {
-      "anchor": "x",
+      "anchor": "free",
       "overlaying": "y",
       "side": "right",
       "title": {
         "text": "<b>Third</b> yaxis title"
-      }
+      },
+      "position": 0.98
     },
     "yaxis4": {
-      "anchor": "x",
+      "anchor": "free",
       "overlaying": "y",
       "side": "left",
       "title": {
         "text": "<b>Fourth</b> yaxis title"
-      }
+      },
+      "position": 0.02
     },
     "title": {
       "text": "4 Y Axis Example"