Enable "jsx-a11y/alt-text" and "jsx-a11y/label-has-associated-control" lint rules (#10361)

* enable "jsx-a11y/alt-text" lint rule

* enable "jsx-a11y/label-has-associated-control"

.eslintrc.js

@@ -81,11 +81,9 @@ module.exports = {
 
         // There are too many a11y violations to fix at once
         // Turn violated rules off until they are fixed
-        "jsx-a11y/alt-text": "off",
         "jsx-a11y/aria-activedescendant-has-tabindex": "off",
         "jsx-a11y/click-events-have-key-events": "off",
         "jsx-a11y/interactive-supports-focus": "off",
-        "jsx-a11y/label-has-associated-control": "off",
         "jsx-a11y/media-has-caption": "off",
         "jsx-a11y/mouse-events-have-key-events": "off",
         "jsx-a11y/no-autofocus": "off",

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -69,7 +69,7 @@ export class ExistingSource extends React.Component<ExistingSourceIProps> {
                 title={this.props.source.name}
                 onClick={this.onClick}
             >
-                <img className={thumbnailClasses} src={this.props.source.thumbnailURL} />
+                <img alt={this.props.source.name} className={thumbnailClasses} src={this.props.source.thumbnailURL} />
                 <span className="mx_desktopCapturerSourcePicker_source_name">{this.props.source.name}</span>
             </AccessibleButton>
         );

src/components/views/elements/SearchWarning.tsx

@@ -72,7 +72,7 @@ export default function SearchWarning({ isRoomEncrypted, kind }: IProps): JSX.El
     let text: ReactNode | undefined;
     let logo: JSX.Element | undefined;
     if (desktopBuilds?.get("available")) {
-        logo = <img src={desktopBuilds.get("logo")} />;
+        logo = <img alt={_t("Desktop app logo")} src={desktopBuilds.get("logo")} />;
         const buildUrl = desktopBuilds.get("url");
         switch (kind) {
             case WarningKind.Files:

src/components/views/messages/MStickerBody.tsx

@@ -50,6 +50,8 @@ export default class MStickerBody extends MImageBody {
         if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
         return (
             <img
+                aria-hidden
+                alt=""
                 className="mx_MStickerBody_placeholder"
                 src={require("../../../../res/img/icons-show-stickers.svg").default}
                 width="80"

src/components/views/room_settings/UrlPreviewSettings.tsx

@@ -79,21 +79,19 @@ export default class UrlPreviewSettings extends React.Component<IProps> {
 
             if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, SettingLevel.ROOM)) {
                 previewsForRoom = (
-                    <label>
                     <SettingsFlag
                         name="urlPreviewsEnabled"
                         level={SettingLevel.ROOM}
                         roomId={roomId}
                         isExplicit={true}
                     />
-                    </label>
                 );
             } else {
                 let str = _td("URL previews are enabled by default for participants in this room.");
                 if (!SettingsStore.getValueAt(SettingLevel.ROOM, "urlPreviewsEnabled", roomId, /*explicit=*/ true)) {
                     str = _td("URL previews are disabled by default for participants in this room.");
                 }
-                previewsForRoom = <label>{_t(str)}</label>;
+                previewsForRoom = <div>{_t(str)}</div>;
             }
         } else {
             previewsForAccount = _t(
@@ -127,7 +125,7 @@ export default class UrlPreviewSettings extends React.Component<IProps> {
         return (
             <SettingsFieldset legend={_t("URL Previews")} description={description}>
                 {previewsForRoom}
-                <label>{previewsForRoomAccount}</label>
+                {previewsForRoomAccount}
             </SettingsFieldset>
         );
     }

src/components/views/rooms/EntityTile.tsx

@@ -161,7 +161,12 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
         if (this.props.showInviteButton) {
             inviteButton = (
                 <div className="mx_EntityTile_invite">
-                    <img src={require("../../../../res/img/plus.svg").default} width="16" height="16" />
+                    <img
+                        alt={_t("Invite")}
+                        src={require("../../../../res/img/plus.svg").default}
+                        width="16"
+                        height="16"
+                    />
                 </div>
             );
         }

src/components/views/rooms/MessageComposer.tsx

@@ -538,6 +538,8 @@ export class MessageComposer extends React.Component<IProps, IState> {
                 <div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
                     <div className="mx_MessageComposer_replaced_valign">
                         <img
+                            aria-hidden
+                            alt=""
                             className="mx_MessageComposer_roomReplaced_icon"
                             src={require("../../../../res/img/room_replaced.svg").default}
                         />

src/i18n/strings/en_EN.json

@@ -1903,6 +1903,7 @@
     "Edit message": "Edit message",
     "Emoji": "Emoji",
     "Mod": "Mod",
+    "Invite": "Invite",
     "From a thread": "From a thread",
     "This event could not be displayed": "This event could not be displayed",
     " in <strong>%(room)s</strong>": " in <strong>%(room)s</strong>",
@@ -2009,7 +2010,6 @@
     "Hide Widgets": "Hide Widgets",
     "Show Widgets": "Show Widgets",
     "Search": "Search",
-    "Invite": "Invite",
     "Close call": "Close call",
     "View chat timeline": "View chat timeline",
     "Room options": "Room options",
@@ -2631,6 +2631,7 @@
     "Edit topic": "Edit topic",
     "Click to read topic": "Click to read topic",
     "Message search initialisation failed, check <a>your settings</a> for more information": "Message search initialisation failed, check <a>your settings</a> for more information",
+    "Desktop app logo": "Desktop app logo",
     "Use the <a>Desktop app</a> to see all encrypted files": "Use the <a>Desktop app</a> to see all encrypted files",
     "Use the <a>Desktop app</a> to search encrypted messages": "Use the <a>Desktop app</a> to search encrypted messages",
     "This version of %(brand)s does not support viewing some encrypted files": "This version of %(brand)s does not support viewing some encrypted files",