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

…onym set dialog modal is announced by screen reader Closes: #202272
elastic · Dec 2, 2024 · ead50a7 · ead50a7
1 parent d8f3f4c
commit ead50a7
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 23 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) {
@@ -68,23 +70,34 @@ export const MultiInputRows: React.FC<Props> = ({
             }
           : undefined
       }
+      tabIndex={-1}
     >
-      {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"