Keyboard navigation + aria labels (#123)

* Add keyboard navigation * Increment visual version * Add aria-labels * Add tests for keyboard navigation * Fix npm audit --------- Co-authored-by: Iuliia Kulagina <v-ikulagina@microsoft.com>
microsoft · Jun 17, 2024 · f8fa7db · f8fa7db
1 parent 3e94316
commit f8fa7db
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 2.3.1.0
+* Added keyboard navigation
+
 ## 2.3.0.0
 * API v5.9.0
 * Use selectionManager for interactive behavior

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-wordcloud",
-  "version": "2.3.0.0",
+  "version": "2.3.1.0",
   "description": "Word Cloud is a visual representation of word frequency and value. Use it to get instant insight into the most important terms in a set.",
   "repository": {
     "type": "git",

diff --git a/pbiviz.json b/pbiviz.json
@@ -1,10 +1,10 @@
 {
   "visual": {
     "name": "WordCloud",
-    "displayName": "WordCloud 2.3.0.0",
+    "displayName": "WordCloud 2.3.1.0",
     "guid": "WordCloud1447959067750",
     "visualClassName": "WordCloud",
-    "version": "2.3.0.0",
+    "version": "2.3.1.0",
     "description": "Word Cloud is a visual representation of word frequency and value. Use it to get instant insight into the most important terms in a set.",
     "supportUrl": "https://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/PowerBI-visuals-WordCloud"

diff --git a/src/WordCloud.ts b/src/WordCloud.ts
@@ -43,7 +43,7 @@ import PrimitiveValue = powerbiVisualsApi.PrimitiveValue;
 import DataViewCategoryColumn = powerbiVisualsApi.DataViewCategoryColumn;
 import DataViewObjectPropertyIdentifier = powerbiVisualsApi.DataViewObjectPropertyIdentifier; 
 
-import IColorPalette = powerbiVisualsApi.extensibility.IColorPalette;
+import IColorPalette = powerbiVisualsApi.extensibility.ISandboxExtendedColorPalette;
 import IVisualEventService = powerbiVisualsApi.extensibility.IVisualEventService;
 import ISelectionManager = powerbiVisualsApi.extensibility.ISelectionManager;
 
@@ -350,6 +350,7 @@ export class WordCloud implements IVisual {
     private static YOffsetPosition: number = 0.75;
     private static HeightOffsetPosition: number = 0.85;
     private static TextFillColor: string = "rgba(63, 191, 191, 0.0)";
+    private static WordOutlineColor: string = "black";
 
     private static MinFontSize: number = 0;
     private static DefaultAngle: number = 0;
@@ -817,7 +818,10 @@ export class WordCloud implements IVisual {
         this.fontFamily = this.root.style("font-family");
 
         this.main = this.root.append("g");
-        this.main.append("g").classed(WordCloud.Words.className, true);
+        this.main.append("g")
+            .classed(WordCloud.Words.className, true)
+            .attr("role", "listbox")
+            .attr("aria-multiselectable", "true");
 
         // init canvas context for calculate label positions
         const canvas = document.createElement("canvas");
@@ -1441,6 +1445,12 @@ export class WordCloud implements IVisual {
             .attr("y", (dataPoint: WordCloudDataPoint) => -dataPoint.size * WordCloud.YOffsetPosition)
             .attr("height", (dataPoint: WordCloudDataPoint) => dataPoint.size * WordCloud.HeightOffsetPosition)
             .attr("fill", () => WordCloud.TextFillColor)
+            .attr("tabindex", 0)
+            .attr("stroke", this.colorPalette.isHighContrast ? this.colorPalette.foreground.value : WordCloud.WordOutlineColor)
+            .attr("role", "option")
+            .attr("aria-label", (dataPoint: WordCloudDataPoint) => {
+                return dataPoint.text;
+            })
             .exit()
             .remove();
 

diff --git a/src/behavior.ts b/src/behavior.ts
@@ -53,40 +53,15 @@ export class WordCloudBehavior {
 
         this.bindClickEventToWords();
         this.bindClickEventToClearCatcher();
+        this.bindKeyboardEventToWords();
         this.renderSelection();
     }
 
     private bindClickEventToWords(): void {
         this.behaviorOptions.wordsSelection.on("click", (event: PointerEvent, word: WordCloudDataPoint) => {
-            const isMultiSelection: boolean = event.ctrlKey || event.shiftKey || event.metaKey;
-            const wordKey = word.text.toLocaleLowerCase();
-            if (isMultiSelection){ 
-                if (!this.selectedWords.has(wordKey)){
-                    this.selectedWords.add(wordKey);
-                    this.selectionManager.select(word.selectionIds, true);
-                }
-                else {
-                    this.selectedWords.delete(wordKey);
-                    const idsToSelect: ISelectionId[] = this.getSelectionIds(Array.from(this.selectedWords));
-                    idsToSelect.length === 0 
-                        ? this.selectionManager.clear()
-                        : this.selectionManager.select(idsToSelect);
-                }
-            }
-            else {
-                if (this.selectedWords.has(wordKey) && this.selectedWords.size === 1){
-                    this.selectedWords.clear();
-                    this.selectionManager.clear();
-                }
-                else {
-                    this.selectedWords.clear();
-                    this.selectedWords.add(wordKey);
-                    this.selectionManager.select(word.selectionIds);
-                }
-            }
-
-            this.renderSelection();
+            this.selectWord(event, word);
             event.stopPropagation();
+            this.renderSelection();
         });
 
         this.behaviorOptions.wordsSelection.on("contextmenu", (event: PointerEvent, word: WordCloudDataPoint) => {
@@ -103,6 +78,35 @@ export class WordCloudBehavior {
         });
     }
 
+    private selectWord(event: PointerEvent | KeyboardEvent, word: WordCloudDataPoint):void{
+        const isMultiSelection: boolean = event.ctrlKey || event.shiftKey || event.metaKey;
+        const wordKey = word.text.toLocaleLowerCase();
+        if (isMultiSelection){ 
+            if (!this.selectedWords.has(wordKey)){
+                this.selectedWords.add(wordKey);
+                this.selectionManager.select(word.selectionIds, true);
+            }
+            else {
+                this.selectedWords.delete(wordKey);
+                const idsToSelect: ISelectionId[] = this.getSelectionIds(Array.from(this.selectedWords));
+                idsToSelect.length === 0 
+                    ? this.selectionManager.clear()
+                    : this.selectionManager.select(idsToSelect);
+            }
+        }
+        else {
+            if (this.selectedWords.has(wordKey) && this.selectedWords.size === 1){
+                this.selectedWords.clear();
+                this.selectionManager.clear();
+            }
+            else {
+                this.selectedWords.clear();
+                this.selectedWords.add(wordKey);
+                this.selectionManager.select(word.selectionIds);
+            }
+        }
+    }
+
     private bindClickEventToClearCatcher(): void {
         this.behaviorOptions.root.on("click", () => {
             this.selectedWords.clear();
@@ -123,13 +127,24 @@ export class WordCloudBehavior {
         });
     }
 
+    private bindKeyboardEventToWords(): void {
+        this.behaviorOptions.wordsSelection.on("keydown", (event : KeyboardEvent, word: WordCloudDataPoint) => {
+            if(event?.code == "Enter" || event?.code == "Space") {
+                this.selectWord(event, word);
+                event.stopPropagation();
+                this.renderSelection();
+            }
+        });
+    }
+
     private renderSelection(): void {
         if (!this.behaviorOptions.wordsSelection) {
             return;
         }
 
         if (!this.selectionManager.hasSelection()) {
             this.setOpacity(this.behaviorOptions.wordsSelection, WordCloudBehavior.MaxOpacity);
+            this.setAriaSelectedLabel(this.behaviorOptions.wordsSelection);
 
             return;
         }
@@ -142,9 +157,17 @@ export class WordCloudBehavior {
 
         this.setOpacity(this.behaviorOptions.wordsSelection, WordCloudBehavior.MinOpacity);
         this.setOpacity(selectedColumns, WordCloudBehavior.MaxOpacity);
+        this.setAriaSelectedLabel(this.behaviorOptions.wordsSelection);
     }
 
     private setOpacity(element: Selection<any>, opacityValue: number): void {
         element.style("fill-opacity", opacityValue);
     }
+
+    private setAriaSelectedLabel(element: Selection<any>){
+        element.attr("aria-selected", (dataPoint: WordCloudDataPoint) => {
+            const wordKey: string = dataPoint.text.toLocaleLowerCase();
+            return this.selectedWords.has(wordKey);
+        });
+    }
 }
diff --git a/style/visual.less b/style/visual.less
@@ -35,6 +35,16 @@
 
         rect {
             cursor: pointer;
+            stroke-opacity: 0;
+
+            &:focus{
+                outline: none;
+            }
+
+            &:focus-visible{
+                stroke-width: 3px;
+                stroke-opacity: 1;
+            }
         }
     }
 }
diff --git a/test/WordCloudBuilder.ts b/test/WordCloudBuilder.ts
@@ -51,6 +51,10 @@ export class WordCloudBuilder extends VisualBuilderBase<VisualClass> {
         return this.element.querySelector("svg.wordCloud");
     }
 
+    public get word(): SVGElement {
+        return this.mainElement?.querySelector("g > g.words");
+    }
+
     public get words(): NodeListOf<SVGElement> {
         return this.mainElement?.querySelectorAll("g > g.words > g.word");
     }