[Graph] Fix various a11y issues

src/plugins/kibana_react/public/table_list_view/table_list_view.tsx

@@ -67,6 +67,8 @@ export interface TableListViewProps {
   tableListTitle: string;
   toastNotifications: ToastsStart;
   uiSettings: IUiSettingsClient;
+  ariaDescribedby?: string;
+  headingId?: string;
 }
 
 export interface TableListViewState {
@@ -463,7 +465,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" data-test-subj="top-nav">
           <EuiFlexItem grow={false}>
             <EuiTitle size="l">
-              <h1>{this.props.tableListTitle}</h1>
+              <h1 id={this.props.headingId}>{this.props.tableListTitle}</h1>
             </EuiTitle>
           </EuiFlexItem>
 
@@ -498,7 +500,9 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
         className="itemListing__page"
         restrictWidth
       >
-        <EuiPageBody>{this.renderPageContent()}</EuiPageBody>
+        <EuiPageBody aria-describedby={this.props.ariaDescribedby}>
+          {this.renderPageContent()}
+        </EuiPageBody>
       </EuiPage>
     );
   }

x-pack/legacy/plugins/graph/public/angular/templates/_sidebar.scss

@@ -13,6 +13,7 @@
 
   .help-block {
     font-size: $euiFontSizeXS;
+    color: $euiColorDarkShade;
   }
 }
 

x-pack/legacy/plugins/graph/public/angular/templates/index.html

@@ -1,4 +1,4 @@
-<div id="graphBasic" ng-controller="graphuiPlugin">
+<main id="graphBasic" ng-controller="graphuiPlugin" aria-describedby="graphHeading">
   <!-- Local nav. -->
   <kbn-top-nav name="workspacesTopNav" config="topNavMenu">
   </kbn-top-nav>
@@ -81,6 +81,7 @@
         <button
           class="kuiButton kuiButton--basic kuiButton--small"
           tooltip="{{ ::'xpack.graph.sidebar.topMenu.undoButtonTooltip' | i18n: { defaultMessage: 'Undo' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.undoButtonTooltip' | i18n: { defaultMessage: 'Undo' } }}"
           type="button"
           ng-click="workspace.undo()"
           ng-disabled="workspace === null||workspace.undoLog.length <1"
@@ -91,6 +92,7 @@
         <button
           class="kuiButton kuiButton--basic kuiButton--small"
           tooltip="{{ ::'xpack.graph.sidebar.topMenu.redoButtonTooltip' | i18n: { defaultMessage: 'Redo' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.redoButtonTooltip' | i18n: { defaultMessage: 'Redo' } }}"
           type="button"
           ng-disabled="workspace === null ||workspace.redoLog.length === 0"
           ng-click="workspace.redo()"
@@ -100,48 +102,56 @@
 
         <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||liveResponseFields.length === 0||workspace.nodes.length === 0"
           tooltip="{{ ::'xpack.graph.sidebar.topMenu.expandSelectionButtonTooltip' | i18n: { defaultMessage: 'Expand selection' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.expandSelectionButtonTooltip' | i18n: { defaultMessage: 'Expand selection' } }}"
           ng-click="setDetail(null);workspace.expandSelecteds({toFields:liveResponseFields});">
           <span class="kuiIcon fa-plus"></span>
         </button>
 
         <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.nodes.length === 0"
           tooltip="{{ ::'xpack.graph.sidebar.topMenu.addLinksButtonTooltip' | i18n: { defaultMessage: 'Add links between existing terms' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.addLinksButtonTooltip' | i18n: { defaultMessage: 'Add links between existing terms' } }}"
           ng-click="workspace.fillInGraph();">
           <span class="kuiIcon fa-link"></span>
         </button>
 
         <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.nodes.length === 0"
           tooltip="{{ ::'xpack.graph.sidebar.topMenu.removeVerticesButtonTooltip' | i18n: { defaultMessage: 'Remove vertices from workspace' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.removeVerticesButtonTooltip' | i18n: { defaultMessage: 'Remove vertices from workspace' } }}"
           ng-click="setDetail(null);workspace.deleteSelection();" data-test-subj="graphRemoveSelection">
           <span class="kuiIcon fa-trash"></span>
         </button>
 
         <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.selectedNodes.length === 0"
           tooltip="{{ ::'xpack.graph.sidebar.topMenu.blacklistButtonTooltip' | i18n: { defaultMessage: 'Blacklist selection from return to workspace' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.blacklistButtonTooltip' | i18n: { defaultMessage: 'Blacklist selection from return to workspace' } }}"
           ng-click="workspace.blacklistSelection();">
           <span class="kuiIcon fa-ban"></span>
         </button>
 
         <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null ||workspace.selectedNodes.length === 0"
           tooltip="{{ ::'xpack.graph.sidebar.topMenu.customStyleButtonTooltip' | i18n: { defaultMessage: 'Custom style selected vertices' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.customStyleButtonTooltip' | i18n: { defaultMessage: 'Custom style selected vertices' } }}"
           ng-click="setDetail({showStyle:true})">
           <span class="kuiIcon fa-paint-brush"></span>
         </button>
 
         <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace === null||workspace.nodes.length === 0"
           tooltip="{{ ::'xpack.graph.sidebar.topMenu.drillDownButtonTooltip' | i18n: { defaultMessage: 'Drill down' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.drillDownButtonTooltip' | i18n: { defaultMessage: 'Drill down' } }}"
           ng-click="setDetail({showDrillDowns:true})">
           <span class="kuiIcon fa-info"></span>
         </button>
 
         <button class="kuiButton kuiButton--basic kuiButton--small" ng-disabled="workspace.nodes.length === 0" ng-if="workspace.nodes.length === 0||workspace.force === null"
           tooltip="{{ ::'xpack.graph.sidebar.topMenu.runLayoutButtonTooltip' | i18n: { defaultMessage: 'Run layout' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.runLayoutButtonTooltip' | i18n: { defaultMessage: 'Run layout' } }}"
           ng-click="workspace.runLayout()" data-test-subj="graphResumeLayout">
           <span class="kuiIcon fa-play"></span>
         </button>
 
         <button class="kuiButton kuiButton--basic kuiButton--small" ng-if="workspace.force !== null&&workspace.nodes.length>0"
           tooltip="{{ ::'xpack.graph.sidebar.topMenu.pauseLayoutButtonTooltip' | i18n: { defaultMessage: 'Pause layout' } }}"
+          aria-label="{{ ::'xpack.graph.sidebar.topMenu.pauseLayoutButtonTooltip' | i18n: { defaultMessage: 'Pause layout' } }}"
           ng-click="workspace.stopLayout()" data-test-subj="graphPauseLayout">
           <span class="kuiIcon fa-pause"></span>
         </button>
@@ -386,4 +396,4 @@
   </div>
   <!--end svg container-->
 
-</div>
+</main>

x-pack/legacy/plugins/graph/public/components/app.tsx

@@ -16,6 +16,7 @@ import { FieldManager } from './field_manager';
 import { SearchBarProps, SearchBar } from './search_bar';
 import { GraphStore } from '../state_management';
 import { GuidancePanel } from './guidance_panel';
+import { GraphTitle } from './graph_title';
 
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 
@@ -52,6 +53,7 @@ export function GraphApp(props: GraphAppProps) {
       >
         <Provider store={reduxStore}>
           <>
+            {props.isInitialized && <GraphTitle />}
             <div className="gphGraph__bar">
               <SearchBar {...searchBarProps} />
               <EuiSpacer size="s" />

x-pack/legacy/plugins/graph/public/components/graph_title.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { EuiScreenReaderOnly } from '@elastic/eui';
+import React from 'react';
+
+import { GraphState, metaDataSelector } from '../state_management';
+
+interface GraphTitleProps {
+  title: string;
+}
+
+/**
+ * Component showing the title of the current workspace as a heading visible for screen readers
+ */
+export const GraphTitle = connect<GraphTitleProps, {}, {}, GraphState>((state: GraphState) => ({
+  title: metaDataSelector(state).title,
+}))(({ title }: GraphTitleProps) => (
+  <EuiScreenReaderOnly>
+    <h1 id="graphHeading">{title}</h1>
+  </EuiScreenReaderOnly>
+));

x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss

@@ -15,16 +15,10 @@
   position: relative;
   padding-left: $euiSizeXL;
   margin-bottom: $euiSizeL;
-
-  button {
-    // make buttons wrap lines like regular text
-    display: contents;
-  }
 }
 
 .gphGuidancePanel__item--disabled {
   color: $euiColorDarkShade;
-  pointer-events: none;
 
   button {
     color: $euiColorDarkShade !important;

x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx

@@ -53,6 +53,7 @@ function ListItem({
         'gphGuidancePanel__item--disabled': state === 'disabled',
       })}
       aria-disabled={state === 'disabled'}
+      aria-current={state === 'active' ? 'step' : undefined}
     >
       {state !== 'disabled' && (
         <span
@@ -96,15 +97,15 @@ function GuidancePanelComponent(props: GuidancePanelProps) {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiText>
-            <h1>
+            <h1 id="graphHeading">
               {i18n.translate('xpack.graph.guidancePanel.title', {
                 defaultMessage: 'Three steps to your graph',
               })}
             </h1>
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <ul className="gphGuidancePanel__list">
+          <ol className="gphGuidancePanel__list" aria-describedby="graphHeading">
             <ListItem state={hasDatasource ? 'done' : 'active'}>
               <EuiLink onClick={onOpenDatasourcePicker}>
                 {i18n.translate(
@@ -116,7 +117,7 @@ function GuidancePanelComponent(props: GuidancePanelProps) {
               </EuiLink>
             </ListItem>
             <ListItem state={hasFields ? 'done' : hasDatasource ? 'active' : 'disabled'}>
-              <EuiLink onClick={onOpenFieldPicker}>
+              <EuiLink onClick={onOpenFieldPicker} disabled={!hasFields && !hasDatasource}>
                 {i18n.translate('xpack.graph.guidancePanel.fieldsItem.fieldsButtonLabel', {
                   defaultMessage: 'Add fields.',
                 })}
@@ -128,7 +129,7 @@ function GuidancePanelComponent(props: GuidancePanelProps) {
                 defaultMessage="Enter a query in the search bar to start exploring. Don't know where to start? {topTerms}."
                 values={{
                   topTerms: (
-                    <EuiLink onClick={onFillWorkspace}>
+                    <EuiLink onClick={onFillWorkspace} disabled={!hasFields}>
                       {i18n.translate('xpack.graph.guidancePanel.nodesItem.topTermsButtonLabel', {
                         defaultMessage: 'Graph the top terms',
                       })}
@@ -137,7 +138,7 @@ function GuidancePanelComponent(props: GuidancePanelProps) {
                 }}
               />
             </ListItem>
-          </ul>
+          </ol>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>

x-pack/legacy/plugins/graph/public/components/listing.tsx

@@ -30,6 +30,8 @@ export function Listing(props: ListingProps) {
   return (
     <I18nProvider>
       <TableListView
+        ariaDescribedby="graphListingHeading"
+        headingId="graphListingHeading"
         createItem={props.capabilities.save ? props.createItem : undefined}
         findItems={props.findItems}
         deleteItems={props.capabilities.delete ? props.deleteItems : undefined}
@@ -67,14 +69,14 @@ function getNoItemsMessage(
     return (
       <div>
         <EuiEmptyPrompt
-          iconType="visualizeApp"
+          iconType="graphApp"
           title={
-            <h2>
+            <h1 id="graphListingHeading">
               <FormattedMessage
                 id="xpack.graph.listing.noItemsMessage"
                 defaultMessage="Looks like you don't have any graphs."
               />
-            </h2>
+            </h1>
           }
         />
       </div>
@@ -88,12 +90,12 @@ function getNoItemsMessage(
       <EuiEmptyPrompt
         iconType="graphApp"
         title={
-          <h2>
+          <h1 id="graphListingHeading">
             <FormattedMessage
               id="xpack.graph.listing.createNewGraph.title"
               defaultMessage="Create your first graph"
             />
-          </h2>
+          </h1>
         }
         body={
           <Fragment>