Add alt text for images in list items (#9847)

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}

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

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}
       />
     )
   }