From 82f25ce1543cd872b85857c2a794d565526483fb Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 5 Mar 2024 12:17:05 +0200
Subject: [PATCH] fix: #[Rules > Detection rules][AXE-CORE]: Form elements must
 have anaccessible label (#177205)

Closes: https://github.com/elastic/security-team/issues/8568

## Summary

The Import Rules modal in the Axe browser plugin is being flagged by the
tool for lacking an accessible label on a form element. This pull
request addresses this issue by introducing the `aria-labelledby`
attribute to the `input[type="file"]`.

### Screen

![image](https://github.com/elastic/kibana/assets/20072247/6130c0ef-5c5d-4c08-b602-f997efe248d9)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../__snapshots__/index.test.tsx.snap         | 15 ++++++++++---
 .../components/import_data_modal/index.tsx    | 21 ++++++++++++++-----
 2 files changed, 28 insertions(+), 8 deletions(-)

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 {
               <div
                 class="euiText emotion-euiText-s"
               >
-                <h4>
+                <h4
+                  id="generated-id"
+                >
                   description
                 </h4>
               </div>
@@ -64,6 +66,7 @@ Object {
                   <input
                     accept=".ndjson"
                     aria-describedby="rule-file-picker-filePicker__prompt"
+                    aria-labelledby="generated-id"
                     class="euiFilePicker__input"
                     data-test-subj="rule-file-picker"
                     id="rule-file-picker"
@@ -255,7 +258,9 @@ Object {
               <div
                 class="euiText emotion-euiText-s"
               >
-                <h4>
+                <h4
+                  id="generated-id"
+                >
                   description
                 </h4>
               </div>
@@ -271,6 +276,7 @@ Object {
                   <input
                     accept=".ndjson"
                     aria-describedby="rule-file-picker-filePicker__prompt"
+                    aria-labelledby="generated-id"
                     class="euiFilePicker__input"
                     data-test-subj="rule-file-picker"
                     id="rule-file-picker"
@@ -541,7 +547,9 @@ Object {
               <div
                 class="euiText emotion-euiText-s"
               >
-                <h4>
+                <h4
+                  id="generated-id"
+                >
                   description
                 </h4>
               </div>
@@ -557,6 +565,7 @@ Object {
                   <input
                     accept=".ndjson"
                     aria-describedby="rule-file-picker-filePicker__prompt"
+                    aria-labelledby="generated-id"
                     class="euiFilePicker__input"
                     data-test-subj="rule-file-picker"
                     id="rule-file-picker"
diff --git a/x-pack/plugins/security_solution/public/common/components/import_data_modal/index.tsx b/x-pack/plugins/security_solution/public/common/components/import_data_modal/index.tsx
index da99f3922ce4..7fee04747408 100644
--- a/x-pack/plugins/security_solution/public/common/components/import_data_modal/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/import_data_modal/index.tsx
@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import type { EuiFilePickerProps } from '@elastic/eui';
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -18,6 +19,7 @@ import {
   EuiModalHeaderTitle,
   EuiSpacer,
   EuiText,
+  htmlIdGenerator,
 } from '@elastic/eui';
 import type { WarningSchema } from '../../../../common/api/detection_engine';
 
@@ -78,6 +80,8 @@ export const ImportDataModalComponent = ({
   const [actionConnectorsWarnings, setActionConnectorsWarnings] = useState<WarningSchema[] | []>(
     []
   );
+  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 = ({
 
           <EuiModalBody>
             <EuiText size="s">
-              <h4>{description}</h4>
+              <h4 id={descriptionElementId}>{description}</h4>
             </EuiText>
 
             <EuiSpacer size="s" />
@@ -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}
             />
             <EuiSpacer size="s" />