added aria-labels to dropdowns

microsoft · Nov 14, 2023 · 36119ac · 36119ac
1 parent f726163
commit 36119ac
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 0 deletions.
diff --git a/libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx b/libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx
@@ -116,6 +116,7 @@ export class ShiftCohort extends React.Component<
           options={this.state.options}
           styles={dropdownStyles}
           onChange={this.onChange}
+          ariaLabel="Cohort list"
         />
         <CohortStats
           temporaryCohort={this.state.savedCohorts[this.state.selectedCohort]}

diff --git a/libs/core-ui/src/lib/components/OverallMetricChart.tsx b/libs/core-ui/src/lib/components/OverallMetricChart.tsx
@@ -115,6 +115,9 @@ export class OverallMetricChart extends React.PureComponent<
               selectedKey={this.state.selectedCohortIndex}
               onChange={this.setSelectedCohort}
               id={"modelPerformanceCohortPicker"}
+              ariaLabel={
+                localization.Interpret.DatasetExplorer.datasetCohortDropdown
+              }
             />
           </div>
         )}

diff --git a/libs/dataset-explorer/src/lib/DataBalanceView/FeatureBalanceMeasuresChart.tsx b/libs/dataset-explorer/src/lib/DataBalanceView/FeatureBalanceMeasuresChart.tsx
@@ -117,6 +117,7 @@ export class FeatureBalanceMeasuresChart extends React.PureComponent<
                     options={labelOptions}
                     selectedKey={this.state.selectedLabelIndex}
                     onChange={this.setSelectedLabel}
+                    ariaLabel="Positive label dropdown"
                   />
                 </Stack.Item>
               </Stack>
@@ -135,6 +136,7 @@ export class FeatureBalanceMeasuresChart extends React.PureComponent<
                     options={featureOptions}
                     selectedKey={this.state.selectedFeatureIndex}
                     onChange={this.setSelectedFeature}
+                    ariaLabel="Feature dropdown"
                   />
                 </Stack.Item>
               </Stack>
@@ -153,6 +155,7 @@ export class FeatureBalanceMeasuresChart extends React.PureComponent<
                     options={measureOptions}
                     selectedKey={this.state.selectedMeasureIndex}
                     onChange={this.setSelectedMeasure}
+                    ariaLabel="Measure dropdown"
                   />
                 </Stack.Item>
               </Stack>

diff --git a/libs/fairness/src/lib/Controls/DropdownBar.tsx b/libs/fairness/src/lib/Controls/DropdownBar.tsx
@@ -57,6 +57,7 @@ export class DropdownBar extends React.PureComponent<IDropdownBarProps> {
           options={featureOptions}
           disabled={false}
           onChange={this.props.parentFeatureChanged}
+          ariaLabel="Sensitive feature dropdown"
         />
         <Dropdown
           id="performanceMetricDropdown"
@@ -67,6 +68,7 @@ export class DropdownBar extends React.PureComponent<IDropdownBarProps> {
           options={performanceDropDown}
           disabled={false}
           onChange={this.props.parentPerformanceChanged}
+          ariaLabel="Performance metric dropdown"
         />
         <Dropdown
           style={{ minWidth: "240px" }}
@@ -78,6 +80,7 @@ export class DropdownBar extends React.PureComponent<IDropdownBarProps> {
           options={fairnessDropdown}
           disabled={false}
           onChange={this.props.parentFairnessChanged}
+          ariaLabel="Fairness metric dropdown"
         />
       </Stack>
     );

diff --git a/libs/fairness/src/lib/Controls/ReportChart.tsx b/libs/fairness/src/lib/Controls/ReportChart.tsx
@@ -116,6 +116,7 @@ export class ReportChart extends React.Component<IReportChartProps, IState> {
           options={displayOptions}
           disabled={false}
           onChange={this.onChange}
+          ariaLabel="Chart selection dropdown"
         />
         {this.state.chartKey === performanceKey && (
           <PerformancePlot

diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DataCharacteristics.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DataCharacteristics.tsx
@@ -96,6 +96,7 @@ export class DataCharacteristics extends React.Component<
                       options={this.state.labelTypeDropdownOptions}
                       selectedKey={this.state.labelType}
                       onChange={this.onLabelTypeChange}
+                      ariaLabel="Label type dropdown"
                     />
                   </Stack.Item>
                   <Stack.Item>
@@ -118,6 +119,7 @@ export class DataCharacteristics extends React.Component<
                       }
                       onChange={this.onLabelVisibilitySelect}
                       multiSelect
+                      ariaLabel="Label visibility dropdown"
                     />
                   </Stack.Item>
                 </Stack>

diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/PageSizeSelectors.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/PageSizeSelectors.tsx
@@ -42,6 +42,7 @@ export class PageSizeSelectors extends React.Component<IPageSizeSelectorsProps>
             defaultSelectedKey="3"
             options={NumRowsOptions}
             onChange={this.props.onNumRowsSelect}
+            ariaLabel="Number of rows per page"
           />
         </Stack.Item>
       </Stack>

diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.tsx
@@ -72,10 +72,12 @@ export class AddTabButton extends React.Component<
                 <Dropdown
                   options={this.props.availableTabs}
                   onChange={this.onChange}
+                  ariaLabel="Add dashboard component"
                 />
                 <PrimaryButton
                   onClick={this.addTab}
                   text={localization.ModelAssessment.AddingTab.AddButtonText}
+                  ariaLabel="Add dashboard button"
                 />
               </Stack>
             </Callout>

diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Cohort/ShiftCohort.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Cohort/ShiftCohort.tsx
@@ -116,6 +116,7 @@ export class ShiftCohort extends React.Component<
           selectedKey={this.state.selectedCohort}
           options={this.state.options}
           onChange={this.onChange}
+          ariaLabel="Time series selection dropdown"
         />
         <CohortEditorFilterList
           compositeFilters={

diff --git a/...ment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ChartConfigurationFlyout.tsx b/...ment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ChartConfigurationFlyout.tsx
@@ -227,6 +227,7 @@ export class ChartConfigurationFlyout extends React.Component<
                 .chartConfigDatasetCohortSelectionPlaceholder
             }
             disabled={!this.state.datasetCohortViewIsNewlySelected}
+            ariaLabel="Dataset cohort dropdown"
           />
           {this.props.featureBasedCohorts.length > 0 && (
             <Dropdown
@@ -250,6 +251,7 @@ export class ChartConfigurationFlyout extends React.Component<
                   .chartConfigFeatureBasedCohortSelectionPlaceholder
               }
               disabled={this.state.datasetCohortViewIsNewlySelected}
+              ariaLabel="Feature cohort dropdown"
             />
           )}
         </Stack>