[Search] Choose connector a11y improvement (elastic#201590)

## Summary This PR fixes some a11y and responsive related issues like: - elastic/search-team#8666 - elastic#197622 Some of the improvements are: - The custom dropdown content truncates the connector name content when there is not enough space - The `EuiComoBox` wrapping Flex item it slightly bigger compared with the connectors name and it gets full width when reaching the `"l"` breakpoint in order to better display its content in different resolutions - The badges now are display horizontally when there are more than one. - Each `EuiComboBoxOptionOption` now has a custom `aria-label` where users can get a better info using screen reader informing for instance "Slack, Tech preview" This should fix the redundancy described in this issue elastic#197622 - Deleting the selection either pressing Space or Backspace displays the dropdown content options https://github.com/user-attachments/assets/c4494908-2849-4f95-84e9-25a60a5a05ab ![CleanShot 2024-11-25 at 15 25 36@2x](https://github.com/user-attachments/assets/caa27feb-cb3b-443f-b5c8-37cc1d823fe6)
pheyos · Nov 26, 2024 · e0607f7 · e0607f7
1 parent 61d0320
commit e0607f7
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 75 deletions.
diff --git a/...omponents/choose_connector_selectable.tsx → ...connector/components/choose_connector.tsx b/...omponents/choose_connector_selectable.tsx → ...connector/components/choose_connector.tsx
@@ -7,6 +7,7 @@
 
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { css } from '@emotion/react';
 import { useActions, useValues } from 'kea';
 
 import {
@@ -18,11 +19,18 @@ import {
   EuiFlexGroup,
   EuiText,
   useEuiTheme,
+  EuiTextTruncate,
+  EuiBadgeGroup,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
 import connectorLogo from '../../../../../../assets/images/connector.svg';
+import {
+  BETA_LABEL,
+  TECH_PREVIEW_LABEL,
+  CONNECTOR_CLIENT_LABEL,
+} from '../../../../../shared/constants';
 import { KibanaLogic } from '../../../../../shared/kibana';
 import { NewConnectorLogic } from '../../../new_index/method_connector/new_connector_logic';
 import { SelfManagePreference } from '../create_connector';
@@ -34,9 +42,7 @@ interface OptionData {
   secondaryContent?: string;
 }
 
-export const ChooseConnectorSelectable: React.FC<ChooseConnectorSelectableProps> = ({
-  selfManaged,
-}) => {
+export const ChooseConnector: React.FC<ChooseConnectorSelectableProps> = ({ selfManaged }) => {
   const { euiTheme } = useEuiTheme();
   const [selectedOption, setSelectedOption] = useState<Array<EuiComboBoxOptionOption<OptionData>>>(
     []
@@ -52,20 +58,26 @@ export const ChooseConnectorSelectable: React.FC<ChooseConnectorSelectableProps>
     };
     return (
       <EuiFlexGroup
-        gutterSize="m"
-        key={key + '-span'}
-        justifyContent="spaceBetween"
         className={contentClassName}
+        key={key + '-span'}
+        gutterSize="m"
+        responsive={false}
+        direction="row"
       >
-        <EuiFlexGroup gutterSize="m">
-          <EuiFlexItem grow={false}>{_prepend}</EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiText size="s" textAlign="left">
-              {label}
-            </EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiFlexItem grow={false}>{_append}</EuiFlexItem>
+        <EuiFlexItem grow={false}>{_prepend}</EuiFlexItem>
+        <EuiFlexItem
+          css={css`
+            overflow: auto;
+          `}
+          grow
+        >
+          <EuiText textAlign="left" size="s">
+            <EuiTextTruncate text={label} truncation="end" />
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiBadgeGroup gutterSize="xs">{_append}</EuiBadgeGroup>
+        </EuiFlexItem>
       </EuiFlexGroup>
     );
   };
@@ -83,43 +95,39 @@ export const ChooseConnectorSelectable: React.FC<ChooseConnectorSelectableProps>
   const getInitialOptions = () => {
     return allConnectors.map((connector, key) => {
       const _append: JSX.Element[] = [];
+      let _ariaLabelAppend = '';
       if (connector.isTechPreview) {
         _append.push(
-          <EuiBadge key={key + '-preview'} iconType="beaker" color="hollow">
-            {i18n.translate(
-              'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.thechPreviewBadgeLabel',
-              { defaultMessage: 'Tech preview' }
-            )}
+          <EuiBadge
+            aria-label={TECH_PREVIEW_LABEL}
+            key={key + '-preview'}
+            iconType="beaker"
+            color="hollow"
+          >
+            {TECH_PREVIEW_LABEL}
           </EuiBadge>
         );
+        _ariaLabelAppend += `, ${TECH_PREVIEW_LABEL}`;
       }
       if (connector.isBeta) {
         _append.push(
-          <EuiBadge key={key + '-beta'} iconType={'beta'} color="hollow">
-            {i18n.translate(
-              'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.BetaBadgeLabel',
-              {
-                defaultMessage: 'Beta',
-              }
-            )}
+          <EuiBadge aria-label={BETA_LABEL} key={key + '-beta'} iconType={'beta'} color="hollow">
+            {BETA_LABEL}
           </EuiBadge>
         );
+        _ariaLabelAppend += `, ${BETA_LABEL}`;
       }
       if (selfManaged === 'native' && !connector.isNative) {
         _append.push(
           <EuiBadge key={key + '-self'} iconType={'warning'} color="warning">
-            {i18n.translate(
-              'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.OnlySelfManagedBadgeLabel',
-              {
-                defaultMessage: 'Self managed',
-              }
-            )}
+            {CONNECTOR_CLIENT_LABEL}
           </EuiBadge>
         );
       }
       return {
         _append,
         _prepend: <EuiIcon size="l" type={connector.iconPath} />,
+        'aria-label': connector.name + _ariaLabelAppend,
         key: key.toString(),
         label: connector.name,
       };
@@ -133,33 +141,31 @@ export const ChooseConnectorSelectable: React.FC<ChooseConnectorSelectableProps>
   }, [selfManaged]);
 
   return (
-    <EuiFlexItem>
-      <EuiComboBox
-        aria-label={i18n.translate(
-          'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.euiComboBox.accessibleScreenReaderLabelLabel',
-          { defaultMessage: 'Select a data source for your connector to use.' }
-        )}
-        prepend={<EuiIcon type={selectedConnector?.iconPath ?? connectorLogo} size="l" />}
-        singleSelection
-        fullWidth
-        placeholder={i18n.translate(
-          'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.placeholder.text',
-          { defaultMessage: 'Choose a data source' }
-        )}
-        options={selectableOptions}
-        selectedOptions={selectedOption}
-        onChange={(selectedItem) => {
-          setSelectedOption(selectedItem);
-          if (selectedItem.length === 0) {
-            setSelectedConnector(null);
-            return;
-          }
-          const keySelected = Number(selectedItem[0].key);
-          setSelectedConnector(allConnectors[keySelected]);
-        }}
-        renderOption={renderOption}
-        rowHeight={(euiTheme.base / 2) * 5}
-      />
-    </EuiFlexItem>
+    <EuiComboBox
+      aria-label={i18n.translate(
+        'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.euiComboBox.accessibleScreenReaderLabelLabel',
+        { defaultMessage: 'Select a data source for your connector to use.' }
+      )}
+      prepend={<EuiIcon type={selectedConnector?.iconPath ?? connectorLogo} size="l" />}
+      singleSelection
+      fullWidth
+      placeholder={i18n.translate(
+        'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.placeholder.text',
+        { defaultMessage: 'Choose a data source' }
+      )}
+      options={selectableOptions}
+      selectedOptions={selectedOption}
+      onChange={(selectedItem) => {
+        setSelectedOption(selectedItem);
+        if (selectedItem.length === 0) {
+          setSelectedConnector(null);
+          return;
+        }
+        const keySelected = Number(selectedItem[0].key);
+        setSelectedConnector(allConnectors[keySelected]);
+      }}
+      renderOption={renderOption}
+      rowHeight={(euiTheme.base / 2) * 5}
+    />
   );
 };
diff --git a/...lications/enterprise_search_content/components/connectors/create_connector/start_step.tsx b/...lications/enterprise_search_content/components/connectors/create_connector/start_step.tsx
@@ -20,6 +20,7 @@ import {
   EuiRadio,
   EuiSpacer,
   EuiText,
+  useIsWithinBreakpoints,
   EuiTitle,
   useGeneratedHtmlId,
 } from '@elastic/eui';
@@ -33,7 +34,7 @@ import { GeneratedConfigFields } from '../../connector_detail/components/generat
 import { ConnectorViewLogic } from '../../connector_detail/connector_view_logic';
 import { NewConnectorLogic } from '../../new_index/method_connector/new_connector_logic';
 
-import { ChooseConnectorSelectable } from './components/choose_connector_selectable';
+import { ChooseConnector } from './components/choose_connector';
 import { ConnectorDescriptionPopover } from './components/connector_description_popover';
 import { ManualConfiguration } from './components/manual_configuration';
 import { SelfManagePreference } from './create_connector';
@@ -53,6 +54,7 @@ export const StartStep: React.FC<StartStepProps> = ({
   onSelfManagePreferenceChange,
   error,
 }) => {
+  const isMediumDevice = useIsWithinBreakpoints(['xs', 's', 'm', 'l']);
   const elasticManagedRadioButtonId = useGeneratedHtmlId({ prefix: 'elasticManagedRadioButton' });
   const selfManagedRadioButtonId = useGeneratedHtmlId({ prefix: 'selfManagedRadioButton' });
 
@@ -93,19 +95,19 @@ export const StartStep: React.FC<StartStepProps> = ({
               <h3>{title}</h3>
             </EuiTitle>
             <EuiSpacer size="m" />
-            <EuiFlexGroup>
-              <EuiFlexItem>
+            <EuiFlexGroup direction={isMediumDevice ? 'column' : 'row'}>
+              <EuiFlexItem grow={7}>
                 <EuiFormRow
                   fullWidth
                   label={i18n.translate(
                     'xpack.enterpriseSearch.createConnector.startStep.euiFormRow.connectorLabel',
                     { defaultMessage: 'Connector' }
                   )}
                 >
-                  <ChooseConnectorSelectable selfManaged={selfManagePreference} />
+                  <ChooseConnector selfManaged={selfManagePreference} />
                 </EuiFormRow>
               </EuiFlexItem>
-              <EuiFlexItem>
+              <EuiFlexItem grow={5}>
                 <EuiFormRow
                   fullWidth
                   isInvalid={!!error}

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/constants/labels.ts b/x-pack/plugins/enterprise_search/public/applications/shared/constants/labels.ts
@@ -27,6 +27,10 @@ export const BETA_LABEL = i18n.translate('xpack.enterpriseSearch.betaLabel', {
   defaultMessage: 'Beta',
 });
 
+export const TECH_PREVIEW_LABEL = i18n.translate('xpack.enterpriseSearch.techPreviewLabel', {
+  defaultMessage: 'Tech preview',
+});
+
 export const NATIVE_LABEL = i18n.translate('xpack.enterpriseSearch.nativeLabel', {
   defaultMessage: 'Elastic managed',
 });

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -18302,10 +18302,7 @@
     "xpack.enterpriseSearch.createConnector..title": "Créer un connecteur",
     "xpack.enterpriseSearch.createConnector.badgeType.ElasticManaged": "Géré par Elastic",
     "xpack.enterpriseSearch.createConnector.badgeType.selfManaged": "Autogéré",
-    "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.BetaBadgeLabel": "Bêta",
-    "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.OnlySelfManagedBadgeLabel": "Autogéré",
     "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.placeholder.text": "Choisir une source de données",
-    "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.thechPreviewBadgeLabel": "Préversion technique",
     "xpack.enterpriseSearch.createConnector.configurationStep.configurationLabel": "Configuration",
     "xpack.enterpriseSearch.createConnector.configurationStep.h4.finishUpLabel": "Terminer",
     "xpack.enterpriseSearch.createConnector.configurationStep.p.description": "Vous pouvez synchroniser manuellement vos données, planifier une synchronisation récurrente ou gérer vos domaines.",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -18276,10 +18276,7 @@
     "xpack.enterpriseSearch.createConnector..title": "コネクターを作成する",
     "xpack.enterpriseSearch.createConnector.badgeType.ElasticManaged": "Elasticマネージド",
     "xpack.enterpriseSearch.createConnector.badgeType.selfManaged": "自己管理",
-    "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.BetaBadgeLabel": "ベータ",
-    "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.OnlySelfManagedBadgeLabel": "自己管理",
     "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.placeholder.text": "データソースを選択",
-    "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.thechPreviewBadgeLabel": "テクニカルプレビュー",
     "xpack.enterpriseSearch.createConnector.configurationStep.configurationLabel": "構成",
     "xpack.enterpriseSearch.createConnector.configurationStep.h4.finishUpLabel": "終了",
     "xpack.enterpriseSearch.createConnector.configurationStep.p.description": "データを手動で同期したり、繰り返し同期をスケジュールしたり、ドメインを管理したりできます。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -17939,10 +17939,7 @@
     "xpack.enterpriseSearch.createConnector..title": "创建连接器",
     "xpack.enterpriseSearch.createConnector.badgeType.ElasticManaged": "Elastic 托管",
     "xpack.enterpriseSearch.createConnector.badgeType.selfManaged": "自管型",
-    "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.BetaBadgeLabel": "公测版",
-    "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.OnlySelfManagedBadgeLabel": "自管型",
     "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.placeholder.text": "选择数据源",
-    "xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.thechPreviewBadgeLabel": "技术预览",
     "xpack.enterpriseSearch.createConnector.configurationStep.configurationLabel": "配置",
     "xpack.enterpriseSearch.createConnector.configurationStep.h4.finishUpLabel": "结束",
     "xpack.enterpriseSearch.createConnector.configurationStep.p.description": "您可以手动同步数据，计划重复同步或管理您的域。",