diff --git a/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap
index 4525644c5cf0..6a01cf77373b 100644
--- a/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap
@@ -48,7 +48,9 @@ Object {
-
+
description
@@ -64,6 +66,7 @@ Object {
-
+
description
@@ -271,6 +276,7 @@ Object {
-
+
description
@@ -557,6 +565,7 @@ Object {
(
[]
);
+ const descriptionElementId = useMemo(() => htmlIdGenerator()(), []);
+
const [importedActionConnectorsCount, setImportedActionConnectorsCount] = useState<
number | undefined
>(0);
@@ -168,6 +172,14 @@ export const ImportDataModalComponent = ({
const handleActionConnectorsCheckboxClick = useCallback(() => {
setOverwriteActionConnectors((shouldOverwrite) => !shouldOverwrite);
}, []);
+
+ const handleFilePickerChange: EuiFilePickerProps['onChange'] = useCallback(
+ (files: FileList | null) => {
+ setSelectedFiles(files && files.length > 0 ? files : null);
+ },
+ []
+ );
+
return (
<>
{showModal && (
@@ -178,7 +190,7 @@ export const ImportDataModalComponent = ({
- {description}
+ {description}
@@ -187,12 +199,11 @@ export const ImportDataModalComponent = ({
accept=".ndjson"
id="rule-file-picker"
initialPromptText={subtitle}
- onChange={(files: FileList | null) => {
- setSelectedFiles(files && files.length > 0 ? files : null);
- }}
+ onChange={handleFilePickerChange}
display={'large'}
fullWidth={true}
isLoading={isImporting}
+ aria-labelledby={descriptionElementId}
/>