From 03ff787889730b95fdf3ad927413fd3ff033082e Mon Sep 17 00:00:00 2001 From: adiletelf <74559101+adiletelf@users.noreply.github.com> Date: Thu, 7 Dec 2023 18:40:52 +0600 Subject: [PATCH] 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 | 5 ++- karma.conf.ts | 2 +- package-lock.json | 4 +-- package.json | 2 +- pbiviz.json | 2 +- src/visual.ts | 16 ++-------- style/visual.less | 6 +++- tslint.json | 81 ----------------------------------------------- 8 files changed, 17 insertions(+), 101 deletions(-) delete mode 100644 tslint.json diff --git a/.gitignore b/.gitignore index e836ade..93bde54 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,7 @@ typings /coverage webpack.statistics.html webpack.statistics.dev.html -webpack.statistics.prod.html \ No newline at end of file +webpack.statistics.prod.html + +# JetBrains +.idea \ No newline at end of file diff --git a/karma.conf.ts b/karma.conf.ts index 9686e8c..17b4055 100644 --- a/karma.conf.ts +++ b/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({ diff --git a/package-lock.json b/package-lock.json index 009b95f..2b359d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "powerbi-visuals-streamgraph", - "version": "3.0.4", + "version": "3.0.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "powerbi-visuals-streamgraph", - "version": "3.0.4", + "version": "3.0.4.0", "license": "MIT", "dependencies": { "d3-array": "^3.2.4", diff --git a/package.json b/package.json index 471fb93..20049cc 100644 --- a/package.json +++ b/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", diff --git a/pbiviz.json b/pbiviz.json index c48b569..90a547d 100644 --- a/pbiviz.json +++ b/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", diff --git a/src/visual.ts b/src/visual.ts index 637c12b..9efeeaa 100644 --- a/src/visual.ts +++ b/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 = 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) { - 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_"; diff --git a/style/visual.less b/style/visual.less index 24f9d6a..22d6deb 100644 --- a/style/visual.less +++ b/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; } diff --git a/tslint.json b/tslint.json deleted file mode 100644 index 77a1e89..0000000 --- a/tslint.json +++ /dev/null @@ -1,81 +0,0 @@ -{ - "rules": { - "insecure-random": true, - "no-banned-terms": true, - "no-delete-expression": true, - "no-disable-auto-sanitization": true, - "no-document-domain": true, - "no-document-write": true, - "no-exec-script": true, - "no-function-constructor-with-string-args": true, - "no-http-string": [ - true - ], - "no-inner-html": true, - "no-octal-literal": true, - "no-reserved-keywords": true, - "no-string-based-set-immediate": true, - "no-string-based-set-interval": true, - "no-string-based-set-timeout": true, - "non-literal-require": true, - "possible-timing-attack": true, - "react-anchor-blank-noopener": true, - "react-iframe-missing-sandbox": true, - "react-no-dangerous-html": true, - "no-eval": true, - "class-name": true, - "comment-format": [ - true, - "check-space" - ], - "indent": [ - true, - "spaces" - ], - "no-duplicate-variable": true, - "no-internal-module": false, - "no-trailing-whitespace": true, - "no-unsafe-finally": true, - "no-var-keyword": true, - "no-unused-expression": true, - "one-line": [ - true, - "check-open-brace", - "check-whitespace" - ], - "quotemark": [ - true, - "double" - ], - "semicolon": [ - true, - "always" - ], - "triple-equals": [ - true, - "allow-null-check" - ], - "typedef-whitespace": [ - true, - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - } - ], - "variable-name": [ - true, - "ban-keywords" - ], - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type" - ] - } -}