Data-navigator: Enabling navigable chart elements with alt text

package.json

@@ -150,6 +150,7 @@
 	},
 	"dependencies": {
 		"d3-format": "^3.1.0",
+		"data-navigator": "^2.2.0",
 		"immer": ">= 9.0.0",
 		"uuid": ">= 9.0.0",
 		"vega-embed": ">= 6.27.0",

src/Chart.css

@@ -60,3 +60,43 @@ this removes transitions in the vega tooltip
 	width: auto;
 	height: 100%;
 }
+
+/* navigation elements */
+.dn-root {
+    position: relative;
+}
+.dn-wrapper {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+.dn-node {
+	pointer-events: none;
+    position: absolute;
+    padding: 0px;
+    margin: 0px;
+    overflow: visible;
+}
+.dn-node:focus, .dn-node:focus-visible {
+	outline: none;
+}
+.dn-node-svg {
+    position: absolute;
+    pointer-events: none;
+}
+.dn-node-path {
+    fill: none;
+    stroke: #000000;
+    stroke-width: 4px;
+    transform: translateY(2px);
+}
+.dn-entry-button {
+    position: absolute;
+	transform: translate(-9999px, -9999px);
+	height: 1px;
+}
+.dn-entry-button:focus {
+	transform: translate(0px, 0px);
+	height: auto;
+    top: -21px;
+}