Added aria-labels for sliders and checkboxes/DetailsList

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

@@ -120,6 +120,7 @@ export class CohortList extends React.Component<
             selectionPreservedOnEmptyClick
             checkboxVisibility={CheckboxVisibility.hidden}
             onRenderItemColumn={this.renderItemColumn}
+            ariaLabel={localization.Core.ShiftCohort.cohortList}
           />
         </div>
       </div>

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/ManualCohortManagement/CohortBar.tsx

@@ -112,6 +112,7 @@ export class CohortBar extends React.Component<
                 items={this.props.cohorts}
                 selectionMode={SelectionMode.none}
                 columns={columns}
+                ariaLabel={localization.Core.ShiftCohort.cohortList}
               />
             </Panel>
           ))}

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

@@ -111,7 +111,7 @@ 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}

libs/counterfactuals/src/lib/CounterfactualList.tsx

@@ -109,6 +109,7 @@ export class CounterfactualList extends React.Component<
         onRenderItemColumn={this.renderItemColumn}
         onRenderRow={this.renderRow}
         onRenderDetailsFooter={this.onRenderDetailsFooter}
+        ariaLabel={localization.Counterfactuals.AriaLabel}
       />
     );
   }

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

@@ -110,6 +110,14 @@ export class AggregateBalanceMeasuresTable extends React.PureComponent<IAggregat
             selectionMode={SelectionMode.none}
             layoutMode={DetailsListLayoutMode.justified}
             checkboxVisibility={CheckboxVisibility.hidden}
+            ariaLabelForSelectAllCheckbox={
+              localization.ModelAssessment.ModelOverview.featureConfiguration
+                .selectAllRowsAriaLabel
+            }
+            ariaLabel={
+              localization.ModelAssessment.ModelOverview.featureConfiguration
+                .flyoutAriaLabel
+            }
           />
         </Stack.Item>
       </Stack>

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

@@ -120,6 +120,7 @@ export class CohortToolBar extends React.Component<
                   <Text
                     className={classNames.errorMessage}
                     variant="mediumPlus"
+                    aria-label={this.state.errorMessage}
                   >
                     {this.state.errorMessage}
                   </Text>
@@ -130,10 +131,20 @@ export class CohortToolBar extends React.Component<
                   <PrimaryButton
                     onClick={this.addCohortWrapper(true)}
                     text={localization.InterpretVision.Cohort.saveAndSwitch}
+                    ariaLabel={
+                      this.state.errorMessage
+                        ? this.state.errorMessage
+                        : undefined
+                    }
                   />
                   <DefaultButton
                     onClick={this.addCohortWrapper(false)}
                     text={localization.InterpretVision.Cohort.saveAndClose}
+                    ariaLabel={
+                      this.state.errorMessage
+                        ? this.state.errorMessage
+                        : undefined
+                    }
                   />
                 </DialogFooter>
               </Stack.Item>

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

@@ -163,6 +163,9 @@ export class TableList extends React.Component<
                 selection={this._selection}
                 setKey="set"
                 onItemInvoked={this.props.selectItem}
+                ariaLabel={
+                  localization.InterpretVision.Dashboard.tableListAriaLabel
+                }
               />
             </MarqueeSelection>
           </Stack.Item>

libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboardCommon.tsx

@@ -71,6 +71,9 @@ export class VisionExplanationDashboardCommon extends React.Component<
                 min={20}
                 id="dataExplorerThumbnailSize"
                 className={this.props.classNames.slider}
+                ariaLabel={
+                  localization.InterpretVision.Dashboard.thumbnailSizeAriaLabel
+                }
                 label={localization.InterpretVision.Dashboard.thumbnailSize}
                 defaultValue={50}
                 showValue={false}

libs/localization/src/lib/en.json

@@ -129,6 +129,7 @@
     }
   },
   "Counterfactuals": {
+    "AriaLabel": "Counterfactual list",
     "CurrentTreatment": "Current treatment",
     "EffectLowerBound": "CI lower",
     "EffectOfTreatment": "Effect of recommendation",
@@ -1470,7 +1471,9 @@
       "tabOptionFirst": "Image explorer view",
       "tabOptionSecond": "Table view",
       "tabOptionThird": "Class view",
+      "tableListAriaLabel": "Table view list",
       "thumbnailSize": "Thumbnail size",
+      "thumbnailSizeAriaLabel": "Slider for image thumbnail size",
       "titleBarError": "Error instances",
       "titleBarSuccess": "Success instances",
       "trueY": "Ground truth: "
@@ -1839,7 +1842,8 @@
         "name": "IoU Threshold",
         "description": "Intersection over Union quantifies the degree of overlap between the prediction and ground truth bounding box of a detected object in an image. For example, setting an IoU threshold of 70% means that a prediction with greater than 70% overlap with ground truth is True, thus influencing the definition of prediction correctness and calculation of other performance metrics.",
         "iconId": "iouThresholdIconId",
-        "title": "Learn about the IoU threshold"
+        "title": "Learn about the IoU threshold",
+        "AriaLabel": "Slider for IoU threshold"
       },
       "notAvailable": "N/A",
       "countColumnHeader": "Sample size",
@@ -1908,7 +1912,11 @@
         "flyoutHeader": "Choose your features",
         "flyoutSubHeader": "Along which features would you like to evaluate your model's fairness?",
         "flyoutDescription": "Fairness is evaluated in terms of disparities in your model's behavior. We will split your data according to values of each selected feature, and evaluate how your model's performance metrics differ across these splits.",
+        "selectAllRowsAriaLabel": "Select all rows",
+        "flyoutAriaLabel": "Aggregate balance measures list",
         "featureColumnHeader": "Features",
+        "featureSelectionAriaLabel": "Feature selection table",
+        "metricSelectionAriaLabel": "Metric selection table",
         "groupsColumnHeader": "Groups",
         "categoricalGroupsCountRemark": "This feature has {0} unique values.",
         "continuousGroupsCountRemark": "This feature is continuous and split into {0} bins.",

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

@@ -84,6 +84,7 @@ export class CohortList extends React.Component<
           selectionMode={SelectionMode.none}
           checkboxVisibility={CheckboxVisibility.hidden}
           onRenderItemColumn={this.renderItemColumn}
+          ariaLabel={localization.Core.ShiftCohort.cohortList}
         />
         {this.state.currentEditCohort && (
           <CohortEditor

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

@@ -168,6 +168,14 @@ export class FeatureConfigurationFlyout extends React.Component<
             selectionMode={SelectionMode.multiple}
             selection={this._selection}
             checkboxVisibility={CheckboxVisibility.always}
+            ariaLabelForSelectAllCheckbox={
+              localization.ModelAssessment.ModelOverview.featureConfiguration
+                .selectAllRowsAriaLabel
+            }
+            ariaLabel={
+              localization.ModelAssessment.ModelOverview.featureConfiguration
+                .featureSelectionAriaLabel
+            }
           />
         </Stack>
       </Panel>

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

@@ -146,6 +146,14 @@ export class MetricConfigurationFlyout extends React.Component<
             selectionMode={SelectionMode.multiple}
             selection={this._selection}
             checkboxVisibility={CheckboxVisibility.always}
+            ariaLabelForSelectAllCheckbox={
+              localization.ModelAssessment.ModelOverview.featureConfiguration
+                .selectAllRowsAriaLabel
+            }
+            ariaLabel={
+              localization.ModelAssessment.ModelOverview.featureConfiguration
+                .metricSelectionAriaLabel
+            }
           />
         </Stack>
       </Panel>

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

@@ -88,6 +88,10 @@ export class ObjectDetectionWidgets extends React.PureComponent<IObjectDetection
         />
         <Slider
           id="modelOverviewIoUThreshold"
+          ariaLabel={
+            localization.ModelAssessment.ModelOverview.iouThresholdDropdown
+              .AriaLabel
+          }
           label={
             localization.ModelAssessment.ModelOverview.iouThresholdDropdown.name
           }