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 = ({ 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(null); useUpdateEffect(() => { if (onChange) { @@ -69,22 +71,32 @@ export const MultiInputRows: React.FC = ({ : undefined } > - {values.map((value: string, index: number) => { - const firstRow = index === 0; - const lastRow = index === values.length - 1; - return ( - editValue(index, newValue)} - onDelete={() => deleteValue(index)} - disableDelete={hasOnlyOneValue} - deleteLabel={deleteRowLabel} - /> - ); - })} +
+ {values.map((value: string, index: number) => { + const firstRow = index === 0; + const lastRow = index === values.length - 1; + return ( + editValue(index, newValue)} + onDelete={() => { + deleteValue(index); + valuesContainerRef.current?.focus(); + }} + disableDelete={hasOnlyOneValue} + deleteLabel={deleteRowLabel || DELETE_ROW_VALUE_BUTTON_LABEL(index + 1)} + /> + ); + })} +