Added aria-labels to buttons (#2418)

* added aria-labels to buttons * added localizations * added more localization * auto lint fixes * file line limit fix * refined labels * syntax fix * auto lint fixes * build fixes * auto lint fixes
microsoft · Nov 22, 2023 · 96b3574 · 96b3574
1 parent a676218
commit 96b3574
Show file tree

Hide file tree

Showing 23 changed files with 108 additions and 15 deletions.
diff --git a/libs/core-ui/src/lib/Cohort/EditCohort/EditCohort.tsx b/libs/core-ui/src/lib/Cohort/EditCohort/EditCohort.tsx
@@ -106,14 +106,25 @@ export class EditCohort extends React.Component<
             <Stack.Item align="start">
               <DefaultButton
                 onClick={this.deleteCohort}
-                text="Delete"
+                text={localization.Interpret.CohortEditor.delete}
+                ariaLabel={localization.Interpret.CohortEditor.deleteAriaLabel}
                 disabled={disableDelete}
               />
             </Stack.Item>
             <Stack.Item align="end">
               <Stack horizontal tokens={stackTokens}>
-                <PrimaryButton onClick={this.editCohort} text="Save" />
-                <DefaultButton onClick={this.props.onDismiss} text="Cancel" />
+                <PrimaryButton
+                  onClick={this.editCohort}
+                  text={localization.Interpret.CohortEditor.save}
+                  ariaLabel={localization.Interpret.CohortEditor.saveAriaLabel}
+                />
+                <DefaultButton
+                  onClick={this.props.onDismiss}
+                  text={localization.Interpret.CohortEditor.cancel}
+                  ariaLabel={
+                    localization.Interpret.CohortEditor.cancelAriaLabel
+                  }
+                />
               </Stack>
             </Stack.Item>
           </Stack>

diff --git a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditor.tsx b/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditor.tsx
@@ -115,23 +115,29 @@ export class CohortEditor extends React.PureComponent<
             disabled={this.props.deleteIsDisabled}
             onClick={this.deleteCohort}
             className={styles.deleteCohort}
+            ariaLabel={localization.Interpret.CohortEditor.deleteAriaLabel}
           >
             {localization.Interpret.CohortEditor.delete}
           </DefaultButton>
         )}
         <PrimaryButton
           onClick={(): void => this.saveCohort()}
           disabled={this.isSaveDisabled()}
+          ariaLabel={localization.Interpret.CohortEditor.saveAriaLabel}
         >
           {localization.Interpret.CohortEditor.save}
         </PrimaryButton>
         <DefaultButton
           onClick={(): void => this.saveCohort(true)}
           disabled={this.isSaveDisabled()}
+          ariaLabel={localization.Interpret.CohortEditor.saveAndSwitch}
         >
           {localization.Interpret.CohortEditor.saveAndSwitch}
         </DefaultButton>
-        <DefaultButton onClick={this.onCancelClick}>
+        <DefaultButton
+          onClick={this.onCancelClick}
+          ariaLabel={localization.Interpret.CohortEditor.cancelAriaLabel}
+        >
           {localization.Interpret.CohortEditor.cancel}
         </DefaultButton>
       </Stack>

diff --git a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditorFilter.tsx b/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditorFilter.tsx
@@ -154,12 +154,16 @@ export class CohortEditorFilter extends React.Component<ICohortEditorFilterProps
                   onClick={(): void =>
                     this.props.saveState(this.props.filterIndex)
                   }
+                  ariaLabel={localization.Interpret.CohortEditor.saveAriaLabel}
                 />
               </Stack.Item>
               <Stack.Item>
                 <DefaultButton
                   text={localization.Interpret.CohortEditor.cancel}
                   onClick={(): void => this.props.cancelFilter()}
+                  ariaLabel={
+                    localization.Interpret.CohortEditor.cancelAriaLabel
+                  }
                 />
               </Stack.Item>
             </>
@@ -168,6 +172,9 @@ export class CohortEditorFilter extends React.Component<ICohortEditorFilterProps
               <PrimaryButton
                 text={localization.Interpret.CohortEditor.addFilter}
                 onClick={this.onAddFilterClick}
+                ariaLabel={
+                  localization.Interpret.CohortEditor.addFilterAriaLabel
+                }
               />
             </Stack.Item>
           )}

diff --git a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortList.tsx b/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortList.tsx
@@ -39,13 +39,15 @@ export class CohortList extends React.PureComponent<ICohortListProps> {
               text={localization.Interpret.CohortBanner.addCohort}
               iconProps={{ iconName: "Add" }}
               styles={{ label: { whiteSpace: "nowrap" } }}
+              ariaLabel={localization.Interpret.CohortBanner.addCohort}
             />
             <DefaultButton
               disabled={!this.props.jointDataset.dataDict?.length}
               onClick={this.props.showEditList}
               text={localization.Interpret.CohortBanner.editCohort}
               iconProps={{ iconName: "Edit" }}
               styles={{ label: { whiteSpace: "nowrap" } }}
+              ariaLabel={localization.Interpret.CohortBanner.editCohort}
             />
           </Stack>
         </Stack.Item>

diff --git a/libs/core-ui/src/lib/Cohort/SaveCohort/SaveCohort.tsx b/libs/core-ui/src/lib/Cohort/SaveCohort/SaveCohort.tsx
@@ -101,18 +101,21 @@ export class SaveCohort extends React.Component<
               this.saveCohort();
             }}
             text={localization.ErrorAnalysis.SaveCohort.save}
+            ariaLabel={localization.Interpret.CohortEditor.saveAriaLabel}
           />
           <DefaultButton
             onClick={(): void => {
               this.props.onDismiss();
               this.saveCohort(true);
             }}
+            ariaLabel={localization.Interpret.CohortEditor.saveAndSwitch}
           >
             {localization.Interpret.CohortEditor.saveAndSwitch}
           </DefaultButton>
           <DefaultButton
             onClick={this.props.onDismiss}
             text={localization.ErrorAnalysis.SaveCohort.cancel}
+            ariaLabel={localization.Interpret.CohortEditor.cancelAriaLabel}
           />
         </DialogFooter>
       </Dialog>

diff --git a/libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx b/libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx
@@ -125,10 +125,12 @@ export class ShiftCohort extends React.Component<
           <PrimaryButton
             onClick={this.onApplyClick}
             text={localization.Core.ShiftCohort.apply}
+            ariaLabel={localization.Core.ShiftCohort.applyAriaLabel}
           />
           <DefaultButton
             onClick={this.props.onDismiss}
             text={localization.Core.ShiftCohort.cancel}
+            ariaLabel={localization.Interpret.CohortEditor.cancelAriaLabel}
           />
         </DialogFooter>
       </Dialog>

diff --git a/libs/core-ui/src/lib/components/AxisConfigDialog.tsx b/libs/core-ui/src/lib/components/AxisConfigDialog.tsx
@@ -152,10 +152,16 @@ export class AxisConfigDialog extends React.PureComponent<
   private renderFooter = (): JSX.Element => {
     return (
       <Stack horizontal tokens={{ childrenGap: "l1", padding: "l1" }}>
-        <PrimaryButton onClick={this.saveState}>
+        <PrimaryButton
+          onClick={this.saveState}
+          ariaLabel={localization.Core.ShiftCohort.applyAriaLabel}
+        >
           {localization.Interpret.AxisConfigDialog.apply}
         </PrimaryButton>
-        <DefaultButton onClick={this.props.onCancel}>
+        <DefaultButton
+          onClick={this.props.onCancel}
+          ariaLabel={localization.Interpret.CohortEditor.cancelAriaLabel}
+        >
           {localization.Interpret.CohortEditor.cancel}
         </DefaultButton>
       </Stack>

diff --git a/libs/core-ui/src/lib/components/ConfirmationDialog.tsx b/libs/core-ui/src/lib/components/ConfirmationDialog.tsx
@@ -40,10 +40,12 @@ export class ConfirmationDialog extends React.Component<IConfirmationDialogProps
           <PrimaryButton
             onClick={this.props.onConfirm}
             text={this.props.confirmButtonText}
+            ariaLabel={this.props.confirmButtonText}
           />
           <DefaultButton
             onClick={this.props.onClose}
             text={this.props.cancelButtonText}
+            ariaLabel={this.props.cancelButtonText}
           />
         </DialogFooter>
       </Dialog>

diff --git a/libs/counterfactuals/src/lib/CounterfactualChartLegend.tsx b/libs/counterfactuals/src/lib/CounterfactualChartLegend.tsx
@@ -93,6 +93,7 @@ export class CounterfactualChartLegend extends React.PureComponent<ICounterfactu
               ? localization.Counterfactuals.createWhatIfCounterfactual
               : localization.Counterfactuals.createCounterfactual
           }
+          ariaLabel={localization.Counterfactuals.counterfactualAriaLabel}
         />
         {this.displayRevertButton() && (
           <DefaultButton

diff --git a/libs/counterfactuals/src/lib/CounterfactualPanel.tsx b/libs/counterfactuals/src/lib/CounterfactualPanel.tsx
@@ -227,6 +227,7 @@ export class CounterfactualPanel extends React.Component<
             className={classes.button}
             text={localization.Counterfactuals.saveAsNew}
             onClick={this.handleSavePoint}
+            ariaLabel={localization.Counterfactuals.saveAsNew}
           />
         </Stack.Item>
         <Stack.Item align="end" grow={3}>

diff --git a/libs/fairness/src/lib/Controls/BinDialog.tsx b/libs/fairness/src/lib/Controls/BinDialog.tsx
@@ -82,11 +82,13 @@ export class BinDialog extends React.PureComponent<
             className={styles.saveButton}
             text={localization.Fairness.BinDialog.save}
             onClick={this.onSave}
+            ariaLabel={localization.Fairness.BinDialog.saveAriaLabel}
           />
           <DefaultButton
             className={styles.cancelButton}
             text={localization.Fairness.BinDialog.cancel}
             onClick={this.props.onCancel}
+            ariaLabel={localization.Fairness.BinDialog.cancelAriaLabel}
           />
         </div>
       </div>

diff --git a/libs/fairness/src/lib/Controls/IntroTab.tsx b/libs/fairness/src/lib/Controls/IntroTab.tsx
@@ -88,6 +88,7 @@ export class IntroTab extends React.PureComponent<IIntroTabProps> {
               id="nextButton"
               className={styles.getStarted}
               onClick={this.onNext}
+              ariaLabel={localization.Fairness.Intro.getStarted}
             >
               {localization.Fairness.Intro.getStarted}
             </PrimaryButton>

diff --git a/libs/fairness/src/lib/Controls/WizardFooter.tsx b/libs/fairness/src/lib/Controls/WizardFooter.tsx
@@ -22,12 +22,14 @@ export class WizardFooter extends React.PureComponent<IWizardFooterProps> {
           className={styles.next}
           text={localization.Fairness.Footer.next}
           onClick={this.onNext}
+          ariaLabel={localization.Fairness.Footer.next}
         />
         {!!this.props.previousTabKey && (
           <DefaultButton
             className={styles.back}
             text={localization.Fairness.Footer.back}
             onClick={this.onPrevious}
+            ariaLabel={localization.Fairness.Footer.back}
           />
         )}
       </div>

diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/CohortToolBar.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/CohortToolBar.tsx
@@ -98,6 +98,7 @@ export class CohortToolBar extends React.Component<
             <PrimaryButton
               text={localization.InterpretVision.Cohort.save}
               onClick={this.openDialogue}
+              ariaLabel={localization.InterpretVision.Cohort.save}
             />
           </Stack.Item>
         </Stack>

diff --git a/libs/localization/src/lib/en.json b/libs/localization/src/lib/en.json
@@ -113,6 +113,7 @@
     },
     "ShiftCohort": {
       "apply": "Apply",
+      "applyAriaLabel": "Apply cohort",
       "cancel": "Cancel",
       "title": "Switch Cohort",
       "subText": "Select a cohort from the cohort list. Apply the cohort to the dashboard.",
@@ -155,6 +156,7 @@
     "counterfactualName": "What-if counterfactual name",
     "createWhatIfCounterfactual": "Create what-if counterfactual",
     "createCounterfactual": "Counterfactual",
+    "counterfactualAriaLabel": "Counterfactual creation",
     "revertToBubbleChart": "View bubble chart",
     "createOwn": "Create your own counterfactual:",
     "currentClass": "Current class",
@@ -484,11 +486,13 @@
     },
     "BinDialog": {
       "cancel": "Cancel",
+      "cancelAriaLabel": "Cancel binning",
       "categoryHeader": "Bin values:",
       "header": "Configure bins",
       "makeCategorical": "Treat as categorical",
       "numberOfBins": "Number of bins:",
-      "save": "Save"
+      "save": "Save",
+      "saveAriaLabel": "Save binning"
     },
     "DropdownHeaders": {
       "errorMetric": "Enable error bars",
@@ -922,8 +926,10 @@
       "_placeholderName.comment": "starting name for a new cohort",
       "_selectFilter.comment": "prompt to select an attribute to filter on",
       "addFilter": "Add filter",
+      "addFilterAriaLabel": "Add cohort filter",
       "addedFilters": "Filters",
       "cancel": "Cancel",
+      "cancelAriaLabel": "Cancel cohort",
       "cancelExistingCohort": "Are you sure you want to cancel editing cohort and go back?",
       "cancelNewCohort": "Are you sure you want to cancel creating a new cohort and go back?",
       "cancelNo": "No",
@@ -936,11 +942,13 @@
       "clearAllFilters": "Clear all filters",
       "defaultFilterState": "Select a filter to add parameters to your dataset cohort. Filters from your current viewing cohort are pre-populated.",
       "delete": "Delete",
+      "deleteAriaLabel": "Delete cohort",
       "invalidValueError": "Value should be between {0} and {1}",
       "minimumGreaterThanMaximum": "Minimum value inputs must be less than maximum value inputs.",
       "noAddedFilters": "No filters",
       "placeholderName": "Cohort {0}",
       "save": "Save",
+      "saveAriaLabel": "Save cohort",
       "saveAndSwitch": "Save and switch",
       "selectFilter": "Select filter",
       "noFiltersApplied": "No filters applied",
@@ -1486,7 +1494,7 @@
       "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",
+      "AddButtonAriaLabel": "Add dashboard",
       "CalloutTitle": "Add component",
       "TabAddedMessage": {
         "DataAnalysis": "Data analysis component added",
@@ -1514,14 +1522,17 @@
     "Cohort": {
       "apply": "Apply",
       "delete": "Delete",
+      "deleteAriaLabel": "Delete cohort",
       "cancel": "Cancel",
+      "cancelAriaLabel": "Cancel cohort",
       "cohortInfo": "Cohort info",
       "cohortList": "Cohort list",
       "deleteCohort": "Deleting {0}?",
       "deleteConfirm": "Are you sure you want to delete this cohort?",
       "selectCohort": "Select a cohort",
       "selectCohortAriaLabel": "Cohort selection",
       "shiftCohort": "Switch cohort",
+      "shiftCohortAriaLabel": "Switch cohort",
       "shiftCohortDescription": "Select a cohort from the cohort list. Apply the cohort to the dashboard."
     },
     "CohortInformation": {
@@ -2006,6 +2017,7 @@
       "selectCohort": "Select a time series",
       "selectCohortAriaLabel": "Time series selection",
       "shiftCohort": "Switch time series",
+      "shiftCohortAriaLabel": "Switch time series",
       "shiftCohortDescription": "Select a time series from the time series list. Apply the time series to the dashboard."
     },
     "TimeSeriesSettings": {

diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Cohort/CohortDeleteDialog.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Cohort/CohortDeleteDialog.tsx
@@ -49,10 +49,12 @@ export class CohortDeleteDialog extends React.Component<ICohortDeleteDialogProps
           <PrimaryButton
             onClick={this.props.onDeleteClick}
             text={localization.ModelAssessment.Cohort.delete}
+            ariaLabel={localization.ModelAssessment.Cohort.deleteAriaLabel}
           />
           <DefaultButton
             onClick={this.props.onDismiss}
             text={localization.ModelAssessment.Cohort.cancel}
+            ariaLabel={localization.ModelAssessment.Cohort.cancelAriaLabel}
           />
         </DialogFooter>
       </Dialog>

diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Cohort/ShiftCohort.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Cohort/ShiftCohort.tsx
@@ -130,10 +130,12 @@ export class ShiftCohort extends React.Component<
           <PrimaryButton
             onClick={this.shiftCohort}
             text={localizationBase.apply}
+            ariaLabel={localizationBase.shiftCohortAriaLabel}
           />
           <DefaultButton
             onClick={this.props.onDismiss}
             text={localizationBase.cancel}
+            ariaLabel={localization.Interpret.CohortEditor.cancelAriaLabel}
           />
         </DialogFooter>
       </Dialog>

diff --git a/...ment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ChartConfigurationFlyout.tsx b/...ment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ChartConfigurationFlyout.tsx
@@ -290,10 +290,16 @@ export class ChartConfigurationFlyout extends React.Component<
             this.state.newlySelectedDatasetCohorts,
             this.state.newlySelectedFeatureBasedCohorts
           )}
+          ariaLabel={
+            localization.ModelAssessment.ModelOverview.chartConfigApply
+          }
         />
         <DefaultButton
           onClick={this.onDismiss}
           text={localization.ModelAssessment.ModelOverview.chartConfigCancel}
+          ariaLabel={
+            localization.ModelAssessment.ModelOverview.chartConfigCancel
+          }
         />
       </Stack>
     );

diff --git a/...nt/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/FeatureConfigurationFlyout.tsx b/...nt/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/FeatureConfigurationFlyout.tsx
@@ -235,10 +235,16 @@ export class FeatureConfigurationFlyout extends React.Component<
               tooManyFeaturesSelected ||
               (!featureSelectionChanged && !continuousFeatureBinningChanged)
             }
+            ariaLabel={
+              localization.ModelAssessment.ModelOverview.chartConfigApply
+            }
           />
           <DefaultButton
             onClick={this.props.onDismissFlyout}
             text={localization.ModelAssessment.ModelOverview.chartConfigCancel}
+            ariaLabel={
+              localization.ModelAssessment.ModelOverview.chartConfigCancel
+            }
           />
         </Stack>
       </Stack>

diff --git a/...ent/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/MetricConfigurationFlyout.tsx b/...ent/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/MetricConfigurationFlyout.tsx
@@ -181,10 +181,16 @@ export class MetricConfigurationFlyout extends React.Component<
             onClick={this.onConfirm}
             text={localization.ModelAssessment.ModelOverview.chartConfigApply}
             disabled={noMetricsSelected}
+            ariaLabel={
+              localization.ModelAssessment.ModelOverview.chartConfigApply
+            }
           />
           <DefaultButton
             onClick={this.props.onDismissFlyout}
             text={localization.ModelAssessment.ModelOverview.chartConfigCancel}
+            ariaLabel={
+              localization.ModelAssessment.ModelOverview.chartConfigCancel
+            }
           />
         </Stack>
       </Stack>