diff options
| author | Holden Foreman <38192823+hs4man21@users.noreply.github.com> | 2023-01-05 07:36:42 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-01-05 13:36:42 +0100 |
| commit | c5da2f8c439f86f809d750b42aa11cdeef6b7c1f (patch) | |
| tree | d84f7ffbd336ecde8bad78173ba89f2eb44f72ce | |
| parent | 4dc9152b3e8e390aa18f823e0f5498cd02b8b496 (diff) | |
Add aria-hidden to 'Hide image' button in MediaGallery since the button is useless to screen reader users (#22513)
| -rw-r--r-- | app/javascript/mastodon/components/icon_button.js | 4 | ||||
| -rw-r--r-- | app/javascript/mastodon/components/media_gallery.js | 2 |
2 files changed, 5 insertions, 1 deletions
diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js index 49858f2e230..b7daf82a47f 100644 --- a/app/javascript/mastodon/components/icon_button.js +++ b/app/javascript/mastodon/components/icon_button.js @@ -27,6 +27,7 @@ export default class IconButton extends React.PureComponent { counter: PropTypes.number, obfuscateCount: PropTypes.bool, href: PropTypes.string, + ariaHidden: PropTypes.bool, }; static defaultProps = { @@ -36,6 +37,7 @@ export default class IconButton extends React.PureComponent { animate: false, overlay: false, tabIndex: '0', + ariaHidden: false, }; state = { @@ -102,6 +104,7 @@ export default class IconButton extends React.PureComponent { counter, obfuscateCount, href, + ariaHidden, } = this.props; const { @@ -142,6 +145,7 @@ export default class IconButton extends React.PureComponent { type='button' aria-label={title} aria-expanded={expanded} + aria-hidden={ariaHidden} title={title} className={classes} onClick={this.handleClick} diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index bf7982ceab6..e4a8be338e1 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -345,7 +345,7 @@ class MediaGallery extends React.PureComponent { </button> ); } 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 { spoilerButton = ( <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'> |