Flyout Bounding Box legend & accessibility fixes (#2497)

* added bb legend * added tokens variables * localization & accessibility fixes * simplified stack * refactor * refactor * refactor * new file component refactor * auto lint fixes
microsoft · Jan 24, 2024 · 6973ee4 · 6973ee4
1 parent 9f7c545
commit 6973ee4
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 51 deletions.
diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Stack, Text } from "@fluentui/react";
+import { IVisionListItem } from "@responsible-ai/core-ui";
+import { localization } from "@responsible-ai/localization";
+import React from "react";
+
+import { stackTokens } from "./FlyoutObjectDetectionUtils";
+
+interface IDetectionDetailsProps {
+  item: IVisionListItem; // replace with actual type
+  correctDetections: string;
+  incorrectDetections: string;
+}
+export class DetectionDetails extends React.Component<IDetectionDetailsProps> {
+  public render(): React.ReactNode {
+    return (
+      <Stack
+        tokens={stackTokens.large}
+        horizontalAlign="start"
+        verticalAlign="start"
+      >
+        <Stack
+          horizontal
+          tokens={stackTokens.medium}
+          horizontalAlign="center"
+          verticalAlign="center"
+        />
+        <Stack.Item>
+          <Text variant="large">
+            {localization.InterpretVision.Dashboard.indexLabel}
+            {this.props.item?.index}
+          </Text>
+        </Stack.Item>
+        <Stack.Item>
+          <Text variant="large">
+            {localization.InterpretVision.Dashboard.correctDetections}
+            {this.props.correctDetections}
+          </Text>
+        </Stack.Item>
+        <Stack.Item>
+          <Text variant="large">
+            {localization.InterpretVision.Dashboard.incorrectDetections}
+            {this.props.incorrectDetections}
+          </Text>
+        </Stack.Item>
+      </Stack>
+    );
+  }
+}
diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx
@@ -7,6 +7,7 @@ import {
   IComboBox,
   IComboBoxOption,
   Image,
+  Label,
   List,
   Panel,
   PanelType,
@@ -24,6 +25,7 @@ import * as FlyoutStyles from "../utils/FlyoutUtils";
 import { getObjectDetectionImageAltText } from "../utils/getAltTextUtils";
 import { getJoinedLabelString } from "../utils/labelUtils";
 
+import { DetectionDetails } from "./DetectionDetails";
 import {
   flyoutStyles,
   explanationImage,
@@ -122,42 +124,11 @@ export class FlyoutObjectDetection extends React.Component<
                   verticalAlign="center"
                 >
                   <Stack.Item>
-                    <Stack
-                      tokens={FlyoutODUtils.stackTokens.large}
-                      horizontalAlign="start"
-                      verticalAlign="start"
-                    >
-                      <Stack
-                        horizontal
-                        tokens={FlyoutODUtils.stackTokens.medium}
-                        horizontalAlign="center"
-                        verticalAlign="center"
-                      />
-                      <Stack.Item>
-                        <Text variant="large">
-                          {localization.InterpretVision.Dashboard.indexLabel}
-                          {item?.index}
-                        </Text>
-                      </Stack.Item>
-                      <Stack.Item>
-                        <Text variant="large">
-                          {
-                            localization.InterpretVision.Dashboard
-                              .correctDetections
-                          }
-                          {correctDetections}
-                        </Text>
-                      </Stack.Item>
-                      <Stack.Item>
-                        <Text variant="large">
-                          {
-                            localization.InterpretVision.Dashboard
-                              .incorrectDetections
-                          }
-                          {incorrectDetections}
-                        </Text>
-                      </Stack.Item>
-                    </Stack>
+                    <DetectionDetails
+                      item={item}
+                      correctDetections={correctDetections}
+                      incorrectDetections={incorrectDetections}
+                    />
                   </Stack.Item>
                 </Stack>
               </Stack.Item>
@@ -173,13 +144,17 @@ export class FlyoutObjectDetection extends React.Component<
                     {localization.InterpretVision.Dashboard.panelInformation}
                   </Text>
                 </Stack.Item>
-                <Stack.Item className={classNames.featureListContainer}>
+                <Stack.Item
+                  className={classNames.featureListContainer}
+                  tabIndex={0}
+                >
                   <List
                     items={this.state.metadata}
                     onRenderCell={FlyoutStyles.onRenderCell}
                   />
                 </Stack.Item>
               </Stack>
+              <FlyoutODUtils.ColorLegend />
               <Stack>
                 <Stack.Item className={classNames.imageContainer}>
                   <Stack.Item id="canvasToolsDiv">
@@ -200,17 +175,27 @@ export class FlyoutObjectDetection extends React.Component<
                 </Text>
               </Stack.Item>
               <Stack>
-                {
-                  <ComboBox
-                    id={localization.InterpretVision.Dashboard.objectSelect}
-                    label={localization.InterpretVision.Dashboard.chooseObject}
-                    onChange={this.selectODChoiceFromDropdown}
-                    selectedKey={this.state.odSelectedKey}
-                    options={this.state.selectableObjectIndexes}
-                    className={"classNames.dropdown"}
-                    styles={FluentUIStyles.smallDropdownStyle}
-                  />
-                }
+                <Label
+                  id={
+                    localization.InterpretVision.Dashboard.objectSelectionLabel
+                  }
+                >
+                  {localization.InterpretVision.Dashboard.chooseObject}
+                </Label>
+                <ComboBox
+                  id={localization.InterpretVision.Dashboard.objectSelect}
+                  onChange={this.selectODChoiceFromDropdown}
+                  selectedKey={this.state.odSelectedKey}
+                  options={this.state.selectableObjectIndexes}
+                  className="classNames.dropdown"
+                  styles={FluentUIStyles.smallDropdownStyle}
+                  ariaLabel={
+                    localization.InterpretVision.Dashboard.chooseObject
+                  }
+                  aria-labelledby={
+                    localization.InterpretVision.Dashboard.objectSelectionLabel
+                  }
+                />
                 <Stack>
                   {!this.props.loadingExplanation[item.index][
                     +this.state.odSelectedKey.slice(

diff --git a/...terpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx b/...terpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx
@@ -1,9 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { IComboBoxOption, getTheme } from "@fluentui/react";
+import { IComboBoxOption, getTheme, Stack, Text } from "@fluentui/react";
 import { IDataset, IVisionListItem } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
+import React from "react";
 import { CanvasTools } from "vott-ct";
 import { Editor } from "vott-ct/lib/js/CanvasTools/CanvasTools.Editor";
 import { RegionData } from "vott-ct/lib/js/CanvasTools/Core/RegionData";
@@ -31,6 +32,42 @@ export const stackTokens = {
   large: { childrenGap: "l2" },
   medium: { childrenGap: "l1" }
 };
+
+const theme = getTheme();
+
+export class ColorLegend extends React.Component {
+  public render(): React.ReactNode {
+    return (
+      <Stack horizontal tokens={stackTokens.large}>
+        <Stack horizontal tokens={stackTokens.medium}>
+          <Text variant="medium">
+            {localization.InterpretVision.Dashboard.trueY}
+          </Text>
+          <div
+            style={{
+              backgroundColor: theme.palette.green,
+              height: 20,
+              width: 20
+            }}
+          />
+        </Stack>
+        <Stack horizontal tokens={stackTokens.medium}>
+          <Text variant="medium">
+            {localization.InterpretVision.Dashboard.predictedY}
+          </Text>
+          <div
+            style={{
+              backgroundColor: theme.palette.magenta,
+              height: 20,
+              width: 20
+            }}
+          />
+        </Stack>
+      </Stack>
+    );
+  }
+}
+
 export const ExcessLabelLen =
   localization.InterpretVision.Dashboard.prefix.length;
 
@@ -109,8 +146,6 @@ export function drawBoundingBoxes(
     return;
   }
 
-  const theme = getTheme();
-
   // Ensuring object detection labels are populated
   if (
     !dataset.object_detection_predicted_y ||

diff --git a/libs/localization/src/lib/en.json b/libs/localization/src/lib/en.json
@@ -1477,6 +1477,7 @@
       "multiselect": "Multiselect",
       "notdefined": "object scenario not defined",
       "objectSelect": "Object Selection",
+      "objectSelectionLabel": "objectSelectLabel",
       "pageSize": "Page size: ",
       "panelTitle": "Selected instance",
       "panelExplanation": "Explanation",