github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

fix: #[Rules > Detection rules][AXE-CORE]: Form elements must have anaccessible label (#177205)

Browse source 
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](6130c0ef-5c5d-4c08-b602-f997efe248d9)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Alexey Antonov 2024-03-05 12:17:05 +02:00 • committed by GitHub
parent 872b25096a
commit 82f25ce154
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

15
x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap generated
View file

@ -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"

21
x-pack/plugins/security_solution/public/common/components/import_data_modal/index.tsx
View file

@ -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" />