From e86cb4208058bc68eb49b3780ea304521c4106b7 Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Mon, 6 Apr 2020 12:15:13 -0400
Subject: [PATCH] [Core UI] Add missing alt attributes to add data tutorial
 logos (#62393)

* add empty title prop for data tutorial page icons

* switch alt attribute to title prop

* update snapshots

* enabling skipped a11y tests
---
 .../components/__snapshots__/synopsis.test.js.snap    |  2 +-
 .../home/public/application/components/synopsis.js    |  4 ++--
 .../tutorial/__snapshots__/introduction.test.js.snap  |  7 ++-----
 .../application/components/tutorial/introduction.js   | 11 ++++++++---
 x-pack/test/accessibility/apps/home.ts                |  6 ++----
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/plugins/home/public/application/components/__snapshots__/synopsis.test.js.snap b/src/plugins/home/public/application/components/__snapshots__/synopsis.test.js.snap
index 594d67d9c8eb..d757d6a8b730 100644
--- a/src/plugins/home/public/application/components/__snapshots__/synopsis.test.js.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/synopsis.test.js.snap
@@ -9,8 +9,8 @@ exports[`props iconType 1`] = `
   href="link_to_item"
   icon={
     <EuiIcon
-      alt=""
       size="l"
+      title=""
       type="logoApache"
     />
   }
diff --git a/src/plugins/home/public/application/components/synopsis.js b/src/plugins/home/public/application/components/synopsis.js
index f43c377b4e5b..b6fa85db2bfe 100644
--- a/src/plugins/home/public/application/components/synopsis.js
+++ b/src/plugins/home/public/application/components/synopsis.js
@@ -35,9 +35,9 @@ export function Synopsis({
 }) {
   let optionalImg;
   if (iconUrl) {
-    optionalImg = <img className="synopsisIcon" src={iconUrl} alt="" />;
+    optionalImg = <img alt="" className="synopsisIcon" src={iconUrl} />;
   } else if (iconType) {
-    optionalImg = <EuiIcon type={iconType} alt="" size="l" />;
+    optionalImg = <EuiIcon size="l" title="" type={iconType} />;
   }
 
   const classes = classNames('homSynopsis__card', {
diff --git a/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap b/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap
index b35545787e4a..410d29a42cac 100644
--- a/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap
+++ b/src/plugins/home/public/application/components/tutorial/__snapshots__/introduction.test.js.snap
@@ -15,7 +15,6 @@ exports[`props exportedFieldsUrl 1`] = `
         >
           <h1>
             Great tutorial
-              
           </h1>
         </EuiTitle>
       </EuiFlexItem>
@@ -56,6 +55,7 @@ exports[`props iconType 1`] = `
       >
         <EuiIcon
           size="xl"
+          title=""
           type="logoElastic"
         />
       </EuiFlexItem>
@@ -67,7 +67,6 @@ exports[`props iconType 1`] = `
         >
           <h1>
             Great tutorial
-              
           </h1>
         </EuiTitle>
       </EuiFlexItem>
@@ -97,7 +96,7 @@ exports[`props isBeta 1`] = `
         >
           <h1>
             Great tutorial
-              
+             
             <EuiBetaBadge
               label="Beta"
             />
@@ -130,7 +129,6 @@ exports[`props previewUrl 1`] = `
         >
           <h1>
             Great tutorial
-              
           </h1>
         </EuiTitle>
       </EuiFlexItem>
@@ -169,7 +167,6 @@ exports[`render 1`] = `
         >
           <h1>
             Great tutorial
-              
           </h1>
         </EuiTitle>
       </EuiFlexItem>
diff --git a/src/plugins/home/public/application/components/tutorial/introduction.js b/src/plugins/home/public/application/components/tutorial/introduction.js
index bc5f30622f1a..c36d150c42d3 100644
--- a/src/plugins/home/public/application/components/tutorial/introduction.js
+++ b/src/plugins/home/public/application/components/tutorial/introduction.js
@@ -76,7 +76,7 @@ function IntroductionUI({
   if (iconType) {
     icon = (
       <EuiFlexItem grow={false}>
-        <EuiIcon type={iconType} size="xl" />
+        <EuiIcon size="xl" title="" type={iconType} />
       </EuiFlexItem>
     );
   }
@@ -99,8 +99,13 @@ function IntroductionUI({
           <EuiFlexItem grow={false}>
             <EuiTitle size="l">
               <h1>
-                {title} &nbsp;
-                {betaBadge}
+                {title}
+                {betaBadge && (
+                  <>
+                    &nbsp;
+                    {betaBadge}
+                  </>
+                )}
               </h1>
             </EuiTitle>
           </EuiFlexItem>
diff --git a/x-pack/test/accessibility/apps/home.ts b/x-pack/test/accessibility/apps/home.ts
index f40976f09f9c..463673d966c2 100644
--- a/x-pack/test/accessibility/apps/home.ts
+++ b/x-pack/test/accessibility/apps/home.ts
@@ -52,14 +52,12 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
       await a11y.testAppSnapshot();
     });
 
-    // issue - logo images are missing alt -text https://github.com/elastic/kibana/issues/62239
-    it.skip('click on ActiveMQ logs panel to open tutorial meets a11y requirements', async () => {
+    it('click on ActiveMQ logs panel to open tutorial meets a11y requirements', async () => {
       await PageObjects.home.clickOnLogsTutorial();
       await a11y.testAppSnapshot();
     });
 
-    // https://github.com/elastic/kibana/issues/62239
-    it.skip('click on cloud tutorial meets a11y requirements', async () => {
+    it('click on cloud tutorial meets a11y requirements', async () => {
       await PageObjects.home.clickOnCloudTutorial();
       await a11y.testAppSnapshot();
     });