[Graph] Fix various a11y issues (#54097)

src/legacy/core_plugins/kibana/public/dashboard/np_ready/listing/dashboard_listing.js

@@ -42,6 +42,7 @@ export class DashboardListing extends React.Component {
     return (
       <I18nProvider>
         <TableListView
+          headingId="dashboardListingHeading"
           createItem={this.props.hideWriteControls ? null : this.props.createItem}
           findItems={this.props.findItems}
           deleteItems={this.props.hideWriteControls ? null : this.props.deleteItems}
@@ -73,12 +74,12 @@ export class DashboardListing extends React.Component {
           <EuiEmptyPrompt
             iconType="visualizeApp"
             title={
-              <h2>
+              <h1 id="dashboardListingHeading">
                 <FormattedMessage
                   id="kbn.dashboard.listing.noItemsMessage"
                   defaultMessage="Looks like you don't have any dashboards."
                 />
-              </h2>
+              </h1>
             }
           />
         </div>
@@ -90,12 +91,12 @@ export class DashboardListing extends React.Component {
         <EuiEmptyPrompt
           iconType="dashboardApp"
           title={
-            <h2>
+            <h1 id="dashboardListingHeading">
               <FormattedMessage
                 id="kbn.dashboard.listing.createNewDashboard.title"
                 defaultMessage="Create your first dashboard"
               />
-            </h2>
+            </h1>
           }
           body={
             <Fragment>

src/legacy/core_plugins/kibana/public/visualize/np_ready/listing/visualize_listing_table.js

@@ -36,6 +36,7 @@ class VisualizeListingTable extends Component {
     const { visualizeCapabilities, uiSettings, toastNotifications } = getServices();
     return (
       <TableListView
+        headingId="visualizeListingHeading"
         // we allow users to create visualizations even if they can't save them
         // for data exploration purposes
         createItem={this.props.createItem}
@@ -113,12 +114,12 @@ class VisualizeListingTable extends Component {
           <EuiEmptyPrompt
             iconType="visualizeApp"
             title={
-              <h2>
+              <h1 id="visualizeListingHeading">
                 <FormattedMessage
                   id="kbn.visualize.listing.noItemsMessage"
                   defaultMessage="Looks like you don't have any visualizations."
                 />
-              </h2>
+              </h1>
             }
           />
         </div>
@@ -130,12 +131,12 @@ class VisualizeListingTable extends Component {
         <EuiEmptyPrompt
           iconType="visualizeApp"
           title={
-            <h2>
+            <h1 id="visualizeListingHeading">
               <FormattedMessage
                 id="kbn.visualize.listing.createNew.title"
                 defaultMessage="Create your first visualization"
               />
-            </h2>
+            </h1>
           }
           body={
             <Fragment>

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

@@ -67,6 +67,11 @@ export interface TableListViewProps {
   tableListTitle: string;
   toastNotifications: ToastsStart;
   uiSettings: IUiSettingsClient;
+  /**
+   * Id of the heading element describing the table. This id will be used as `aria-labelledby` of the wrapper element.
+   * If the table is not empty, this component renders its own h1 element using the same id.
+   */
+  headingId?: string;
 }
 
 export interface TableListViewState {
@@ -463,7 +468,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 +503,11 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
         className="itemListing__page"
         restrictWidth
       >
-        <EuiPageBody>{this.renderPageContent()}</EuiPageBody>
+        <EuiPageBody
+          aria-labelledby={this.state.hasInitialFetchReturned ? this.props.headingId : undefined}
+        >
+          {this.renderPageContent()}
+        </EuiPageBody>
       </EuiPage>
     );
   }

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

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

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-labelledby="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" />