27286 Add alt text to image in high contrast mode [Update Enhanced Scatter to support high contrast mode] (#30)

Author: ignatvilesov

src/visual.ts

@@ -794,7 +794,7 @@ module powerbi.extensibility.visual {
             return !!(dataView && dataView.metadata);
         }
 
-        private parseSettings(dataView, colorHelper: ColorHelper): Settings {
+        private parseSettings(dataView: DataView, colorHelper: ColorHelper): Settings {
             const settings: Settings = Settings.parse(dataView) as Settings;
 
             settings.dataPoint.defaultColor = colorHelper.getHighContrastColor(
@@ -811,6 +811,8 @@ module powerbi.extensibility.visual {
                 settings.legend.labelColor
             );
 
+            settings.categoryLabels.show = settings.categoryLabels.show || colorHelper.isHighContrast;
+
             settings.categoryLabels.color = colorHelper.getHighContrastColor(
                 "foreground",
                 settings.categoryLabels.color
@@ -832,6 +834,8 @@ module powerbi.extensibility.visual {
             this.parseAxisSettings(settings.categoryAxis, colorHelper);
             this.parseAxisSettings(settings.valueAxis, colorHelper);
 
+            settings.backdrop.show = settings.backdrop.show && !colorHelper.isHighContrast;
+
             return settings;
         }
 
@@ -2678,7 +2682,12 @@ module powerbi.extensibility.visual {
                             }
 
                             return this.svgDefaultImage;
-                        }
+                        },
+                        "title": (dataPoint: EnhancedScatterChartDataPoint) => {
+                            return dataPoint.formattedCategory
+                                ? dataPoint.formattedCategory()
+                                : null;
+                        },
                     })
                     .each(function (dataPoint: EnhancedScatterChartDataPoint): void {
                         const bubbleRadius: number = EnhancedScatterChart.getBubbleRadius(

test/visualBuilder.ts

@@ -98,7 +98,7 @@ module powerbi.extensibility.visual.test {
                 .children(".labels");
         }
 
-        public get dataLabelsText(): JQuery<HTMLElement> {
+        public get dataLabelsText(): JQuery {
             return this.dataLabels
                 .children("text.data-labels");
         }
@@ -116,6 +116,13 @@ module powerbi.extensibility.visual.test {
                 .children("path.dot");
         }
 
+        public get images(): JQuery {
+            return this.mainGraphicsContext
+                .children("svg")
+                .children("g.ScatterMarkers")
+                .children("image.img");
+        }
+
         public get legendGroup(): JQuery {
             return this.element
                 .children(".legend")

test/visualTest.ts

@@ -949,6 +949,29 @@ module powerbi.extensibility.visual.test {
         });
 
         describe("Accessibility", () => {
+            it("title attribute should be filled for all of images for screen readers", (done) => {
+                const dataView: DataView = defaultDataViewBuilder.getDataView([
+                    EnhancedScatterChartData.ColumnCategory,
+                    EnhancedScatterChartData.ColumnSeries,
+                    EnhancedScatterChartData.ColumnX,
+                    EnhancedScatterChartData.ColumnY,
+                    EnhancedScatterChartData.ColumnSize,
+                    EnhancedScatterChartData.ColumnImage,
+                ]);
+
+                visualBuilder.updateRenderTimeout(dataView, () => {
+                    const images: JQuery[] = visualBuilder.images.toArray().map($);
+
+                    images.forEach((image: JQuery) => {
+                        const altText: string = image.attr("title");
+
+                        expect(altText).toBeDefined();
+                    });
+
+                    done();
+                });
+            });
+
             describe("High contrast mode", () => {
                 const backgroundColor: string = "#000000";
                 const foregroundColor: string = "#ffff00";