added more localization

libs/counterfactuals/src/lib/CounterfactualChartLegend.tsx

@@ -93,7 +93,7 @@ export class CounterfactualChartLegend extends React.PureComponent<ICounterfactu
               ? localization.Counterfactuals.createWhatIfCounterfactual
               : localization.Counterfactuals.createCounterfactual
           }
-          ariaLabel="Counterfactual creation button"
+          ariaLabel={localization.Counterfactuals.counterfactualAriaLabel}
         />
         {this.displayRevertButton() && (
           <DefaultButton

libs/counterfactuals/src/lib/CounterfactualPanel.tsx

@@ -227,7 +227,7 @@ export class CounterfactualPanel extends React.Component<
             className={classes.button}
             text={localization.Counterfactuals.saveAsNew}
             onClick={this.handleSavePoint}
-            ariaLabel="Save as new datapoint button"
+            ariaLabel={localization.Counterfactuals.saveAsNewAriaLabel}
           />
         </Stack.Item>
         <Stack.Item align="end" grow={3}>

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

@@ -82,13 +82,13 @@ export class BinDialog extends React.PureComponent<
             className={styles.saveButton}
             text={localization.Fairness.BinDialog.save}
             onClick={this.onSave}
-            ariaLabel="Save binning button"
+            ariaLabel={localization.Fairness.BinDialog.saveAriaLabel}
           />
           <DefaultButton
             className={styles.cancelButton}
             text={localization.Fairness.BinDialog.cancel}
             onClick={this.props.onCancel}
-            ariaLabel="Cancel binning button"
+            ariaLabel={localization.Fairness.BinDialog.cancelAriaLabel}
           />
         </div>
       </div>

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

@@ -88,7 +88,7 @@ export class IntroTab extends React.PureComponent<IIntroTabProps> {
               id="nextButton"
               className={styles.getStarted}
               onClick={this.onNext}
-              ariaLabel="Get started button"
+              ariaLabel={localization.Fairness.Intro.getStartedAriaLabel}
             >
               {localization.Fairness.Intro.getStarted}
             </PrimaryButton>

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

@@ -22,14 +22,14 @@ export class WizardFooter extends React.PureComponent<IWizardFooterProps> {
           className={styles.next}
           text={localization.Fairness.Footer.next}
           onClick={this.onNext}
-          ariaLabel="Next button"
+          ariaLabel={localization.Fairness.Footer.nextAriaLabel}
         />
         {!!this.props.previousTabKey && (
           <DefaultButton
             className={styles.back}
             text={localization.Fairness.Footer.back}
             onClick={this.onPrevious}
-            ariaLabel="Back button"
+            ariaLabel={localization.Fairness.Footer.backAriaLabel}
           />
         )}
       </div>

libs/localization/src/lib/en.json

@@ -155,6 +155,7 @@
     "counterfactualName": "What-if counterfactual name",
     "createWhatIfCounterfactual": "Create what-if counterfactual",
     "createCounterfactual": "Counterfactual",
+    "counterfactualAriaLabel": "Counterfactual creation button",
     "revertToBubbleChart": "View bubble chart",
     "createOwn": "Create your own counterfactual:",
     "currentClass": "Current class",
@@ -180,6 +181,7 @@
     "recommendedPolicy": "Recommended policy gain",
     "referenceDatapoint": "Reference datapoint: Row {0}",
     "saveAsNew": "Save as new datapoint",
+    "saveAsNewAriaLabel": "Save as new datapoint button",
     "saveDescription": "These counterfactuals are based on the model's prediction, and therefore may be capturing the same correlations that were picked up by the model. We do not advise users to make real-life decisions based on this tool. Use our toolkit for causal analysis for real-life decision-making scenarios.",
     "seePrediction": "See prediction deltas",
     "selectedDatapoint": "Selected datapoint",
@@ -484,11 +486,13 @@
     },
     "BinDialog": {
       "cancel": "Cancel",
+      "cancelAriaLabel": "Cancel binning button",
       "categoryHeader": "Bin values:",
       "header": "Configure bins",
       "makeCategorical": "Treat as categorical",
       "numberOfBins": "Number of bins:",
-      "save": "Save"
+      "save": "Save",
+      "saveAriaLabel": "Save binning button"
     },
     "DropdownHeaders": {
       "errorMetric": "Enable error bars",
@@ -527,7 +531,9 @@
     },
     "Footer": {
       "back": "Back",
-      "next": "Next"
+      "backAriaLabel": "Back button",
+      "next": "Next",
+      "nextAriaLabel": "Next button"
     },
     "Header": {
       "documentation": "Documentation",
@@ -541,6 +547,7 @@
       "features": "Sensitive features",
       "featuresInfo": "Sensitive features are used to split your data into groups. Fairness of your model across these groups is measured by fairness metrics. Fairness metrics quantify how much your model's behavior varies across these groups.",
       "getStarted": "Get started",
+      "getStartedAriaLabel": "Get started button",
       "introBody": "The fairness dashboard enables you to assess tradeoffs between performance and fairness of your models",
       "performance": "Performance metric",
       "performanceInfo": "Performance metrics are used to evaluate the overall quality of your model as well as the quality of your model in each group. The difference between the extreme values of the performance metric across the groups is reported as the disparity in performance.",
@@ -1489,6 +1496,7 @@
   "ModelAssessment": {
     "AddingTab": {
       "AddButtonText": "Add",
+      "AddButtonTextAriaLabel": "Add tab button",
       "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.",
       "CalloutTitle": "Add component",
       "TabAddedMessage": {
@@ -1517,7 +1525,9 @@
     "Cohort": {
       "apply": "Apply",
       "delete": "Delete",
+      "deleteAriaLabel": "Delete cohort button",
       "cancel": "Cancel",
+      "cancelAriaLabel": "Cancel cohort button",
       "cohortInfo": "Cohort info",
       "cohortList": "Cohort list",
       "deleteCohort": "Deleting {0}?",
@@ -1894,7 +1904,9 @@
         "upperQuartile": "Upper quartile"
       },
       "chartConfigApply": "Apply",
+      "chartConfigApplyAriaLabel": "Apply button",
       "chartConfigCancel": "Cancel",
+      "chartConfigCancelAriaLabel": "Cancel button",
       "chartConfigDatasetCohortSelectionPlaceholder": "Select dataset cohorts",
       "chartConfigFeatureBasedCohortSelectionPlaceholder": "Select feature-based cohorts",
       "confusionMatrix": {

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

@@ -76,7 +76,7 @@ export class AddTabButton extends React.Component<
                 <PrimaryButton
                   onClick={this.addTab}
                   text={localization.ModelAssessment.AddingTab.AddButtonText}
-                  ariaLabel="Add tab button"
+                  ariaLabel={localization.ModelAssessment.AddingTab.AddButtonTextAriaLabel}
                 />
               </Stack>
             </Callout>

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

@@ -49,12 +49,12 @@ export class CohortDeleteDialog extends React.Component<ICohortDeleteDialogProps
           <PrimaryButton
             onClick={this.props.onDeleteClick}
             text={localization.ModelAssessment.Cohort.delete}
-            ariaLabel="Delete cohort button"
+            ariaLabel={localization.ModelAssessment.Cohort.deleteAriaLabel}
           />
           <DefaultButton
             onClick={this.props.onDismiss}
             text={localization.ModelAssessment.Cohort.cancel}
-            ariaLabel="Cancel button"
+            ariaLabel={localization.ModelAssessment.Cohort.cancelAriaLabel}
           />
         </DialogFooter>
       </Dialog>

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

@@ -282,12 +282,12 @@ export class ChartConfigurationFlyout extends React.Component<
             this.state.newlySelectedDatasetCohorts,
             this.state.newlySelectedFeatureBasedCohorts
           )}
-          ariaLabel="Apply button"
+          ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigApplyAriaLabel}
         />
         <DefaultButton
           onClick={this.onDismiss}
           text={localization.ModelAssessment.ModelOverview.chartConfigCancel}
-          ariaLabel="Cancel button"
+          ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigCancelAriaLabel}
         />
       </Stack>
     );

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

@@ -227,12 +227,12 @@ export class FeatureConfigurationFlyout extends React.Component<
               tooManyFeaturesSelected ||
               (!featureSelectionChanged && !continuousFeatureBinningChanged)
             }
-            ariaLabel="Apply button"
+            ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigApplyAriaLabel}
           />
           <DefaultButton
             onClick={this.props.onDismissFlyout}
             text={localization.ModelAssessment.ModelOverview.chartConfigCancel}
-            ariaLabel="Cancel button"
+            ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigCancelAriaLabel}
           />
         </Stack>
       </Stack>

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

@@ -173,12 +173,12 @@ export class MetricConfigurationFlyout extends React.Component<
             onClick={this.onConfirm}
             text={localization.ModelAssessment.ModelOverview.chartConfigApply}
             disabled={noMetricsSelected}
-            ariaLabel="Apply button"
+            ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigApplyAriaLabel}
           />
           <DefaultButton
             onClick={this.props.onDismissFlyout}
             text={localization.ModelAssessment.ModelOverview.chartConfigCancel}
-            ariaLabel="Cancel button"
+            ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigCancelAriaLabel}
           />
         </Stack>
       </Stack>

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

@@ -179,14 +179,14 @@ export class ModelOverviewMetricChart extends React.Component<
             this.props.onApplyMetric(this.state.newlySelectedMetric);
           }}
           text={localization.ModelAssessment.ModelOverview.chartConfigApply}
-          ariaLabel="Apply button"
+          ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigApplyAriaLabel}
         />
         <DefaultButton
           onClick={(): void => {
             this.setState({ metricSelectionFlyoutIsVisible: false });
           }}
           text={localization.ModelAssessment.ModelOverview.chartConfigCancel}
-          ariaLabel="Cancel button"
+          ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigCancelAriaLabel}
         />
       </Stack>
     );

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

@@ -209,14 +209,14 @@ export class ProbabilityDistributionChart extends React.Component<
             }
           }}
           text={localization.ModelAssessment.ModelOverview.chartConfigApply}
-          ariaLabel="Apply button"
+          ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigApplyAriaLabel}
         />
         <DefaultButton
           onClick={(): void => {
             this.setState({ probabilityFlyoutIsVisible: false });
           }}
           text={localization.ModelAssessment.ModelOverview.chartConfigCancel}
-          ariaLabel="Cancel button"
+          ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigCancelAriaLabel}
         />
       </Stack>
     );

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

@@ -274,14 +274,14 @@ export class RegressionDistributionChart extends React.Component<
             }
           }}
           text={localization.ModelAssessment.ModelOverview.chartConfigApply}
-          ariaLabel="Apply button"
+          ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigApplyAriaLabel}
         />
         <DefaultButton
           onClick={(): void => {
             this.setState({ targetFlyoutIsVisible: false });
           }}
           text={localization.ModelAssessment.ModelOverview.chartConfigCancel}
-          ariaLabel="Cancel button"
+          ariaLabel={localization.ModelAssessment.ModelOverview.chartConfigCancelAriaLabel}
         />
       </Stack>
     );