From 5ccdaeddf27c74208ca8c4fe0f1beb7f29c540db Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 4 Dec 2024 19:37:02 +1100
Subject: [PATCH] [8.x] fix: [Search:AppSearch:Engines:Synonyms page]Button
 behind Manage synonym set dialog modal is announced by screen reader
 (#202417) (#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
(#202417)](https://github.com/elastic/kibana/pull/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":"alexwizp@gmail.com"},"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 (#202417)\n\nCloses:
#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 (#202417)\n\nCloses:
#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 (#202417)\n\nCloses:
#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 <alexwizp@gmail.com>
---
 .../components/multi_input_rows/constants.ts  | 14 ++++--
 .../multi_input_rows/multi_input_rows.tsx     | 50 ++++++++++++-------
 .../translations/translations/fr-FR.json      |  1 -
 .../translations/translations/ja-JP.json      |  1 -
 .../translations/translations/zh-CN.json      |  1 -
 5 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/multi_input_rows/constants.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/multi_input_rows/constants.ts
index f0c077c5bfaf2..1b16ec0082f85 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/multi_input_rows/constants.ts
+++ b/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' }
+);
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/multi_input_rows/multi_input_rows.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/multi_input_rows/multi_input_rows.tsx
index 257f4b637f3e0..f80b9cc07a218 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/multi_input_rows/multi_input_rows.tsx
+++ b/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"
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index ffe3994652fde..a64df46173816 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/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.",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 660f89ebf277f..ab29a7f5f11f9 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/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を活用し、高度なアプリケーション検索をシンプルにします。",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index f78ca57643200..a5a8f88d2a61d 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/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 执行高级应用程序搜索简单易行。",