Add aria-labelledby to index details flyout to tell screen reader wha…

…t to announce when the flyout is opened. (#19776) (#19876)
elastic · Jun 14, 2018 · 2ca22db · 2ca22db
1 parent 685846a
commit 2ca22db
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/...ugins/index_management/public/sections/index_list/components/detail_panel/detail_panel.js b/...ugins/index_management/public/sections/index_list/components/detail_panel/detail_panel.js
@@ -69,21 +69,28 @@ 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}>
               <EuiButtonEmpty iconType="cross" onClick={closeDetailPanel}>
                 Close
               </EuiButtonEmpty>
             </EuiFlexItem>
+
             <EuiFlexItem grow={false}>
               <Route
                 key="menu"