Add keyboard navigation and custom styles for focused elements

microsoft · Nov 1, 2023 · 1a4fa31 · 1a4fa31
1 parent 8115b4e
commit 1a4fa31
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 34 deletions.
diff --git a/src/behavior.ts b/src/behavior.ts
@@ -62,20 +62,9 @@ export class StreamGraphBehavior implements IInteractiveBehavior {
 
         this.series = options.series;
 
-        this.selection.on('contextmenu', (event: PointerEvent, dataPoint : StackedStackValue) => {
-            this.selectionHandler.handleContextMenu(dataPoint ? this.series[dataPoint.index] : {"selected" : false}, 
-            {    
-                x: event.clientX,
-                y: event.clientY
-            });
-            event.preventDefault();
-        });
-
-        this.selection.on("click", (event : PointerEvent, dataPoint : StackedStackValue) => {
-            event && this.selectionHandler.handleSelection(
-                this.series[dataPoint.index],
-                event.ctrlKey);
-        });
+        this.bindContextMenuEvent();
+        this.bindClickEvents();
+        this.bindKeyboardEvents();
 
         this.clearCatcher.on("click", () => {
             selectionHandler.handleClearSelection();
@@ -104,4 +93,32 @@ export class StreamGraphBehavior implements IInteractiveBehavior {
                 anyHighlightedAtAll);
         });
     }
+
+    private bindContextMenuEvent() {
+        this.selection.on('contextmenu', (event: PointerEvent, dataPoint: StackedStackValue) => {
+            this.selectionHandler.handleContextMenu(dataPoint ? this.series[dataPoint.index] : { "selected": false },
+                {
+                    x: event.clientX,
+                    y: event.clientY
+                });
+            event.preventDefault();
+        });
+    }
+
+    private bindClickEvents() {
+        this.selection.on("click", (event: PointerEvent, dataPoint: StackedStackValue) => {
+            event && this.selectionHandler.handleSelection(
+                this.series[dataPoint.index],
+                event.ctrlKey);
+        });
+    }
+
+    private bindKeyboardEvents() {
+        this.selection.on("keydown", (event: KeyboardEvent, dataPoint: StackedStackValue) => {
+            if (event.code !== "Enter" && event.code !== "Space") {
+                return;
+            }
+            this.selectionHandler.handleSelection(this.series[dataPoint.index], event.ctrlKey || event.metaKey || event.shiftKey);
+        });
+    }
 }
diff --git a/src/visual.ts b/src/visual.ts
@@ -1153,7 +1153,9 @@ export class StreamGraph implements IVisual {
             .classed(StreamGraph.LayerSelector.className, true)
             .style("opacity", DefaultOpacity)
             .style("fill", (d, index) => isHighContrast ? null : series[index].color)
-            .style("stroke", (d, index) => isHighContrast ? series[index].color : null);
+            .style("stroke", (d, index) => isHighContrast ? series[index].color : null)
+            .attr("tabindex", 0)
+            .attr("focusable", true);
 
         selectionMerged
             .transition()

diff --git a/style/visual.less b/style/visual.less
@@ -28,34 +28,46 @@
  * Imports external styles.
  * We compile it as a less file in order to wrap the external CSS rules.
  */
-@import (less) "/node_modules/powerbi-visuals-utils-interactivityutils/lib/index.css";
+@import (less)
+  "/node_modules/powerbi-visuals-utils-interactivityutils/lib/index.css";
 
 .streamGraph {
-    @streamGraphFontSize: 11px;
+  @streamGraphFontSize: 11px;
 
-    font-family: helvetica, arial, sans-serif;
-    font-size: @streamGraphFontSize;
+  font-family: helvetica, arial, sans-serif;
+  font-size: @streamGraphFontSize;
 
-    position: absolute;
+  position: absolute;
 
-    .axis {
-        path,
-        line {
-            fill: none !important;
-            shape-rendering: auto;
-        }
+  .axis {
+    path,
+    line {
+      fill: none !important;
+      shape-rendering: auto;
+    }
 
-        text {
-            stroke: transparent !important;
-        }
+    text {
+      stroke: transparent !important;
     }
+  }
+
+  .layer {
+    fill: transparent;
+  }
+
+  .xAxisLabel,
+  .yAxisLabel {
+    text-anchor: middle;
+  }
 
-    .layer {
-        fill: transparent;
+  path {
+    &:focus {
+      outline: none;
     }
 
-    .xAxisLabel,
-    .yAxisLabel {
-        text-anchor: middle;
+    &:focus-visible {
+      stroke: black;
+      stroke-width: 2px;
     }
+  }
 }