From de08f1727788f7f89838622f31989c271c002dda Mon Sep 17 00:00:00 2001
From: Justin Kambic <justin.kambic@elastic.co>
Date: Thu, 18 Oct 2018 12:43:52 -0400
Subject: [PATCH] [Logstash] [Pipeline Viewer] Improve LS monitoring
 accessibility (#24169)

* Update test data shape to conform to component proptypes.

* Add aria-labels for pipeline viewer buttons.
---
 .../__snapshots__/collapsible_statement.test.js.snap         | 2 +-
 .../__test__/__snapshots__/plugin_statement.test.js.snap     | 5 +++++
 .../views/__test__/__snapshots__/statement.test.js.snap      | 3 +++
 .../views/__test__/__snapshots__/statement_list.test.js.snap | 2 ++
 .../pipeline_viewer/views/__test__/statement_list.test.js    | 2 ++
 .../logstash/pipeline_viewer/views/collapsible_statement.js  | 2 +-
 .../logstash/pipeline_viewer/views/plugin_statement.js       | 1 +
 .../components/logstash/pipeline_viewer/views/statement.js   | 1 +
 8 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/collapsible_statement.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/collapsible_statement.test.js.snap
index 340a33b79c21ca..42d47156d087cd 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/collapsible_statement.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/collapsible_statement.test.js.snap
@@ -17,7 +17,7 @@ exports[`CollapsibleStatement component renders child components 1`] = `
     key="statementId"
   >
     <EuiButtonIcon
-      aria-label={true}
+      aria-label="collapse"
       color="text"
       iconSize="m"
       iconType="arrowDown"
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/plugin_statement.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/plugin_statement.test.js.snap
index d1e5aeacffe0c3..d3ad2f6dfe665d 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/plugin_statement.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/plugin_statement.test.js.snap
@@ -29,6 +29,7 @@ exports[`PluginStatement component adds warning highlight for cpu time 1`] = `
         grow={false}
       >
         <EuiButtonEmpty
+          aria-label="mutate"
           className="monPipelineViewer__plugin"
           color="primary"
           flush="left"
@@ -122,6 +123,7 @@ exports[`PluginStatement component adds warning highlight for event millis 1`] =
         grow={false}
       >
         <EuiButtonEmpty
+          aria-label="mutate"
           className="monPipelineViewer__plugin"
           color="primary"
           flush="left"
@@ -215,6 +217,7 @@ exports[`PluginStatement component does not render explicit id field if no id is
         grow={false}
       >
         <EuiButtonEmpty
+          aria-label="stdin"
           className="monPipelineViewer__plugin"
           color="primary"
           flush="left"
@@ -283,6 +286,7 @@ exports[`PluginStatement component renders input metrics and explicit id fields
         grow={false}
       >
         <EuiButtonEmpty
+          aria-label="stdin"
           className="monPipelineViewer__plugin"
           color="primary"
           flush="left"
@@ -364,6 +368,7 @@ exports[`PluginStatement component renders processor statement metrics 1`] = `
         grow={false}
       >
         <EuiButtonEmpty
+          aria-label="mutate"
           className="monPipelineViewer__plugin"
           color="primary"
           flush="left"
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement.test.js.snap
index 9a97e585711ac1..bcf2d3fab5c7fc 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement.test.js.snap
@@ -19,6 +19,7 @@ exports[`Statement component renders a CollapsibleStatement with else body for n
       key="statementName"
     >
       <EuiButtonEmpty
+        aria-label="else"
         color="text"
         flush="left"
         iconSide="left"
@@ -56,6 +57,7 @@ exports[`Statement component renders a CollapsibleStatement with if body for bra
       key="statementName"
     >
       <EuiButtonEmpty
+        aria-label="if"
         color="text"
         flush="left"
         iconSide="left"
@@ -145,6 +147,7 @@ exports[`Statement component renders spacers for element with depth > 0 1`] = `
       key="statementName"
     >
       <EuiButtonEmpty
+        aria-label="else"
         color="text"
         flush="left"
         iconSide="left"
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list.test.js.snap
index 1963f00858d546..4223039fd4e69c 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list.test.js.snap
@@ -11,6 +11,7 @@ exports[`StatementList renders nested elements as expected 1`] = `
         "depth": 0,
         "id": "mutateIf",
         "parentId": null,
+        "statement": Object {},
       }
     }
     expand={[Function]}
@@ -25,6 +26,7 @@ exports[`StatementList renders nested elements as expected 1`] = `
         "depth": 1,
         "id": "mutate",
         "parentId": "mutateIf",
+        "statement": Object {},
       }
     }
     expand={[Function]}
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/statement_list.test.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/statement_list.test.js
index e3f3e3cd9a63ff..c6b7c14484700b 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/statement_list.test.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/statement_list.test.js
@@ -21,11 +21,13 @@ describe('StatementList', () => {
           id: 'mutateIf',
           parentId: null,
           depth: 0,
+          statement: { },
         },
         {
           id: 'mutate',
           parentId: 'mutateIf',
           depth: 1,
+          statement: { },
         },
       ],
       onShowVertexDetails,
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js
index a7bec798da2826..77fd484d2be6ff 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js
@@ -33,7 +33,7 @@ export function CollapsibleStatement(props) {
     >
       <EuiFlexItem key={id} grow={false}>
         <EuiButtonIcon
-          aria-label
+          aria-label="collapse"
           color="text"
           iconType={getToggleIconType(isCollapsed)}
           onClick={toggleClicked}
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.js
index 22dc44e7da26a2..dd1ed0d63f3e06 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.js
@@ -84,6 +84,7 @@ export function PluginStatement({
         <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty
+              aria-label={name}
               className="monPipelineViewer__plugin"
               color="primary"
               flush="left"
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.js
index 607908c4e74723..c0e524a2de5dac 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.js
@@ -16,6 +16,7 @@ function renderStatementName(name, onVertexSelected) {
   return (
     <EuiFlexItem grow={false} key="statementName">
       <EuiButtonEmpty
+        aria-label={name}
         color="text"
         size="xs"
         onClick={onVertexSelected}