Tweak rendering of icons for a11y (#31358)

* Tweak rendering of icons in legacy video feed Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused classes Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in face pile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in overflow tile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in room search view Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in top unread messages bar Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in space basic settings Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in thread summary tile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in legacy room tile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in incoming call toast Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in labs jump to date Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in field validation Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in mini avatar uploader Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in info tooltip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in network dropdown Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-04 13:04:13 +00:00
parent 52d082aed6
commit d1f45da51a
33 changed files with 227 additions and 408 deletions
--- a/src/components/structures/RoomSearchView.tsx
+++ b/src/components/structures/RoomSearchView.tsx
@@ -14,6 +14,7 @@ import {
    THREAD_RELATION_TYPE,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import ScrollPanel from "./ScrollPanel";
 import Spinner from "../views/elements/Spinner";
@@ -153,7 +154,9 @@ export const RoomSearchView = ({
            <div
                className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner"
                data-testid="messagePanelSearchSpinner"
-            />
+            >
+                <SearchIcon />
+            </div>
        );
    }

--- a/src/components/views/directory/NetworkDropdown.tsx
+++ b/src/components/views/directory/NetworkDropdown.tsx
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { without } from "lodash";
 import React, { useCallback, useEffect, useState } from "react";
 import { MatrixError } from "matrix-js-sdk/src/matrix";
+import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -190,7 +191,9 @@ export const NetworkDropdown: React.FC<IProps> = ({ protocols, config, setConfig
                          className="mx_NetworkDropdown_removeServer"
                          title={_t("spotlight|public_rooms|network_dropdown_remove_server_adornment", { roomServer })}
                          onClick={() => setUserDefinedServers(without(userDefinedServers, roomServer))}
-                      />
+                      >
+                          <CloseIcon />
+                      </AccessibleButton>
                  ),
              }
            : {}),
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@@ -10,6 +10,7 @@ import React, { type FC, type HTMLAttributes, type ReactNode } from "react";
 import { type RoomMember } from "matrix-js-sdk/src/matrix";
 import { AvatarStack, Tooltip } from "@vector-im/compound-web";
 import classNames from "classnames";
+import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import MemberAvatar from "../avatars/MemberAvatar";
 import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
@@ -56,7 +57,7 @@ const FacePile: FC<IProps> = ({
    const pileContents = (
        <>
            {faces}
-            {overflow ? <span className="mx_FacePile_more" /> : null}
+            {overflow ? <OverflowHorizontalIcon className="mx_FacePile_more" /> : null}
        </>
    );

--- a/src/components/views/elements/InfoTooltip.tsx
+++ b/src/components/views/elements/InfoTooltip.tsx
@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactNode } from "react";
 import classNames from "classnames";
 import { Tooltip } from "@vector-im/compound-web";
+import { ErrorSolidIcon, InfoIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";

@@ -30,14 +31,14 @@ export default class InfoTooltip extends React.PureComponent<TooltipProps> {
    public render(): React.ReactNode {
        const { tooltip, children, className, kind } = this.props;
        const title = _t("info_tooltip_title");
-        const iconClassName =
-            kind !== InfoTooltipKind.Warning ? "mx_InfoTooltip_icon_info" : "mx_InfoTooltip_icon_warning";

        // Tooltip are forced on the right for a more natural feel to them on info icons
        return (
            <Tooltip description={tooltip || title} placement="right">
                <div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
-                    <span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
+                    <span className="mx_InfoTooltip_icon" aria-label={title}>
+                        {kind !== InfoTooltipKind.Warning ? <InfoIcon /> : <ErrorSolidIcon />}
+                    </span>
                    {children}
                </div>
            </Tooltip>
--- a/src/components/views/elements/MiniAvatarUploader.tsx
+++ b/src/components/views/elements/MiniAvatarUploader.tsx
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import classNames from "classnames";
 import { EventType } from "matrix-js-sdk/src/matrix";
 import React, { useContext, useRef, useState, type MouseEvent, type ReactNode } from "react";
+import { TakePhotoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
@@ -86,7 +87,11 @@ const MiniAvatarUploader: React.FC<IProps> = ({
                {children}

                <div className="mx_MiniAvatarUploader_indicator">
-                    {busy ? <Spinner w={20} h={20} /> : <div className="mx_MiniAvatarUploader_cameraIcon" />}
+                    {busy ? (
+                        <Spinner w={20} h={20} />
+                    ) : (
+                        <TakePhotoSolidIcon className="mx_MiniAvatarUploader_cameraIcon" />
+                    )}
                </div>
            </AccessibleButton>
        </React.Fragment>
--- a/src/components/views/elements/Validation.tsx
+++ b/src/components/views/elements/Validation.tsx
@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, type ReactNode } from "react";
 import classNames from "classnames";
 import memoizeOne from "memoize-one";
+import { CheckIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 type Data = Pick<IFieldState, "value" | "allowEmpty">;

@@ -173,6 +174,7 @@ export default function withValidation<T = void, D = void>({
                        });
                        return (
                            <li key={result.key} className={classes}>
+                                {result.valid ? <CheckIcon /> : <CloseIcon />}
                                {result.text}
                            </li>
                        );
--- a/src/components/views/messages/DateSeparator.tsx
+++ b/src/components/views/messages/DateSeparator.tsx
@@ -11,6 +11,7 @@ import React, { type JSX } from "react";
 import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { capitalize } from "lodash";
+import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t, getUserLanguage } from "../../../languageHandler";
 import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../../DateUtils";
@@ -312,7 +313,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
                <h2 className="mx_DateSeparator_dateHeading" aria-hidden="true">
                    {this.getLabel()}
                </h2>
-                <div className="mx_DateSeparator_chevron" />
+                <ChevronDownIcon className="mx_DateSeparator_chevron" />
                {contextMenu}
            </ContextMenuTooltipButton>
        );
--- a/src/components/views/rooms/OverflowTileView.tsx
+++ b/src/components/views/rooms/OverflowTileView.tsx
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import Icon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+import { ChevronRightIcon, OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -24,9 +24,10 @@ export const OverflowTileView: React.FC<Props> = ({ remaining, onClick }) => {
    return (
        <AccessibleButton onClick={onClick} className="mx_OverflowTileView">
            <div className="mx_OverflowTileView_icon">
-                <Icon height="36px" width="36px" />
+                <OverflowHorizontalIcon height="36px" width="36px" />
            </div>
            <div className="mx_OverflowTileView_text">{_t("common|and_n_others", { count: remaining })}</div>
+            <ChevronRightIcon className="mx_OverflowTileView_chevron" />
        </AccessibleButton>
    );
 };
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -11,6 +11,7 @@ import React, { createRef } from "react";
 import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import classNames from "classnames";
+import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import type { Call } from "../../../models/Call";
 import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
@@ -332,7 +333,9 @@ class RoomTile extends React.PureComponent<Props, State> {
                    onClick={this.onGeneralMenuOpenClick}
                    title={_t("room|context_menu|title")}
                    isExpanded={!!this.state.generalMenuPosition}
-                />
+                >
+                    <OverflowHorizontalIcon />
+                </ContextMenuTooltipButton>
                {this.state.generalMenuPosition && (
                    <RoomGeneralContextMenu
                        {...contextMenuBelow(this.state.generalMenuPosition)}
--- a/src/components/views/rooms/ThreadSummary.tsx
+++ b/src/components/views/rooms/ThreadSummary.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useContext } from "react";
 import { type Thread, ThreadEvent, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { IndicatorIcon } from "@vector-im/compound-web";
-import ThreadIconSolid from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
+import { ThreadsSolidIcon, ChevronRightIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import { CardContext } from "../right_panel/context";
@@ -58,11 +58,13 @@ const ThreadSummary: React.FC<IProps> = ({ mxEvent, thread, ...props }) => {
            aria-label={_t("threads|open_thread")}
        >
            <IndicatorIcon size="24px" indicator={notificationLevelToIndicator(level)}>
-                <ThreadIconSolid />
+                <ThreadsSolidIcon />
            </IndicatorIcon>
            <span className="mx_ThreadSummary_replies_amount">{countSection}</span>
            <ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
-            <div className="mx_ThreadSummary_chevron" />
+            <div className="mx_ThreadSummary_chevron">
+                <ChevronRightIcon />
+            </div>
        </AccessibleButton>
    );
 };
--- a/src/components/views/rooms/TopUnreadMessagesBar.tsx
+++ b/src/components/views/rooms/TopUnreadMessagesBar.tsx
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
+import { ChevronUpIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
@@ -24,12 +25,16 @@ export default class TopUnreadMessagesBar extends React.PureComponent<IProps> {
                    className="mx_TopUnreadMessagesBar_scrollUp"
                    title={_t("room|jump_read_marker")}
                    onClick={this.props.onScrollUpClick}
-                />
+                >
+                    <ChevronUpIcon />
+                </AccessibleButton>
                <AccessibleButton
                    className="mx_TopUnreadMessagesBar_markAsRead"
                    title={_t("notifications|mark_all_read")}
                    onClick={this.props.onCloseClick}
-                />
+                >
+                    <CloseIcon />
+                </AccessibleButton>
            </div>
        );
    }
--- a/src/components/views/spaces/SpaceBasicSettings.tsx
+++ b/src/components/views/spaces/SpaceBasicSettings.tsx
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { type ChangeEvent, useRef, useState } from "react";
+import { TakePhotoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -71,7 +72,9 @@ export const SpaceAvatar: React.FC<Pick<IProps, "avatarUrl" | "avatarDisabled" |
                    <AccessibleButton
                        className="mx_SpaceBasicSettings_avatar"
                        onClick={() => avatarUploadRef.current?.click()}
-                    />
+                    >
+                        <TakePhotoSolidIcon />
+                    </AccessibleButton>
                    <AccessibleButton
                        onClick={() => avatarUploadRef.current?.click()}
                        kind="link"
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -13,6 +13,7 @@ import React from "react";
 import { type CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
 import { logger } from "matrix-js-sdk/src/logger";
 import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
+import { MicOffSolidIcon, MicOnSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import SettingsStore from "../../../settings/SettingsStore";
 import LegacyCallHandler from "../../../LegacyCallHandler";
@@ -179,14 +180,14 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
            mx_VideoFeed_secondary: secondary,
            mx_VideoFeed_voice: this.state.videoMuted,
        });
-        const micIconClasses = classnames("mx_VideoFeed_mic", {
-            mx_VideoFeed_mic_muted: this.state.audioMuted,
-            mx_VideoFeed_mic_unmuted: !this.state.audioMuted,
-        });

        let micIcon;
        if (feed.purpose !== SDPStreamMetadataPurpose.Screenshare && !pipMode) {
-            micIcon = <div className={micIconClasses} />;
+            micIcon = (
+                <div className="mx_VideoFeed_mic">
+                    {this.state.audioMuted ? <MicOffSolidIcon /> : <MicOnSolidIcon />}
+                </div>
+            );
        }

        let content;
--- a/src/toasts/IncomingCallToast.tsx
+++ b/src/toasts/IncomingCallToast.tsx
@@ -10,11 +10,9 @@ import React, { type JSX, useCallback, useEffect, useRef, useState } from "react
 import { type Room, type MatrixEvent, type RoomMember, RoomEvent, EventType } from "matrix-js-sdk/src/matrix";
 import { Button, ToggleInput, Tooltip, TooltipProvider } from "@vector-im/compound-web";
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
-import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
-import CrossIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
-import { VoiceCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { CheckIcon, VoiceCallIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { AvatarWithDetails } from "@element-hq/web-shared-components";

 import { _t } from "../languageHandler";
@@ -127,7 +125,7 @@ function DeclineCallButtonWithNotificationEvent({
                kind="primary"
                destructive
                disabled={declining}
-                Icon={CrossIcon}
+                Icon={CloseIcon}
                size="sm"
            >
                {_t("action|decline")}
@@ -332,7 +330,9 @@ export function IncomingCallToast({ notificationEvent }: Props): JSX.Element {
                    className="mx_IncomingCallToast_closeButton"
                    onClick={onCloseClick}
                    title={_t("action|close")}
-                />
+                >
+                    <CloseIcon />
+                </AccessibleButton>
            </>
        </TooltipProvider>
    );