[8.16] [Search] Choose connector a11y improvement (#201590) (#201727)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Search] Choose connector a11y improvement
(#201590)](https://github.com/elastic/kibana/pull/201590)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"José Luis
González","email":"joseluisgj@gmail.com"},"sourceCommit":{"committedDate":"2024-11-26T08:49:38Z","message":"[Search]
Choose connector a11y improvement (#201590)\n\n## Summary\r\n\r\nThis PR
fixes some a11y and responsive related issues like:\r\n\r\n-
https://github.com/elastic/search-team/issues/8666\r\n-
https://github.com/elastic/kibana/issues/197622\r\n\r\nSome of the
improvements are:\r\n- The custom dropdown content truncates the
connector name content when\r\nthere is not enough space\r\n- The
`EuiComoBox` wrapping Flex item it slightly bigger compared with\r\nthe
connectors name and it gets full width when reaching the
`\"l\"`\r\nbreakpoint in order to better display its content in
different\r\nresolutions\r\n- The badges now are display horizontally
when there are more than one.\r\n- Each `EuiComboBoxOptionOption` now
has a custom `aria-label` where\r\nusers can get a better info using
screen reader informing for instance\r\n\"Slack, Tech preview\" This
should fix the redundancy described in this\r\nissue
https://github.com/elastic/kibana/issues/197622\r\n- Deleting the
selection either pressing Space or Backspace displays the\r\ndropdown
content
options\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/c4494908-2849-4f95-84e9-25a60a5a05ab\r\n\r\n![CleanShot
2024-11-25 at 15
25\r\n36@2x](https://github.com/user-attachments/assets/caa27feb-cb3b-443f-b5c8-37cc1d823fe6)","sha":"e0607f7fadd0147a1372da62584a585d21e3eda8","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Project:Accessibility","v9.0.0","Team:Search","backport:version","v8.16.2"],"title":"[Search]
Choose connector a11y
improvement","number":201590,"url":"https://github.com/elastic/kibana/pull/201590","mergeCommit":{"message":"[Search]
Choose connector a11y improvement (#201590)\n\n## Summary\r\n\r\nThis PR
fixes some a11y and responsive related issues like:\r\n\r\n-
https://github.com/elastic/search-team/issues/8666\r\n-
https://github.com/elastic/kibana/issues/197622\r\n\r\nSome of the
improvements are:\r\n- The custom dropdown content truncates the
connector name content when\r\nthere is not enough space\r\n- The
`EuiComoBox` wrapping Flex item it slightly bigger compared with\r\nthe
connectors name and it gets full width when reaching the
`\"l\"`\r\nbreakpoint in order to better display its content in
different\r\nresolutions\r\n- The badges now are display horizontally
when there are more than one.\r\n- Each `EuiComboBoxOptionOption` now
has a custom `aria-label` where\r\nusers can get a better info using
screen reader informing for instance\r\n\"Slack, Tech preview\" This
should fix the redundancy described in this\r\nissue
https://github.com/elastic/kibana/issues/197622\r\n- Deleting the
selection either pressing Space or Backspace displays the\r\ndropdown
content
options\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/c4494908-2849-4f95-84e9-25a60a5a05ab\r\n\r\n![CleanShot
2024-11-25 at 15
25\r\n36@2x](https://github.com/user-attachments/assets/caa27feb-cb3b-443f-b5c8-37cc1d823fe6)","sha":"e0607f7fadd0147a1372da62584a585d21e3eda8"}},"sourceBranch":"main","suggestedTargetBranches":["8.16"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201590","number":201590,"mergeCommit":{"message":"[Search]
Choose connector a11y improvement (#201590)\n\n## Summary\r\n\r\nThis PR
fixes some a11y and responsive related issues like:\r\n\r\n-
https://github.com/elastic/search-team/issues/8666\r\n-
https://github.com/elastic/kibana/issues/197622\r\n\r\nSome of the
improvements are:\r\n- The custom dropdown content truncates the
connector name content when\r\nthere is not enough space\r\n- The
`EuiComoBox` wrapping Flex item it slightly bigger compared with\r\nthe
connectors name and it gets full width when reaching the
`\"l\"`\r\nbreakpoint in order to better display its content in
different\r\nresolutions\r\n- The badges now are display horizontally
when there are more than one.\r\n- Each `EuiComboBoxOptionOption` now
has a custom `aria-label` where\r\nusers can get a better info using
screen reader informing for instance\r\n\"Slack, Tech preview\" This
should fix the redundancy described in this\r\nissue
https://github.com/elastic/kibana/issues/197622\r\n- Deleting the
selection either pressing Space or Backspace displays the\r\ndropdown
content
options\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/c4494908-2849-4f95-84e9-25a60a5a05ab\r\n\r\n![CleanShot
2024-11-25 at 15
25\r\n36@2x](https://github.com/user-attachments/assets/caa27feb-cb3b-443f-b5c8-37cc1d823fe6)","sha":"e0607f7fadd0147a1372da62584a585d21e3eda8"}},{"branch":"8.16","label":"v8.16.2","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: José Luis González <joseluisgj@gmail.com>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_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}
+    />
   );
 };

x-pack/plugins/enterprise_search/public/applications/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,8 +95,8 @@ 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(
@@ -102,10 +104,10 @@ export const StartStep: React.FC<StartStepProps> = ({
                     { defaultMessage: 'Connector' }
                   )}
                 >
-                  <ChooseConnectorSelectable selfManaged={selfManagePreference} />
+                  <ChooseConnector selfManaged={selfManagePreference} />
                 </EuiFormRow>
               </EuiFlexItem>
-              <EuiFlexItem>
+              <EuiFlexItem grow={5}>
                 <EuiFormRow
                   fullWidth
                   isInvalid={!!error}

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',
 });

x-pack/plugins/translations/translations/fr-FR.json

@@ -18430,10 +18430,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.",

x-pack/plugins/translations/translations/ja-JP.json

@@ -18404,10 +18404,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": "データを手動で同期したり、繰り返し同期をスケジュールしたり、ドメインを管理したりできます。",

x-pack/plugins/translations/translations/zh-CN.json

@@ -18447,10 +18447,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": "您可以手动同步数据，计划重复同步或管理您的域。",