m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source
This commit is contained in:
David Walsh 2020-11-20 10:57:45 -06:00 committed by GitHub
parent 63f759e14e
commit 0315c6c20d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/app/components/app/asset-list-item/asset-list-item.js
View File

@ -113,6 +113,7 @@ const AssetListItem = ({
diameter={32} diameter={32}
address={tokenAddress} address={tokenAddress}
image={tokenImage} image={tokenImage}
alt={`${primary} ${tokenSymbol}`}
/> />
} }
midContent={midContent} midContent={midContent}

5
ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js
View File

@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { renderIcon } from '@download/blockies' import { renderIcon } from '@download/blockies'
const BlockieIdenticon = ({ address, diameter }) => { const BlockieIdenticon = ({ address, diameter, alt }) => {
const [dataUrl, setDataUrl] = useState(null) const [dataUrl, setDataUrl] = useState(null)
const canvasRef = useRef(null) const canvasRef = useRef(null)
@ -19,7 +19,7 @@ const BlockieIdenticon = ({ address, diameter }) => {
return ( return (
<> <>
<canvas ref={canvasRef} style={{ display: 'none' }} /> <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 = { BlockieIdenticon.propTypes = {
address: PropTypes.string.isRequired, address: PropTypes.string.isRequired,
diameter: PropTypes.number.isRequired, diameter: PropTypes.number.isRequired,
alt: PropTypes.string,
} }
export default BlockieIdenticon export default BlockieIdenticon

21
ui/app/components/ui/identicon/identicon.component.js
View File

@ -21,6 +21,7 @@ export default class Identicon extends PureComponent {
diameter: PropTypes.number, diameter: PropTypes.number,
image: PropTypes.string, image: PropTypes.string,
useBlockie: PropTypes.bool, useBlockie: PropTypes.bool,
alt: PropTypes.string,
} }
static defaultProps = { static defaultProps = {
@ -30,23 +31,24 @@ export default class Identicon extends PureComponent {
diameter: 46, diameter: 46,
image: undefined, image: undefined,
useBlockie: false, useBlockie: false,
alt: '',
} }
renderImage() { renderImage() {
const { className, diameter, image } = this.props const { className, diameter, image, alt } = this.props
return ( return (
<img <img
className={classnames('identicon', className)} className={classnames('identicon', className)}
src={image} src={image}
style={getStyles(diameter)} style={getStyles(diameter)}
alt="" alt={alt}
/> />
) )
} }
renderJazzicon() { renderJazzicon() {
const { address, className, diameter } = this.props const { address, className, diameter, alt } = this.props
return ( return (
<Jazzicon <Jazzicon
@ -54,19 +56,20 @@ export default class Identicon extends PureComponent {
diameter={diameter} diameter={diameter}
className={classnames('identicon', className)} className={classnames('identicon', className)}
style={getStyles(diameter)} style={getStyles(diameter)}
alt={alt}
/> />
) )
} }
renderBlockie() { renderBlockie() {
const { address, className, diameter } = this.props const { address, className, diameter, alt } = this.props
return ( return (
<div <div
className={classnames('identicon', className)} className={classnames('identicon', className)}
style={getStyles(diameter)} style={getStyles(diameter)}
> >
<BlockieIdenticon address={address} diameter={diameter} /> <BlockieIdenticon address={address} diameter={diameter} alt={alt} />
</div> </div>
) )
} }
@ -79,6 +82,7 @@ export default class Identicon extends PureComponent {
diameter, diameter,
useBlockie, useBlockie,
addBorder, addBorder,
alt,
} = this.props } = this.props
if (image) { if (image) {
@ -88,10 +92,7 @@ export default class Identicon extends PureComponent {
if (address) { if (address) {
const checksummedAddress = checksumAddress(address) const checksummedAddress = checksumAddress(address)
if ( if (contractMap[checksummedAddress]?.logo) {
contractMap[checksummedAddress] &&
contractMap[checksummedAddress].logo
) {
return this.renderJazzicon() return this.renderJazzicon()
} }
@ -109,7 +110,7 @@ export default class Identicon extends PureComponent {
className={classnames('identicon__eth-logo', className)} className={classnames('identicon__eth-logo', className)}
src="./images/eth_logo.svg" src="./images/eth_logo.svg"
style={getStyles(diameter)} style={getStyles(diameter)}
alt="" alt={alt}
/> />
) )
} }