Added aria-labels to dropdowns

libs/core-ui/src/lib/Cohort/CohortList/CohortListPanel.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import { IFocusTrapZoneProps, Panel } from "@fluentui/react";
+import { localization } from "@responsible-ai/localization";
 import React from "react";
 
 import { ErrorCohort } from "../ErrorCohort";
@@ -26,7 +27,7 @@ export class CohortListPanel extends React.Component<ICohortListPanelProps> {
     const classNames = cohortListStyles();
     return (
       <Panel
-        headerText="Cohort List"
+        headerText={localization.Core.ShiftCohort.cohortList}
         isOpen={this.props.isOpen}
         focusTrapZoneProps={focusTrapZoneProps}
         // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.

libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx

@@ -111,11 +111,12 @@ export class ShiftCohort extends React.Component<
       >
         <Dropdown
           placeholder="Select a cohort"
-          label="Cohort list"
+          label={localization.Core.ShiftCohort.cohortList}
           selectedKey={this.state.selectedCohort}
           options={this.state.options}
           styles={dropdownStyles}
           onChange={this.onChange}
+          ariaLabel={localization.Core.ShiftCohort.cohortList}
         />
         <CohortStats
           temporaryCohort={this.state.savedCohorts[this.state.selectedCohort]}

libs/core-ui/src/lib/components/OverallMetricChart.tsx

@@ -115,6 +115,9 @@ export class OverallMetricChart extends React.PureComponent<
               selectedKey={this.state.selectedCohortIndex}
               onChange={this.setSelectedCohort}
               id={"modelPerformanceCohortPicker"}
+              ariaLabel={
+                localization.Interpret.DatasetExplorer.datasetCohortDropdown
+              }
             />
           </div>
         )}

libs/dataset-explorer/src/lib/DataBalanceView/FeatureBalanceMeasuresChart.tsx

@@ -117,6 +117,7 @@ export class FeatureBalanceMeasuresChart extends React.PureComponent<
                     options={labelOptions}
                     selectedKey={this.state.selectedLabelIndex}
                     onChange={this.setSelectedLabel}
+                    ariaLabel={measuresLocalization.LabelPicker}
                   />
                 </Stack.Item>
               </Stack>
@@ -135,6 +136,7 @@ export class FeatureBalanceMeasuresChart extends React.PureComponent<
                     options={featureOptions}
                     selectedKey={this.state.selectedFeatureIndex}
                     onChange={this.setSelectedFeature}
+                    ariaLabel={measuresLocalization.FeaturePicker}
                   />
                 </Stack.Item>
               </Stack>
@@ -153,6 +155,7 @@ export class FeatureBalanceMeasuresChart extends React.PureComponent<
                     options={measureOptions}
                     selectedKey={this.state.selectedMeasureIndex}
                     onChange={this.setSelectedMeasure}
+                    ariaLabel={measuresLocalization.MeasurePicker}
                   />
                 </Stack.Item>
               </Stack>

libs/fairness/src/lib/Controls/DropdownBar.tsx

@@ -57,6 +57,7 @@ export class DropdownBar extends React.PureComponent<IDropdownBarProps> {
           options={featureOptions}
           disabled={false}
           onChange={this.props.parentFeatureChanged}
+          ariaLabel={localization.Fairness.DropdownHeaders.sensitiveFeature}
         />
         <Dropdown
           id="performanceMetricDropdown"
@@ -67,6 +68,7 @@ export class DropdownBar extends React.PureComponent<IDropdownBarProps> {
           options={performanceDropDown}
           disabled={false}
           onChange={this.props.parentPerformanceChanged}
+          ariaLabel={localization.Fairness.DropdownHeaders.performanceMetric}
         />
         <Dropdown
           style={{ minWidth: "240px" }}
@@ -78,6 +80,7 @@ export class DropdownBar extends React.PureComponent<IDropdownBarProps> {
           options={fairnessDropdown}
           disabled={false}
           onChange={this.props.parentFairnessChanged}
+          ariaLabel={localization.Fairness.DropdownHeaders.fairnessMetric}
         />
       </Stack>
     );

libs/fairness/src/lib/Controls/ReportChart.tsx

@@ -116,6 +116,7 @@ export class ReportChart extends React.Component<IReportChartProps, IState> {
           options={displayOptions}
           disabled={false}
           onChange={this.onChange}
+          ariaLabel={localization.Fairness.Report.chartChoiceAriaLabel}
         />
         {this.state.chartKey === performanceKey && (
           <PerformancePlot

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DataCharacteristics.tsx

@@ -96,6 +96,10 @@ export class DataCharacteristics extends React.Component<
                       options={this.state.labelTypeDropdownOptions}
                       selectedKey={this.state.labelType}
                       onChange={this.onLabelTypeChange}
+                      ariaLabel={
+                        localization.InterpretVision.Dashboard
+                          .labelTypeAriaLabel
+                      }
                     />
                   </Stack.Item>
                   <Stack.Item>
@@ -118,6 +122,10 @@ export class DataCharacteristics extends React.Component<
                       }
                       onChange={this.onLabelVisibilitySelect}
                       multiSelect
+                      ariaLabel={
+                        localization.InterpretVision.Dashboard
+                          .labelVisibilityAriaLabel
+                      }
                     />
                   </Stack.Item>
                 </Stack>
@@ -161,7 +169,7 @@ export class DataCharacteristics extends React.Component<
                         onRenderCell={this.onRenderCell}
                         loadPrevItems={this.loadPrevItems}
                         loadNextItems={this.loadNextItems}
-                        getPageHeight={this.getPageHeight}
+                        getPageHeight={(): number => this.rowHeight}
                         getItemCountForPage={this.getItemCountForPageWrapper(
                           index
                         )}
@@ -239,12 +247,11 @@ export class DataCharacteristics extends React.Component<
     _event: React.FormEvent<HTMLDivElement>,
     item?: IDropdownOption<any> | undefined
   ): void => {
-    if (!item) {
-      return;
+    if (item) {
+      this.setState(
+        getLabelVisibility(item, this.state, this.predOrIncorrectLabelType)
+      );
     }
-    this.setState(
-      getLabelVisibility(item, this.state, this.predOrIncorrectLabelType)
-    );
   };
 
   private loadNextItems = (index: number) => (): void => {
@@ -266,11 +273,8 @@ export class DataCharacteristics extends React.Component<
     this.setState({ renderStartIndex, showBackArrow });
   };
 
-  private callbackWrapper = (item: IVisionListItem) => (): void => {
+  private callbackWrapper = (item: IVisionListItem) => (): void =>
     this.props.selectItem(item);
-  };
-
-  private getPageHeight = (): number => this.rowHeight;
 
   private getItemCountForPageWrapper = (
     index: number
@@ -283,10 +287,7 @@ export class DataCharacteristics extends React.Component<
       visibleRect?: IRectangle | undefined
     ): number => {
       const columnCount = this.state.columnCount;
-      if (!visibleRect) {
-        return columnCount[index];
-      }
-      if (itemIndex === 0) {
+      if (visibleRect && itemIndex === 0) {
         columnCount[index] =
           Math.floor(visibleRect.width / this.props.imageDim) - 1;
         this.setState({ columnCount: [...columnCount] });

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/PageSizeSelectors.tsx

@@ -42,6 +42,7 @@ export class PageSizeSelectors extends React.Component<IPageSizeSelectorsProps>
             defaultSelectedKey="3"
             options={NumRowsOptions}
             onChange={this.props.onNumRowsSelect}
+            ariaLabel={localization.InterpretVision.Dashboard.rowsAriaLabel}
           />
         </Stack.Item>
       </Stack>

libs/localization/src/lib/en.json

@@ -704,6 +704,7 @@
       "backToComparisons": "Back to all models",
       "backToComparisonsLegacy": "Multimodel view",
       "chartChoiceDropdownHeader": "Charts",
+      "chartChoiceAriaLabel": "Chart selection",
       "classificationOutcomesHowToRead": "The bar chart shows the selection rate in each group, meaning the fraction of points classified as 1.",
       "classificationPerformanceHowToRead1": "The bar chart shows the distribution of errors in each group.",
       "classificationPerformanceHowToRead2": "Errors are split into overprediction errors (predicting 1 when the true label is 0), and underprediction errors (predicting 0 when the true label is 1).",
@@ -994,7 +995,7 @@
       "individualDatapoints": "Individual datapoints",
       "missingParameters": "This tab requires an evaluation dataset be supplied.",
       "noColor": "None",
-      "datasetCohortDropdown": "Dataset cohort dropdown"
+      "datasetCohortDropdown": "Dataset cohort"
     },
     "DependencePlot": {
       "_featureImportanceOf.comment": "axis label on chart showing the importance of a selected feature (column)",
@@ -1446,7 +1447,9 @@
       "filter": "Filter",
       "indexLabel": "Image ",
       "labelTypeDropdown": "Select label type",
+      "labelTypeAriaLabel": "Label type",
       "labelVisibilityDropdown": "Select labels to display",
+      "labelVisibilityAriaLabel": "Label visibility",
       "legendFailure": "failure",
       "legendSuccess": "success",
       "loading": "Computing explanation for image of index",
@@ -1463,6 +1466,7 @@
       "incorrectDetections": "Incorrect detections: ",
       "prefix": "Object: ",
       "rows": "Rows: ",
+      "rowsAriaLabel": "Number of rows per page",
       "search": "Search",
       "selectAll": "Select all",
       "settings": "Settings",
@@ -1480,6 +1484,8 @@
     "AddingTab": {
       "AddButtonText": "Add",
       "CalloutContent": "Adding some components (error tree view, error heat map) will allow you to filter down the data from the global cohort that you see in the components below.",
+      "AddComponentAriaLabel": "Add dashboard component",
+      "AddButtonAriaLabel": "Add dashboard button",
       "CalloutTitle": "Add component",
       "TabAddedMessage": {
         "DataAnalysis": "Data analysis component added",
@@ -1513,6 +1519,7 @@
       "deleteCohort": "Deleting {0}?",
       "deleteConfirm": "Are you sure you want to delete this cohort?",
       "selectCohort": "Select a cohort",
+      "selectCohortAriaLabel": "Cohort selection",
       "shiftCohort": "Switch cohort",
       "shiftCohortDescription": "Select a cohort from the cohort list. Apply the cohort to the dashboard."
     },
@@ -1992,6 +1999,7 @@
       "cancel": "Cancel",
       "cohortList": "Time series list",
       "selectCohort": "Select a time series",
+      "selectCohortAriaLabel": "Time series selection",
       "shiftCohort": "Switch time series",
       "shiftCohortDescription": "Select a time series from the time series list. Apply the time series to the dashboard."
     },

libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.tsx

@@ -72,10 +72,16 @@ export class AddTabButton extends React.Component<
                 <Dropdown
                   options={this.props.availableTabs}
                   onChange={this.onChange}
+                  ariaLabel={
+                    localization.ModelAssessment.AddingTab.AddComponentAriaLabel
+                  }
                 />
                 <PrimaryButton
                   onClick={this.addTab}
                   text={localization.ModelAssessment.AddingTab.AddButtonText}
+                  ariaLabel={
+                    localization.ModelAssessment.AddingTab.AddButtonAriaLabel
+                  }
                 />
               </Stack>
             </Callout>

libs/model-assessment/src/lib/ModelAssessmentDashboard/Cohort/ShiftCohort.tsx

@@ -116,6 +116,7 @@ export class ShiftCohort extends React.Component<
           selectedKey={this.state.selectedCohort}
           options={this.state.options}
           onChange={this.onChange}
+          ariaLabel={localizationBase.selectCohortAriaLabel}
         />
         <CohortEditorFilterList
           compositeFilters={

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ChartConfigurationFlyout.tsx

@@ -227,6 +227,10 @@ export class ChartConfigurationFlyout extends React.Component<
                 .chartConfigDatasetCohortSelectionPlaceholder
             }
             disabled={!this.state.datasetCohortViewIsNewlySelected}
+            ariaLabel={
+              localization.ModelAssessment.ModelOverview
+                .dataCohortsChartSelectionHeader
+            }
           />
           {this.props.featureBasedCohorts.length > 0 && (
             <Dropdown
@@ -250,6 +254,10 @@ export class ChartConfigurationFlyout extends React.Component<
                   .chartConfigFeatureBasedCohortSelectionPlaceholder
               }
               disabled={this.state.datasetCohortViewIsNewlySelected}
+              ariaLabel={
+                localization.ModelAssessment.ModelOverview
+                  .featureBasedCohortsChartSelectionHeader
+              }
             />
           )}
         </Stack>