From c5da2f8c439f86f809d750b42aa11cdeef6b7c1f Mon Sep 17 00:00:00 2001
From: Holden Foreman <38192823+hs4man21@users.noreply.github.com>
Date: Thu, 5 Jan 2023 07:36:42 -0500
Subject: [PATCH] Add aria-hidden to 'Hide image' button in MediaGallery since
 the button is useless to screen reader users (#22513)

---
 app/javascript/mastodon/components/icon_button.js   | 4 ++++
 app/javascript/mastodon/components/media_gallery.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js
index 49858f2e23..b7daf82a47 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 bf7982ceab..e4a8be338e 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'>