Skip to content

Commit 3b51010

Browse files
alexwizpakowalska622
authored andcommitted
fix: [Analytics:Graph page]Dialog modal missing title from announcement (elastic#217827)
Closes: elastic#214760 **Description** Dialog modal, flyout, field visible title should be announced for the users, especially using assistive technology to know what dialog modal, flyout opened, what field is active and what is needed to enter in it. **Changes made:** 1. Set correct value for` aria-labelledby` attr.
1 parent 768793a commit 3b51010

File tree

3 files changed

+8
-3
lines changed

3 files changed

+8
-3
lines changed

src/core/packages/overlays/browser/src/modal.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* License v3.0 only", or the "Server Side Public License, v 1".
88
*/
99

10-
import type { EuiConfirmModalProps } from '@elastic/eui';
10+
import type { EuiConfirmModalProps, EuiModalProps } from '@elastic/eui';
1111
import type { MountPoint, OverlayRef } from '@kbn/core-mount-utils-browser';
1212

1313
/**
@@ -22,6 +22,7 @@ export interface OverlayModalConfirmOptions {
2222
'data-test-subj'?: string;
2323
defaultFocusedButton?: EuiConfirmModalProps['defaultFocusedButton'];
2424
buttonColor?: EuiConfirmModalProps['buttonColor'];
25+
'aria-labelledby'?: EuiConfirmModalProps['aria-labelledby'];
2526
/**
2627
* Sets the max-width of the modal.
2728
* Set to `true` to use the default (`euiBreakpoints 'm'`),
@@ -66,4 +67,5 @@ export interface OverlayModalOpenOptions {
6667
closeButtonAriaLabel?: string;
6768
'data-test-subj'?: string;
6869
maxWidth?: boolean | number | string;
70+
'aria-labelledby'?: EuiModalProps['aria-labelledby'];
6971
}

x-pack/platform/plugins/private/graph/public/components/source_modal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function SourceModal(props: SourcePickerProps) {
1616
return (
1717
<div css={sourceModalStyles}>
1818
<EuiModalHeader>
19-
<EuiModalHeaderTitle>
19+
<EuiModalHeaderTitle id="source-modal-title">
2020
<FormattedMessage
2121
id="xpack.graph.sourceModal.title"
2222
defaultMessage="Select a data source"

x-pack/platform/plugins/private/graph/public/services/source_modal.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ export function openSourceModal(
3232
onSelected(indexPattern);
3333
modalRef.close();
3434
}}
35-
/>
35+
/>,
36+
{
37+
'aria-labelledby': 'source-modal-title',
38+
}
3639
);
3740
}

0 commit comments

Comments
 (0)