From 0315c6c20dae4e47d98ad73278955c9c31c0a29c Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 20 Nov 2020 10:57:45 -0600
Subject: [PATCH] Add alt text for images in list items (#9847)

---
 .../app/asset-list-item/asset-list-item.js    |  1 +
 .../blockieIdenticon.component.js             |  5 +++--
 .../ui/identicon/identicon.component.js       | 21 ++++++++++---------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/ui/app/components/app/asset-list-item/asset-list-item.js b/ui/app/components/app/asset-list-item/asset-list-item.js
index 274f0576b..b5164e39c 100644
--- a/ui/app/components/app/asset-list-item/asset-list-item.js
+++ b/ui/app/components/app/asset-list-item/asset-list-item.js
@@ -113,6 +113,7 @@ const AssetListItem = ({
           diameter={32}
           address={tokenAddress}
           image={tokenImage}
+          alt={`${primary} ${tokenSymbol}`}
         />
       }
       midContent={midContent}
diff --git a/ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js b/ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js
index 390ef02a3..05d201e22 100644
--- a/ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js
+++ b/ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { renderIcon } from '@download/blockies'
 
-const BlockieIdenticon = ({ address, diameter }) => {
+const BlockieIdenticon = ({ address, diameter, alt }) => {
   const [dataUrl, setDataUrl] = useState(null)
   const canvasRef = useRef(null)
 
@@ -19,7 +19,7 @@ const BlockieIdenticon = ({ address, diameter }) => {
   return (
     <>
       <canvas ref={canvasRef} style={{ display: 'none' }} />
-      <img src={dataUrl} height={diameter} width={diameter} alt="" />
+      <img src={dataUrl} height={diameter} width={diameter} alt={alt || ''} />
     </>
   )
 }
@@ -27,6 +27,7 @@ const BlockieIdenticon = ({ address, diameter }) => {
 BlockieIdenticon.propTypes = {
   address: PropTypes.string.isRequired,
   diameter: PropTypes.number.isRequired,
+  alt: PropTypes.string,
 }
 
 export default BlockieIdenticon
diff --git a/ui/app/components/ui/identicon/identicon.component.js b/ui/app/components/ui/identicon/identicon.component.js
index 840108f60..79d7cf1b5 100644
--- a/ui/app/components/ui/identicon/identicon.component.js
+++ b/ui/app/components/ui/identicon/identicon.component.js
@@ -21,6 +21,7 @@ export default class Identicon extends PureComponent {
     diameter: PropTypes.number,
     image: PropTypes.string,
     useBlockie: PropTypes.bool,
+    alt: PropTypes.string,
   }
 
   static defaultProps = {
@@ -30,23 +31,24 @@ export default class Identicon extends PureComponent {
     diameter: 46,
     image: undefined,
     useBlockie: false,
+    alt: '',
   }
 
   renderImage() {
-    const { className, diameter, image } = this.props
+    const { className, diameter, image, alt } = this.props
 
     return (
       <img
         className={classnames('identicon', className)}
         src={image}
         style={getStyles(diameter)}
-        alt=""
+        alt={alt}
       />
     )
   }
 
   renderJazzicon() {
-    const { address, className, diameter } = this.props
+    const { address, className, diameter, alt } = this.props
 
     return (
       <Jazzicon
@@ -54,19 +56,20 @@ export default class Identicon extends PureComponent {
         diameter={diameter}
         className={classnames('identicon', className)}
         style={getStyles(diameter)}
+        alt={alt}
       />
     )
   }
 
   renderBlockie() {
-    const { address, className, diameter } = this.props
+    const { address, className, diameter, alt } = this.props
 
     return (
       <div
         className={classnames('identicon', className)}
         style={getStyles(diameter)}
       >
-        <BlockieIdenticon address={address} diameter={diameter} />
+        <BlockieIdenticon address={address} diameter={diameter} alt={alt} />
       </div>
     )
   }
@@ -79,6 +82,7 @@ export default class Identicon extends PureComponent {
       diameter,
       useBlockie,
       addBorder,
+      alt,
     } = this.props
 
     if (image) {
@@ -88,10 +92,7 @@ export default class Identicon extends PureComponent {
     if (address) {
       const checksummedAddress = checksumAddress(address)
 
-      if (
-        contractMap[checksummedAddress] &&
-        contractMap[checksummedAddress].logo
-      ) {
+      if (contractMap[checksummedAddress]?.logo) {
         return this.renderJazzicon()
       }
 
@@ -109,7 +110,7 @@ export default class Identicon extends PureComponent {
         className={classnames('identicon__eth-logo', className)}
         src="./images/eth_logo.svg"
         style={getStyles(diameter)}
-        alt=""
+        alt={alt}
       />
     )
   }