Add aria-labelledby to index details flyout to tell screen reader what to announce when the flyout is opened. (#19776)
This commit is contained in:
parent
7a9d4a2dc2
commit
8657a9e61b
|
@ -69,14 +69,20 @@ export class DetailPanel extends Component {
|
|||
component = <Summary />;
|
||||
}
|
||||
return (
|
||||
<EuiFlyout data-test-subj="indexDetailFlyout" onClose={closeDetailPanel}>
|
||||
<EuiFlyout
|
||||
data-test-subj="indexDetailFlyout"
|
||||
onClose={closeDetailPanel}
|
||||
aria-labelledby="indexDetailsFlyoutTitle"
|
||||
>
|
||||
<EuiFlyoutHeader>
|
||||
<EuiTitle size="l">
|
||||
<EuiTitle size="l" id="indexDetailsFlyoutTitle">
|
||||
<h2>{indexName}</h2>
|
||||
</EuiTitle>
|
||||
<EuiTabs>{this.renderTabs()}</EuiTabs>
|
||||
</EuiFlyoutHeader>
|
||||
|
||||
<EuiFlyoutBody>{component}</EuiFlyoutBody>
|
||||
|
||||
<EuiFlyoutFooter>
|
||||
<EuiFlexGroup justifyContent="spaceBetween">
|
||||
<EuiFlexItem grow={false}>
|
||||
|
@ -84,6 +90,7 @@ export class DetailPanel extends Component {
|
|||
Close
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem grow={false}>
|
||||
<Route
|
||||
key="menu"
|
||||
|
|
Loading…
Reference in a new issue