gearheads
/
mastodon
Archived
2
0
Fork 0
Code Releases 4 Activity

Add aria-hidden to 'Hide image' button in MediaGallery since the button is useless to screen reader users (#22513)

gh/stable
Holden Foreman 2023-01-05 07:36:42 -05:00 committed by GitHub
parent 4dc9152b3e
commit c5da2f8c43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/components/icon_button.js
View File

@ -27,6 +27,7 @@ export default class IconButton extends React.PureComponent {
counter: PropTypes.number, counter: PropTypes.number,
obfuscateCount: PropTypes.bool, obfuscateCount: PropTypes.bool,
href: PropTypes.string, href: PropTypes.string,
ariaHidden: PropTypes.bool,
}; };
static defaultProps = { static defaultProps = {
@ -36,6 +37,7 @@ export default class IconButton extends React.PureComponent {
animate: false, animate: false,
overlay: false, overlay: false,
tabIndex: '0', tabIndex: '0',
ariaHidden: false,
}; };
state = { state = {
@ -102,6 +104,7 @@ export default class IconButton extends React.PureComponent {
counter, counter,
obfuscateCount, obfuscateCount,
href, href,
ariaHidden,
} = this.props; } = this.props;
const { const {
@ -142,6 +145,7 @@ export default class IconButton extends React.PureComponent {
type='button' type='button'
aria-label={title} aria-label={title}
aria-expanded={expanded} aria-expanded={expanded}
aria-hidden={ariaHidden}
title={title} title={title}
className={classes} className={classes}
onClick={this.handleClick} onClick={this.handleClick}

2
app/javascript/mastodon/components/media_gallery.js
View File

@ -345,7 +345,7 @@ class MediaGallery extends React.PureComponent {
</button> </button>
); );
} else if (visible) { } else if (visible) {
spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible, { number: size })} icon='eye-slash' overlay onClick={this.handleOpen} />; spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible, { number: size })} icon='eye-slash' overlay onClick={this.handleOpen} ariaHidden />;
} else { } else {
spoilerButton = ( spoilerButton = (
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'> <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>