[Logstash] [Pipeline Viewer] Improve LS monitoring accessibility (ela…

…stic#24169) * Update test data shape to conform to component proptypes. * Add aria-labels for pipeline viewer buttons.
skh · Oct 18, 2018 · 2b6cd21 · 2b6cd21
1 parent 9f4ec18
commit 2b6cd21
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 2 deletions.
diff --git a/.../logstash/pipeline_viewer/views/__test__/__snapshots__/collapsible_statement.test.js.snap b/.../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/...nents/logstash/pipeline_viewer/views/__test__/__snapshots__/plugin_statement.test.js.snap b/...nents/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/...c/components/logstash/pipeline_viewer/views/__test__/__snapshots__/statement.test.js.snap b/...c/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/...ponents/logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list.test.js.snap b/...ponents/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/...nitoring/public/components/logstash/pipeline_viewer/views/__test__/statement_list.test.js b/...nitoring/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/...gins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js b/...gins/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/...k/plugins/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.js b/...k/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
@@ -16,6 +16,7 @@ function renderStatementName(name, onVertexSelected) {
   return (
     <EuiFlexItem grow={false} key="statementName">
       <EuiButtonEmpty
+        aria-label={name}
         color="text"
         size="xs"
         onClick={onVertexSelected}