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