[Glitch] Add aria-hidden to 'Hide image' button in MediaGallery since the button is useless to screen reader users
Port c5da2f8c43
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
1702907a9d
commit
4f335da8f8
|
@ -30,6 +30,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 = {
|
||||||
|
@ -39,6 +40,7 @@ export default class IconButton extends React.PureComponent {
|
||||||
animate: false,
|
animate: false,
|
||||||
overlay: false,
|
overlay: false,
|
||||||
tabIndex: '0',
|
tabIndex: '0',
|
||||||
|
ariaHidden: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -115,6 +117,7 @@ export default class IconButton extends React.PureComponent {
|
||||||
counter,
|
counter,
|
||||||
obfuscateCount,
|
obfuscateCount,
|
||||||
href,
|
href,
|
||||||
|
ariaHidden,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
@ -155,6 +158,7 @@ export default class IconButton extends React.PureComponent {
|
||||||
<button
|
<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}
|
||||||
|
|
|
@ -376,7 +376,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'>
|
||||||
|
|
Reference in New Issue