github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

fix: [Dashboard > Create new rule][SCREEN READER]: Headings must be properly nested for usability (#179684)

Browse source 
Closes: https://github.com/elastic/security-team/issues/8651

## Description

The Create new rule form has a number of headings that are improperly
nested (wrong level) and one form label that's incorrectly been tagged
as a heading. This makes for a more difficult screen reader experience;
a large number of screen reader users [primarily navigate by
headings](https://webaim.org/projects/screenreadersurvey9/#finding).

### Steps to recreate

1. Open [Create new
rule](https://kibana.siem.estc.dev/app/security/rules/create)
2. Open [HeadingsMap
extension](https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?pli=1)
or your preferred screen reader
3. If using a screen reader, traverse the page by headings only to hear
the perceived importance of information

#### What was done?: 

1. The layout has been updated to utilize `EuiFormRow`.
2. Fixed issues with resizing the container.

Before: 


3a9cec61-e353-4fb9-acd0-fe7a05f9d23b



After:


2ccdd8ab-f287-43e3-919a-a42fc6d30272
This commit is contained in:
Alexey Antonov 2024-04-03 12:08:08 +03:00 • committed by GitHub
parent a5b13f325d
commit 02cf6e6752
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 31 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

58
x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/rule_preview/index.tsx
View file

@ -17,6 +17,7 @@ import {
EuiSuperUpdateButton,
EuiText,
EuiTitle,
EuiFormRow,
} from '@elastic/eui';
import moment from 'moment';
import type { List } from '@kbn/securitysolution-io-ts-list-types';
@ -210,7 +211,7 @@ const RulePreviewComponent: React.FC<RulePreviewProps> = ({
);
return (
<>
<div data-test-subj="rule-preview">
<EuiTitle size="m">
<h2>{i18n.RULE_PREVIEW_TITLE}</h2>
</EuiTitle>
@ -231,32 +232,35 @@ const RulePreviewComponent: React.FC<RulePreviewProps> = ({
<EuiSpacer />
</>
)}
<EuiText size="xs" data-test-subj="rule-preview">
<h4>{i18n.QUERY_PREVIEW_LABEL}</h4>
</EuiText>
<EuiSpacer size="xs" />
<EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
<EuiSuperDatePicker
start={startDate}
end={endDate}
isDisabled={isDisabled}
onTimeChange={onTimeChange}
showUpdateButton={false}
commonlyUsedRanges={timeRanges}
onRefresh={onTimeframeRefresh}
data-test-subj="preview-time-frame"
/>
<EuiFlexItem grow={false}>
<EuiSuperUpdateButton
isDisabled={isDateRangeInvalid || isDisabled}
iconType={isDirty ? 'kqlFunction' : 'refresh'}
onClick={onTimeframeRefresh}
color={isDirty ? 'success' : 'primary'}
fill={true}
data-test-subj="previewSubmitButton"
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFormRow label={i18n.QUERY_PREVIEW_LABEL}>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive>
<EuiFlexItem grow>
<EuiSuperDatePicker
start={startDate}
end={endDate}
isDisabled={isDisabled}
onTimeChange={onTimeChange}
showUpdateButton={false}
commonlyUsedRanges={timeRanges}
onRefresh={onTimeframeRefresh}
data-test-subj="preview-time-frame"
width="full"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSuperUpdateButton
isDisabled={isDateRangeInvalid || isDisabled}
iconType={isDirty ? 'kqlFunction' : 'refresh'}
onClick={onTimeframeRefresh}
color={isDirty ? 'success' : 'primary'}
fill={true}
data-test-subj="previewSubmitButton"
fullWidth={true}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
<EuiSpacer size="l" />
{isPreviewRequestInProgress && <LoadingHistogram />}
{!isPreviewRequestInProgress && previewId && spaceId && (
@ -270,7 +274,7 @@ const RulePreviewComponent: React.FC<RulePreviewProps> = ({
/>
)}
<PreviewLogs logs={logs} hasNoiseWarning={hasNoiseWarning} isAborted={isAborted} />
</>
</div>
);
};