forked from fedi/mastodon
Add aria-hidden to 'Hide image' button in MediaGallery since the button is useless to screen reader users (#22513)
This commit is contained in:
parent
4dc9152b3e
commit
c5da2f8c43
|
@ -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}
|
||||||
|
|
|
@ -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'>
|
||||||
|
|
Loading…
Reference in a new issue