[8.x] fix: [Search:AppSearch:Engines:Synonyms page]Button behind Mana…

…ge synonym set dialog modal is announced by screen reader (elastic#202417) (elastic#202871)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:AppSearch:Engines:Synonyms page]Button behind Manage
synonym set dialog modal is announced by screen reader
(elastic#202417)](elastic#202417)

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

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

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-04T06:18:18Z","message":"fix:
[Search:AppSearch:Engines:Synonyms page]Button behind Manage synonym set
dialog modal is announced by screen reader (elastic#202417)\n\nCloses:
elastic#202272\r\n\r\n## Description\r\nButtons which are behind dialog modals
shouldn't be announced for the\r\nuser using assistive
technology.\r\n\r\n## Changes Made:\r\n1. The DELETE_VALUE_BUTTON_LABEL
translation was updated to include the\r\nrow index in its value.\r\n2.
A container with role=\"group\" was created for input values. Now,
the\r\ncontainer is focused when the \"Delete row\" item is
pressed.\r\n\r\n## Screen\r\n\r\n<img width=\"1135\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61\">","sha":"258754d011d4fcc1be2ebe5834215e019c834949","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"fix:
[Search:AppSearch:Engines:Synonyms page]Button behind Manage synonym set
dialog modal is announced by screen
reader","number":202417,"url":"https://github.com/elastic/kibana/pull/202417","mergeCommit":{"message":"fix:
[Search:AppSearch:Engines:Synonyms page]Button behind Manage synonym set
dialog modal is announced by screen reader (elastic#202417)\n\nCloses:
elastic#202272\r\n\r\n## Description\r\nButtons which are behind dialog modals
shouldn't be announced for the\r\nuser using assistive
technology.\r\n\r\n## Changes Made:\r\n1. The DELETE_VALUE_BUTTON_LABEL
translation was updated to include the\r\nrow index in its value.\r\n2.
A container with role=\"group\" was created for input values. Now,
the\r\ncontainer is focused when the \"Delete row\" item is
pressed.\r\n\r\n## Screen\r\n\r\n<img width=\"1135\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61\">","sha":"258754d011d4fcc1be2ebe5834215e019c834949"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202417","number":202417,"mergeCommit":{"message":"fix:
[Search:AppSearch:Engines:Synonyms page]Button behind Manage synonym set
dialog modal is announced by screen reader (elastic#202417)\n\nCloses:
elastic#202272\r\n\r\n## Description\r\nButtons which are behind dialog modals
shouldn't be announced for the\r\nuser using assistive
technology.\r\n\r\n## Changes Made:\r\n1. The DELETE_VALUE_BUTTON_LABEL
translation was updated to include the\r\nrow index in its value.\r\n2.
A container with role=\"group\" was created for input values. Now,
the\r\ncontainer is focused when the \"Delete row\" item is
pressed.\r\n\r\n## Screen\r\n\r\n<img width=\"1135\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61\">","sha":"258754d011d4fcc1be2ebe5834215e019c834949"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>

x-pack/plugins/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' }
+);

x-pack/plugins/enterprise_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"

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

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

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

@@ -17209,7 +17209,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を活用し、高度なアプリケーション検索をシンプルにします。",

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

@@ -17249,7 +17249,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 执行高级应用程序搜索简单易行。",