[Exploratory View] Disable form row for super select (#118093)

* Disable form row for super select. The super select seems not to receive focus when clicking the form row, even when it's enabled. * Improve report selection accessibility. * Implement style change from PR feedback. * Prepend label instead of expanding header size. Co-authored-by: Kibana Machine <[email protected]>
elastic · Nov 29, 2021 · d0070c9 · d0070c9
1 parent 3d12af4
commit d0070c9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/...ty/public/components/shared/exploratory_view/series_editor/columns/report_type_select.tsx b/...ty/public/components/shared/exploratory_view/series_editor/columns/report_type_select.tsx
@@ -35,7 +35,11 @@ export const reportTypesList: Array<{
   { reportType: 'device-data-distribution', label: DEVICE_DISTRIBUTION_LABEL },
 ];
 
-export function ReportTypesSelect() {
+interface Props {
+  prepend: string;
+}
+
+export function ReportTypesSelect({ prepend }: Props) {
   const { setReportType, reportType: selectedReportType, allSeries } = useSeriesStorage();
 
   const onReportTypeChange = (reportType: ReportViewType) => {
@@ -52,12 +56,14 @@ export function ReportTypesSelect() {
 
   return (
     <EuiSuperSelect
+      aria-labelledby="report-type-label"
       options={options}
       valueOfSelected={selectedReportType ?? SELECT_REPORT_TYPE}
       onChange={(value) => onReportTypeChange(value as ReportViewType)}
       style={{ minWidth: 200 }}
       isInvalid={!selectedReportType && allSeries.length > 0}
       disabled={allSeries.length > 0}
+      prepend={prepend}
     />
   );
 }
diff --git a/...s/observability/public/components/shared/exploratory_view/series_editor/series_editor.tsx b/...s/observability/public/components/shared/exploratory_view/series_editor/series_editor.tsx
@@ -118,8 +118,12 @@ export const SeriesEditor = React.memo(function () {
       <div>
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
-            <EuiFormRow label={REPORT_TYPE_LABEL} display="columnCompressed">
-              <ReportTypesSelect />
+            <EuiFormRow
+              aria-label={REPORT_TYPE_ARIA_LABEL}
+              id="report-type-label"
+              isDisabled={true}
+            >
+              <ReportTypesSelect prepend={REPORT_TYPE_LABEL} />
             </EuiFormRow>
           </EuiFlexItem>
           <EuiFlexItem>
@@ -205,3 +209,10 @@ export const REPORT_TYPE_LABEL = i18n.translate(
     defaultMessage: 'Report type',
   }
 );
+
+export const REPORT_TYPE_ARIA_LABEL = i18n.translate(
+  'xpack.observability.expView.seriesBuilder.reportType.aria',
+  {
+    defaultMessage: 'This select allows you to choose the type of report you wish to create',
+  }
+);