Remove alt, use aria-label

src/components/views/elements/InlineSpinner.js

@@ -26,7 +26,6 @@ export default createReactClass({
         const w = this.props.w || 16;
         const h = this.props.h || 16;
         const imgClass = this.props.imgClassName || "";
-        const alt = this.props.alt || _t("Loading...");
 
         let divClass;
         let imageSource;
@@ -45,7 +44,7 @@ export default createReactClass({
                     width={w}
                     height={h}
                     className={imgClass}
-                    alt={alt}
+                    aria-label={_t("Loading...")}
                 />
             </div>
         );

src/components/views/elements/Spinner.js

@@ -20,7 +20,7 @@ import PropTypes from "prop-types";
 import {_t} from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
 
-const Spinner = ({w = 32, h = 32, imgClassName, alt, message}) => {
+const Spinner = ({w = 32, h = 32, imgClassName, message}) => {
     let divClass;
     let imageSource;
     if (SettingsStore.isFeatureEnabled('feature_new_spinner')) {
@@ -39,7 +39,7 @@ const Spinner = ({w = 32, h = 32, imgClassName, alt, message}) => {
                     width={w}
                     height={h}
                     className={imgClassName}
-                    alt={alt || _t("Loading...")}
+                    aria-label={_t("Loading...")}
                 />
         </div>
     );
@@ -48,7 +48,6 @@ Spinner.propTypes = {
     w: PropTypes.number,
     h: PropTypes.number,
     imgClassName: PropTypes.string,
-    alt: PropTypes.string,
     message: PropTypes.node,
 };
 

src/components/views/messages/MAudioBody.js

@@ -95,7 +95,7 @@ export default class MAudioBody extends React.Component {
             // Not sure how tall the audio player is so not sure how tall it should actually be.
             return (
                 <span className="mx_MAudioBody">
-                    <InlineSpinner alt={content.body} />
+                    <InlineSpinner />
                 </span>
             );
         }

src/components/views/messages/MImageBody.js

@@ -366,7 +366,7 @@ export default class MImageBody extends React.Component {
 
         // e2e image hasn't been decrypted yet
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            placeholder = <InlineSpinner alt={content.body} w={32} h={32} />;
+            placeholder = <InlineSpinner w={32} h={32} />;
         } else if (!this.state.imgLoaded) {
             // Deliberately, getSpinner is left unimplemented here, MStickerBody overides
             placeholder = this.getPlaceholder();

src/components/views/messages/MVideoBody.js

@@ -148,7 +148,7 @@ export default createReactClass({
             return (
                 <span className="mx_MVideoBody">
                     <div className="mx_MImageBody_thumbnail mx_MImageBody_thumbnail_spinner">
-                        <InlineSpinner alt={content.body} />
+                        <InlineSpinner />
                     </div>
                 </span>
             );