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 ( <> - + {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 ( ) } renderJazzicon() { - const { address, className, diameter } = this.props + const { address, className, diameter, alt } = this.props return ( ) } renderBlockie() { - const { address, className, diameter } = this.props + const { address, className, diameter, alt } = this.props return (
- +
) } @@ -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} /> ) }