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:
CJ Cenizal 2018-06-13 17:01:35 -07:00 committed by GitHub
parent 7a9d4a2dc2
commit 8657a9e61b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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"