Added aria-labels for sliders and checkboxes/DetailsList (#2419)

* added aria-labels to checkboxes * added slider aria labels * screen reader support for error case * added localizations * auto lint fixes * conmment fix * refined labels * syntax fix * auto lint fixes * val fix
microsoft · Nov 21, 2023 · a676218 · a676218
1 parent eb68a1b
commit a676218
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 1 deletion.
diff --git a/libs/core-ui/src/lib/Cohort/CohortList/CohortList.tsx b/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>

diff --git a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortBar.tsx b/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>
           ))}

diff --git a/libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx b/libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx
@@ -110,7 +110,7 @@ export class ShiftCohort extends React.Component<
         maxWidth={1000}
       >
         <Dropdown
-          placeholder="Select a cohort"
+          placeholder={localization.Core.ShiftCohort.selectCohort}
           label={localization.Core.ShiftCohort.cohortList}
           selectedKey={this.state.selectedCohort}
           options={this.state.options}

diff --git a/libs/counterfactuals/src/lib/CounterfactualList.tsx b/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}
       />
     );
   }

diff --git a/libs/dataset-explorer/src/lib/DataBalanceView/AggregateBalanceMeasuresTable.tsx b/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>

diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/CohortToolBar.tsx b/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
+                        : localization.InterpretVision.Cohort.saveAndSwitch
+                    }
                   />
                   <DefaultButton
                     onClick={this.addCohortWrapper(false)}
                     text={localization.InterpretVision.Cohort.saveAndClose}
+                    ariaLabel={
+                      this.state.errorMessage
+                        ? this.state.errorMessage
+                        : localization.InterpretVision.Cohort.saveAndClose
+                    }
                   />
                 </DialogFooter>
               </Stack.Item>

diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/TableList.tsx b/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.tabOptionSecond
+                }
               />
             </MarqueeSelection>
           </Stack.Item>

diff --git a/.../interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboardCommon.tsx b/.../interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboardCommon.tsx
@@ -71,6 +71,7 @@ export class VisionExplanationDashboardCommon extends React.Component<
                 min={20}
                 id="dataExplorerThumbnailSize"
                 className={this.props.classNames.slider}
+                ariaLabel={localization.InterpretVision.Dashboard.thumbnailSize}
                 label={localization.InterpretVision.Dashboard.thumbnailSize}
                 defaultValue={50}
                 showValue={false}

diff --git a/libs/localization/src/lib/en.json b/libs/localization/src/lib/en.json
@@ -129,6 +129,7 @@
     }
   },
   "Counterfactuals": {
+    "AriaLabel": "Counterfactual",
     "CurrentTreatment": "Current treatment",
     "EffectLowerBound": "CI lower",
     "EffectOfTreatment": "Effect of recommendation",
@@ -1915,7 +1916,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",
         "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.",

diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Cohort/CohortList.tsx b/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

diff --git a/...nt/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/FeatureConfigurationFlyout.tsx b/...nt/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>

diff --git a/...ent/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/MetricConfigurationFlyout.tsx b/...ent/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>

diff --git a/.../src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ObjectDetectionModelOverview.tsx b/.../src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ObjectDetectionModelOverview.tsx
@@ -88,6 +88,9 @@ export class ObjectDetectionWidgets extends React.PureComponent<IObjectDetection
         />
         <Slider
           id="modelOverviewIoUThreshold"
+          ariaLabel={
+            localization.ModelAssessment.ModelOverview.iouThresholdDropdown.name
+          }
           label={
             localization.ModelAssessment.ModelOverview.iouThresholdDropdown.name
           }