From 96b35743e495c208c71d8114d03c3af517428e4a Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Wed, 22 Nov 2023 11:58:26 -0500 Subject: [PATCH] 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 --- .../src/lib/Cohort/EditCohort/EditCohort.tsx | 17 ++++++++++++++--- .../ManualCohortManagement/CohortEditor.tsx | 8 +++++++- .../CohortEditorFilter.tsx | 7 +++++++ .../ManualCohortManagement/CohortList.tsx | 2 ++ .../src/lib/Cohort/SaveCohort/SaveCohort.tsx | 3 +++ .../src/lib/Cohort/ShiftCohort/ShiftCohort.tsx | 2 ++ .../src/lib/components/AxisConfigDialog.tsx | 10 ++++++++-- .../src/lib/components/ConfirmationDialog.tsx | 2 ++ .../src/lib/CounterfactualChartLegend.tsx | 1 + .../src/lib/CounterfactualPanel.tsx | 1 + libs/fairness/src/lib/Controls/BinDialog.tsx | 2 ++ libs/fairness/src/lib/Controls/IntroTab.tsx | 1 + libs/fairness/src/lib/Controls/WizardFooter.tsx | 2 ++ .../Controls/CohortToolBar.tsx | 1 + libs/localization/src/lib/en.json | 16 ++++++++++++++-- .../Cohort/CohortDeleteDialog.tsx | 2 ++ .../Cohort/ShiftCohort.tsx | 2 ++ .../ModelOverview/ChartConfigurationFlyout.tsx | 6 ++++++ .../FeatureConfigurationFlyout.tsx | 6 ++++++ .../ModelOverview/MetricConfigurationFlyout.tsx | 6 ++++++ .../ModelOverview/ModelOverviewMetricChart.tsx | 6 ++++++ .../ProbabilityDistributionChart.tsx | 6 ++++++ .../RegressionDistributionChart.tsx | 14 +++++++------- 23 files changed, 108 insertions(+), 15 deletions(-) diff --git a/libs/core-ui/src/lib/Cohort/EditCohort/EditCohort.tsx b/libs/core-ui/src/lib/Cohort/EditCohort/EditCohort.tsx index 9aa7c20017..7f12f124fe 100644 --- 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< - - + + diff --git a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditor.tsx b/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditor.tsx index 44cc717af1..9c550fede9 100644 --- a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditor.tsx +++ b/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditor.tsx @@ -115,6 +115,7 @@ 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} @@ -122,16 +123,21 @@ export class CohortEditor extends React.PureComponent< this.saveCohort()} disabled={this.isSaveDisabled()} + ariaLabel={localization.Interpret.CohortEditor.saveAriaLabel} > {localization.Interpret.CohortEditor.save} this.saveCohort(true)} disabled={this.isSaveDisabled()} + ariaLabel={localization.Interpret.CohortEditor.saveAndSwitch} > {localization.Interpret.CohortEditor.saveAndSwitch} - + {localization.Interpret.CohortEditor.cancel} diff --git a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditorFilter.tsx b/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortEditorFilter.tsx index 5d42f6a036..964a76009b 100644 --- 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 this.props.saveState(this.props.filterIndex) } + ariaLabel={localization.Interpret.CohortEditor.saveAriaLabel} /> this.props.cancelFilter()} + ariaLabel={ + localization.Interpret.CohortEditor.cancelAriaLabel + } /> @@ -168,6 +172,9 @@ export class CohortEditorFilter extends React.Component )} diff --git a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortList.tsx b/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortList.tsx index 86effc0636..25130e23ba 100644 --- a/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortList.tsx +++ b/libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortList.tsx @@ -39,6 +39,7 @@ export class CohortList extends React.PureComponent { text={localization.Interpret.CohortBanner.addCohort} iconProps={{ iconName: "Add" }} styles={{ label: { whiteSpace: "nowrap" } }} + ariaLabel={localization.Interpret.CohortBanner.addCohort} /> { text={localization.Interpret.CohortBanner.editCohort} iconProps={{ iconName: "Edit" }} styles={{ label: { whiteSpace: "nowrap" } }} + ariaLabel={localization.Interpret.CohortBanner.editCohort} /> diff --git a/libs/core-ui/src/lib/Cohort/SaveCohort/SaveCohort.tsx b/libs/core-ui/src/lib/Cohort/SaveCohort/SaveCohort.tsx index 1b940517dd..cf712ddf50 100644 --- 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} /> { this.props.onDismiss(); this.saveCohort(true); }} + ariaLabel={localization.Interpret.CohortEditor.saveAndSwitch} > {localization.Interpret.CohortEditor.saveAndSwitch} diff --git a/libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx b/libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx index 4595c1ad68..4fa2ab46ef 100644 --- 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< diff --git a/libs/core-ui/src/lib/components/AxisConfigDialog.tsx b/libs/core-ui/src/lib/components/AxisConfigDialog.tsx index 8c89460de7..afa87b72f4 100644 --- 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 ( - + {localization.Interpret.AxisConfigDialog.apply} - + {localization.Interpret.CohortEditor.cancel} diff --git a/libs/core-ui/src/lib/components/ConfirmationDialog.tsx b/libs/core-ui/src/lib/components/ConfirmationDialog.tsx index 63748b35dc..ea2329213b 100644 --- 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 diff --git a/libs/counterfactuals/src/lib/CounterfactualChartLegend.tsx b/libs/counterfactuals/src/lib/CounterfactualChartLegend.tsx index ce96b44b02..fb90cb7a2d 100644 --- a/libs/counterfactuals/src/lib/CounterfactualChartLegend.tsx +++ b/libs/counterfactuals/src/lib/CounterfactualChartLegend.tsx @@ -93,6 +93,7 @@ export class CounterfactualChartLegend extends React.PureComponent {this.displayRevertButton() && ( diff --git a/libs/fairness/src/lib/Controls/BinDialog.tsx b/libs/fairness/src/lib/Controls/BinDialog.tsx index c7d480ecc6..410b73bd45 100644 --- 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} /> diff --git a/libs/fairness/src/lib/Controls/IntroTab.tsx b/libs/fairness/src/lib/Controls/IntroTab.tsx index beba7dff0e..65cbfeb59a 100644 --- 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 { id="nextButton" className={styles.getStarted} onClick={this.onNext} + ariaLabel={localization.Fairness.Intro.getStarted} > {localization.Fairness.Intro.getStarted} diff --git a/libs/fairness/src/lib/Controls/WizardFooter.tsx b/libs/fairness/src/lib/Controls/WizardFooter.tsx index 4209428632..729d18569a 100644 --- 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 { className={styles.next} text={localization.Fairness.Footer.next} onClick={this.onNext} + ariaLabel={localization.Fairness.Footer.next} /> {!!this.props.previousTabKey && ( )} diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/CohortToolBar.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/CohortToolBar.tsx index 97dea97fa7..f26c3f2b85 100644 --- 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< diff --git a/libs/localization/src/lib/en.json b/libs/localization/src/lib/en.json index c8abe306a1..da062b2610 100644 --- 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,7 +1522,9 @@ "Cohort": { "apply": "Apply", "delete": "Delete", + "deleteAriaLabel": "Delete cohort", "cancel": "Cancel", + "cancelAriaLabel": "Cancel cohort", "cohortInfo": "Cohort info", "cohortList": "Cohort list", "deleteCohort": "Deleting {0}?", @@ -1522,6 +1532,7 @@ "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 index 1b1706d247..739f4f5d16 100644 --- 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 diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Cohort/ShiftCohort.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Cohort/ShiftCohort.tsx index 0bb2b348e0..b2ba110b70 100644 --- 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< diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ChartConfigurationFlyout.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ChartConfigurationFlyout.tsx index 27cf16b933..33184db25d 100644 --- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ChartConfigurationFlyout.tsx +++ b/libs/model-assessment/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 + } /> ); diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/FeatureConfigurationFlyout.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/FeatureConfigurationFlyout.tsx index 1387aba44f..eaf66b61cf 100644 --- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/FeatureConfigurationFlyout.tsx +++ b/libs/model-assessment/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 + } /> diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/MetricConfigurationFlyout.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/MetricConfigurationFlyout.tsx index 57ef1bfe8d..5a8b8f770a 100644 --- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/MetricConfigurationFlyout.tsx +++ b/libs/model-assessment/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 + } /> diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverviewMetricChart.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverviewMetricChart.tsx index 5c92fdf520..3d20885ff2 100644 --- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverviewMetricChart.tsx +++ b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverviewMetricChart.tsx @@ -179,12 +179,18 @@ export class ModelOverviewMetricChart extends React.Component< this.props.onApplyMetric(this.state.newlySelectedMetric); }} text={localization.ModelAssessment.ModelOverview.chartConfigApply} + ariaLabel={ + localization.ModelAssessment.ModelOverview.chartConfigApply + } /> { this.setState({ metricSelectionFlyoutIsVisible: false }); }} text={localization.ModelAssessment.ModelOverview.chartConfigCancel} + ariaLabel={ + localization.ModelAssessment.ModelOverview.chartConfigCancel + } /> ); diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ProbabilityDistributionChart.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ProbabilityDistributionChart.tsx index 089d27c8ec..359ff2d6a5 100644 --- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ProbabilityDistributionChart.tsx +++ b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ProbabilityDistributionChart.tsx @@ -209,12 +209,18 @@ export class ProbabilityDistributionChart extends React.Component< } }} text={localization.ModelAssessment.ModelOverview.chartConfigApply} + ariaLabel={ + localization.ModelAssessment.ModelOverview.chartConfigApply + } /> { this.setState({ probabilityFlyoutIsVisible: false }); }} text={localization.ModelAssessment.ModelOverview.chartConfigCancel} + ariaLabel={ + localization.ModelAssessment.ModelOverview.chartConfigCancel + } /> ); diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/RegressionDistributionChart.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/RegressionDistributionChart.tsx index 21571dc537..fec27af32d 100644 --- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/RegressionDistributionChart.tsx +++ b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/RegressionDistributionChart.tsx @@ -126,16 +126,11 @@ export class RegressionDistributionChart extends React.Component< return; } - if (targetOptions.length === 0) { - return React.Fragment; - } - - if (this.state.targetOption === undefined) { + if (targetOptions.length === 0 || this.state.targetOption === undefined) { return React.Fragment; } const noCohortSelected = this.props.cohorts.length === 0; - const selectedCohortNames = this.props.cohorts.map( (cohort) => cohort.cohort.name ); @@ -217,7 +212,6 @@ export class RegressionDistributionChart extends React.Component< } }} /> - { this.setState({ targetFlyoutIsVisible: false }); }} text={localization.ModelAssessment.ModelOverview.chartConfigCancel} + ariaLabel={ + localization.ModelAssessment.ModelOverview.chartConfigCancel + } /> );