Remove outline on non-keyboard focus. Fix stream focus order. (#72)

* Remove outline on non-keyboard focus. Fix focus order

* Remove tslint.json and specify Chromium path for karma tests

* Fix focus order: goes from down to up

* Fix version to use 4 digits

.gitignore

@@ -8,4 +8,7 @@ typings
 /coverage
 webpack.statistics.html
 webpack.statistics.dev.html
-webpack.statistics.prod.html
+webpack.statistics.prod.html
+
+# JetBrains
+.idea

karma.conf.ts

@@ -34,7 +34,7 @@ const testRecursivePath = "test/visualTest.ts";
 const srcOriginalRecursivePath = "src/**/*.ts";
 const coverageFolder = "coverage";
 
-require("playwright").chromium.executablePath();
+process.env.CHROME_BIN = require("playwright").chromium.executablePath();
 
 module.exports = (config) => {
     config.set({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-streamgraph",
-  "version": "3.0.4",
+  "version": "3.0.4.0",
   "description": "A stacked area chart with smooth interpolation. Often used to display values over time.",
   "repository": {
     "type": "git",

pbiviz.json

@@ -1,7 +1,7 @@
 {
   "visual": {
     "name": "StreamGraph",
-    "displayName": "Stream Graph 3.0.4",
+    "displayName": "Stream Graph 3.0.4.0",
     "guid": "StreamGraph1446659696222",
     "visualClassName": "StreamGraph",
     "version": "3.0.4.0",

src/visual.ts

@@ -1140,8 +1140,6 @@ export class StreamGraph implements IVisual {
 
         const isHighContrast: boolean = this.colorPalette.isHighContrast;
 
-        // Reverse the order of the series so that the last series is on top.
-        // stackedSeries = stackedSeries.reverse();
 
         const selection: Selection<BaseType, any, any, any> = this.dataPointsContainer
             .selectAll(StreamGraph.LayerSelector.selectorName)
@@ -1158,7 +1156,9 @@ export class StreamGraph implements IVisual {
             .style("fill", (d, index) => isHighContrast ? null : series[index].color)
             .style("stroke", (d, index) => isHighContrast ? series[index].color : null);
 
-        this.reverseOrderOfSeries(selectionMerged);
+        selectionMerged
+            .attr("tabindex", 0)
+            .attr("focusable", true);
 
         selectionMerged
             .transition()
@@ -1262,16 +1262,6 @@ export class StreamGraph implements IVisual {
         return selectionMerged        .attr("focusable", true);
     }
 
-    /**
-     *  Reverse the order of the series so that the focus goes from up to down.
-     */
-    private reverseOrderOfSeries(selectionMerged: Selection<BaseType, any, any, any>) {
-        const selectionMergedSize = selectionMerged.size();
-        selectionMerged
-            .attr("tabindex", (d, index) => selectionMergedSize > 1 ? selectionMergedSize - index : 0)
-            .attr("focusable", true);
-    }
-
     private localizeLegendOrientationDropdown(enableLegendCardSettings : EnableLegendCardSettings)
     {
         const strToBeLocalized : string = "Visual_LegendPosition_";

style/visual.less

@@ -60,9 +60,13 @@
     text-anchor: middle;
   }
 
-  path {
+  path.layer {
     &:focus {
       outline: none;
+    }
+
+    &:focus-visible {
+      outline: none;
       stroke: black;
       stroke-width: 3px;
     }