fix: [Search:AppSearch:Engines:Synonyms page]Button behind Manage syn…

…onym set dialog modal is announced by screen reader (elastic#202417) Closes: elastic#202272 ## Description Buttons which are behind dialog modals shouldn't be announced for the user using assistive technology. ## Changes Made: 1. The DELETE_VALUE_BUTTON_LABEL translation was updated to include the row index in its value. 2. A container with role="group" was created for input values. Now, the container is focused when the "Delete row" item is pressed. ## Screen <img width="1135" alt="image" src="https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61">
bhapas · Dec 4, 2024 · 258754d · 258754d
1 parent 765ab20
commit 258754d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 26 deletions.
diff --git a/...enterprise_search/public/applications/app_search/components/multi_input_rows/constants.ts b/...enterprise_search/public/applications/app_search/components/multi_input_rows/constants.ts
@@ -12,12 +12,18 @@ export const ADD_VALUE_BUTTON_LABEL = i18n.translate(
   { defaultMessage: 'Add value' }
 );
 
-export const DELETE_VALUE_BUTTON_LABEL = i18n.translate(
-  'xpack.enterpriseSearch.appSearch.multiInputRows.removeValueButtonLabel',
-  { defaultMessage: 'Remove value' }
-);
+export const DELETE_ROW_VALUE_BUTTON_LABEL = (index: number) =>
+  i18n.translate('xpack.enterpriseSearch.appSearch.multiInputRows.removeRowValueButtonLabel', {
+    defaultMessage: 'Remove value, row {index}',
+    values: { index },
+  });
 
 export const INPUT_ROW_PLACEHOLDER = i18n.translate(
   'xpack.enterpriseSearch.appSearch.multiInputRows.inputRowPlaceholder',
   { defaultMessage: 'Enter a value' }
 );
+
+export const INPUT_ROW_CONTAINER_ARIA_LABEL = i18n.translate(
+  'xpack.enterpriseSearch.appSearch.multiInputRows.inputRowContainerAriaLabel',
+  { defaultMessage: 'Multiple input rows' }
+);
diff --git a/...se_search/public/applications/app_search/components/multi_input_rows/multi_input_rows.tsx b/...se_search/public/applications/app_search/components/multi_input_rows/multi_input_rows.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { useValues, useActions } from 'kea';
 import useUpdateEffect from 'react-use/lib/useUpdateEffect';
@@ -16,8 +16,9 @@ import { CONTINUE_BUTTON_LABEL } from '../../../shared/constants';
 
 import {
   ADD_VALUE_BUTTON_LABEL,
-  DELETE_VALUE_BUTTON_LABEL,
+  DELETE_ROW_VALUE_BUTTON_LABEL,
   INPUT_ROW_PLACEHOLDER,
+  INPUT_ROW_CONTAINER_ARIA_LABEL,
 } from './constants';
 import { InputRow } from './input_row';
 import { MultiInputRowsLogic } from './multi_input_rows_logic';
@@ -43,12 +44,13 @@ export const MultiInputRows: React.FC<Props> = ({
   showSubmitButton = true,
   submitButtonText = CONTINUE_BUTTON_LABEL,
   addRowText = ADD_VALUE_BUTTON_LABEL,
-  deleteRowLabel = DELETE_VALUE_BUTTON_LABEL,
+  deleteRowLabel,
   inputPlaceholder = INPUT_ROW_PLACEHOLDER,
 }) => {
   const logic = MultiInputRowsLogic({ id, values: initialValues });
   const { values, addedNewRow, hasEmptyValues, hasOnlyOneValue } = useValues(logic);
   const { addValue, editValue, deleteValue } = useActions(logic);
+  const valuesContainerRef = useRef<HTMLDivElement>(null);
 
   useUpdateEffect(() => {
     if (onChange) {
@@ -69,22 +71,32 @@ export const MultiInputRows: React.FC<Props> = ({
           : undefined
       }
     >
-      {values.map((value: string, index: number) => {
-        const firstRow = index === 0;
-        const lastRow = index === values.length - 1;
-        return (
-          <InputRow
-            key={`inputRow-${id}-${index}`}
-            value={value}
-            placeholder={inputPlaceholder}
-            autoFocus={addedNewRow ? lastRow : firstRow}
-            onChange={(newValue) => editValue(index, newValue)}
-            onDelete={() => deleteValue(index)}
-            disableDelete={hasOnlyOneValue}
-            deleteLabel={deleteRowLabel}
-          />
-        );
-      })}
+      <div
+        ref={valuesContainerRef}
+        role="group"
+        tabIndex={-1}
+        aria-label={INPUT_ROW_CONTAINER_ARIA_LABEL}
+      >
+        {values.map((value: string, index: number) => {
+          const firstRow = index === 0;
+          const lastRow = index === values.length - 1;
+          return (
+            <InputRow
+              key={`inputRow-${id}-${index}`}
+              value={value}
+              placeholder={inputPlaceholder}
+              autoFocus={addedNewRow ? lastRow : firstRow}
+              onChange={(newValue) => editValue(index, newValue)}
+              onDelete={() => {
+                deleteValue(index);
+                valuesContainerRef.current?.focus();
+              }}
+              disableDelete={hasOnlyOneValue}
+              deleteLabel={deleteRowLabel || DELETE_ROW_VALUE_BUTTON_LABEL(index + 1)}
+            />
+          );
+        })}
+      </div>
       <EuiButtonEmpty
         size="s"
         iconType="plusInCircle"

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -17071,7 +17071,6 @@
     "xpack.enterpriseSearch.appSearch.metaEngines.title": "Métamoteurs",
     "xpack.enterpriseSearch.appSearch.multiInputRows.addValueButtonLabel": "Ajouter une valeur",
     "xpack.enterpriseSearch.appSearch.multiInputRows.inputRowPlaceholder": "Entrer une valeur",
-    "xpack.enterpriseSearch.appSearch.multiInputRows.removeValueButtonLabel": "Retirer une valeur",
     "xpack.enterpriseSearch.appSearch.ownerRoleTypeDescription": "Les propriétaires peuvent tout faire. Le compte peut avoir plusieurs propriétaires, mais il doit toujours y avoir au moins un propriétaire.",
     "xpack.enterpriseSearch.appSearch.productCardDescription": "Une solution sur mesure pour les applications et les sites web, qui fournit les outils dont vous avez besoin pour concevoir, implémenter et gérer efficacement ces expériences de recherche orientées clients.",
     "xpack.enterpriseSearch.appSearch.productDescription": "Tirez parti des tableaux de bord, des analyses et des API pour simplifier la recherche d'applications avancée.",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -16934,7 +16934,6 @@
     "xpack.enterpriseSearch.appSearch.metaEngines.title": "メタエンジン",
     "xpack.enterpriseSearch.appSearch.multiInputRows.addValueButtonLabel": "値を追加",
     "xpack.enterpriseSearch.appSearch.multiInputRows.inputRowPlaceholder": "値を入力",
-    "xpack.enterpriseSearch.appSearch.multiInputRows.removeValueButtonLabel": "値を削除",
     "xpack.enterpriseSearch.appSearch.ownerRoleTypeDescription": "所有者はすべての操作を実行できます。アカウントには複数の所有者がいる場合がありますが、一度に少なくとも1人以上の所有者が必要です。",
     "xpack.enterpriseSearch.appSearch.productCardDescription": "アプリやWebサイト向けのカスタムソリューション。ユーザー向けの検索エクスペリエンスを設計、実装、効果的に管理するために必要なツールを提供します。",
     "xpack.enterpriseSearch.appSearch.productDescription": "ダッシュボード、分析、APIを活用し、高度なアプリケーション検索をシンプルにします。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -16639,7 +16639,6 @@
     "xpack.enterpriseSearch.appSearch.metaEngines.title": "元引擎",
     "xpack.enterpriseSearch.appSearch.multiInputRows.addValueButtonLabel": "添加值",
     "xpack.enterpriseSearch.appSearch.multiInputRows.inputRowPlaceholder": "输入值",
-    "xpack.enterpriseSearch.appSearch.multiInputRows.removeValueButtonLabel": "删除值",
     "xpack.enterpriseSearch.appSearch.ownerRoleTypeDescription": "所有者可以执行任何操作。该帐户可以有很多所有者，但任何时候必须至少有一个所有者。",
     "xpack.enterpriseSearch.appSearch.productCardDescription": "为应用和网站专门定制的解决方案，提供设计、实施和高效管理那些面向用户的搜索体验所需的工具。",
     "xpack.enterpriseSearch.appSearch.productDescription": "利用仪表板、分析和 API 执行高级应用程序搜索简单易行。",