treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Add alt text for preview card thumbnails 

Port ecb00fa5ac to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
lolsob-rspec
Christian Schmidt 2023-08-03 15:41:51 +02:00 committed by Claire
parent 33024cca51
commit 0e6c62a4c7
3 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/flavours/glitch/features/explore/components/story.jsx
View File

@ -23,6 +23,7 @@ export default class Story extends PureComponent {
author: PropTypes.string, author: PropTypes.string,
sharedTimes: PropTypes.number, sharedTimes: PropTypes.number,
thumbnail: PropTypes.string, thumbnail: PropTypes.string,
thumbnailDescription: PropTypes.string,
blurhash: PropTypes.string, blurhash: PropTypes.string,
expanded: PropTypes.bool, expanded: PropTypes.bool,
}; };
@ -34,7 +35,7 @@ export default class Story extends PureComponent {
handleImageLoad = () => this.setState({ thumbnailLoaded: true }); handleImageLoad = () => this.setState({ thumbnailLoaded: true });
render () { render () {
const { expanded, url, title, lang, publisher, author, publishedAt, sharedTimes, thumbnail, blurhash } = this.props; const { expanded, url, title, lang, publisher, author, publishedAt, sharedTimes, thumbnail, thumbnailDescription, blurhash } = this.props;
const { thumbnailLoaded } = this.state; const { thumbnailLoaded } = this.state;
@ -50,7 +51,7 @@ export default class Story extends PureComponent {
{thumbnail ? ( {thumbnail ? (
<> <>
<div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div> <div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div>
<img src={thumbnail} onLoad={this.handleImageLoad} alt='' role='presentation' /> <img src={thumbnail} onLoad={this.handleImageLoad} alt={thumbnailDescription} title={thumbnailDescription} lang={lang} />
</> </>
) : <Skeleton />} ) : <Skeleton />}
</div> </div>

1
app/javascript/flavours/glitch/features/explore/links.jsx
View File

@ -67,6 +67,7 @@ class Links extends PureComponent {
author={link.get('author_name')} author={link.get('author_name')}
sharedTimes={link.getIn(['history', 0, 'accounts']) * 1 + link.getIn(['history', 1, 'accounts']) * 1} sharedTimes={link.getIn(['history', 0, 'accounts']) * 1 + link.getIn(['history', 1, 'accounts']) * 1}
thumbnail={link.get('image')} thumbnail={link.get('image')}
thumbnailDescription={link.get('image_description')}
blurhash={link.get('blurhash')} blurhash={link.get('blurhash')}
/> />
))} ))}

3
app/javascript/flavours/glitch/features/status/components/card.jsx
View File

@ -178,7 +178,8 @@ export default class Card extends PureComponent {
dummy={!useBlurhash} dummy={!useBlurhash}
/> />
); );
let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />; const thumbnailDescription = card.get('image_description');
const thumbnail = <img src={card.get('image')} alt={thumbnailDescription} title={thumbnailDescription} lang={language} style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
let spoilerButton = ( let spoilerButton = (
<button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'> <button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'> <span className='spoiler-button__overlay__label'>