Skip to content

Commit 1a057c0

Browse files
kibanamachinehannahbrooks
kibanamachine
and
hannahbrooks
authored
[9.2] [Security Solution][Detection Engine][A11y] Field for Expiration Date Missing Title (#257990) (#258191)
# Backport This will backport the following commits from `main` to `9.2`: - [[Security Solution][Detection Engine][A11y] Field for Expiration Date Missing Title (#257990)](#257990) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Hannah Brooks","email":"hannah.brooks@elastic.co"},"sourceCommit":{"committedDate":"2026-03-17T16:58:47Z","message":"[Security Solution][Detection Engine][A11y] Field for Expiration Date Missing Title (#257990)\n\n## Summary\n\nFixes issue [#227394](https://github.com/elastic/kibana/issues/227394).\n\nThe \"Exception will expire at\" date picker field was not announcing its\nlabel to screen readers. EUI's internal `ReactDatePicker` hardcodes an\n`aria-label` with keyboard navigation instructions on the input element.\nThis overrides the `<label htmlFor>` association from `EuiFormRow`,\nsince `aria-label` takes precedence over `<label>`. This was fixed by\nadding `aria-labelledby` via a `customInput`, which takes priority over\nthe hardcoded `aria-label`.","sha":"058973fd9754e210c6d0c44a37ebbf232b43ace3","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:all-open","Team:Detection Engine","a11y","v9.4.0","9.4 candidate"],"title":"[Security Solution][Detection Engine][A11y] Field for Expiration Date Missing Title","number":257990,"url":"https://github.com/elastic/kibana/pull/257990","mergeCommit":{"message":"[Security Solution][Detection Engine][A11y] Field for Expiration Date Missing Title (#257990)\n\n## Summary\n\nFixes issue [#227394](https://github.com/elastic/kibana/issues/227394).\n\nThe \"Exception will expire at\" date picker field was not announcing its\nlabel to screen readers. EUI's internal `ReactDatePicker` hardcodes an\n`aria-label` with keyboard navigation instructions on the input element.\nThis overrides the `<label htmlFor>` association from `EuiFormRow`,\nsince `aria-label` takes precedence over `<label>`. This was fixed by\nadding `aria-labelledby` via a `customInput`, which takes priority over\nthe hardcoded `aria-label`.","sha":"058973fd9754e210c6d0c44a37ebbf232b43ace3"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.4.0","branchLabelMappingKey":"^v9.4.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/257990","number":257990,"mergeCommit":{"message":"[Security Solution][Detection Engine][A11y] Field for Expiration Date Missing Title (#257990)\n\n## Summary\n\nFixes issue [#227394](https://github.com/elastic/kibana/issues/227394).\n\nThe \"Exception will expire at\" date picker field was not announcing its\nlabel to screen readers. EUI's internal `ReactDatePicker` hardcodes an\n`aria-label` with keyboard navigation instructions on the input element.\nThis overrides the `<label htmlFor>` association from `EuiFormRow`,\nsince `aria-label` takes precedence over `<label>`. This was fixed by\nadding `aria-labelledby` via a `customInput`, which takes priority over\nthe hardcoded `aria-label`.","sha":"058973fd9754e210c6d0c44a37ebbf232b43ace3"}}]}] BACKPORT--> Co-authored-by: Hannah Brooks <hannah.brooks@elastic.co>
1 parent 22bb464 commit 1a057c0

1 file changed

Lines changed: 9 additions & 2 deletions

File tree

  • x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/expire_time

‎x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/expire_time/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* 2.0.
66
*/
77

8-
import { EuiDatePicker, EuiFormRow, EuiSpacer, EuiTitle } from '@elastic/eui';
8+
import { EuiDatePicker, EuiFieldText, EuiFormRow, EuiSpacer, EuiTitle } from '@elastic/eui';
99
import type { Moment } from 'moment';
1010
import moment from 'moment';
1111
import React, { useCallback, useState } from 'react';
@@ -56,8 +56,15 @@ const ExceptionItemExpireTime: React.FC<ExceptionItmeExpireTimeProps> = ({
5656
<h3>{i18n.EXCEPTION_EXPIRE_TIME_HEADER}</h3>
5757
</SectionHeader>
5858
<EuiSpacer size="s" />
59-
<EuiFormRow error={errors} isInvalid={isInvalid} label={i18n.EXPIRE_TIME_LABEL}>
59+
<EuiFormRow
60+
error={errors}
61+
isInvalid={isInvalid}
62+
label={i18n.EXPIRE_TIME_LABEL}
63+
id="exceptionExpireTime"
64+
>
6065
<EuiDatePicker
66+
customInput={<EuiFieldText controlOnly aria-labelledby="exceptionExpireTime-label" />}
67+
customInputRef="inputRef"
6168
showTimeSelect
6269
selected={dateTime}
6370
isInvalid={isInvalid}

0 commit comments

Comments
 (0)