Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Tooltip: improve accessibility of spaces (#12497)

Browse Source 
* Migrate to `AccessibleButtons`

* Update snapshots
This commit is contained in:
Florian Duros 2024-05-03 16:07:11 +02:00 committed by GitHub
parent 050f61752f
commit 2f3c84f1f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 52 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/structures/LeftPanel.tsx
View File

@ -26,7 +26,6 @@ import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
import { Action } from "../../dispatcher/actions";
import RoomSearch from "./RoomSearch";
import ResizeNotifier from "../../utils/ResizeNotifier";
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import SpaceStore from "../../stores/spaces/SpaceStore";
import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
import { getKeyBindingsManager } from "../../KeyBindingsManager";
@ -41,7 +40,7 @@ import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
import { UIComponent } from "../../settings/UIFeature";
import { ButtonEvent } from "../views/elements/AccessibleButton";
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
import PosthogTrackers from "../../PosthogTrackers";
import PageType from "../../PageTypes";
import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton";
@ -333,7 +332,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
// to start a new call
if (LegacyCallHandler.instance.getSupportsPstnProtocol()) {
dialPadButton = (
<AccessibleTooltipButton
<AccessibleButton
className={classNames("mx_LeftPanel_dialPadButton", {})}
onClick={this.onDialPad}
title={_t("left_panel|open_dial_pad")}
@ -344,7 +343,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
let rightButton: JSX.Element | undefined;
if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) {
rightButton = (
<AccessibleTooltipButton
<AccessibleButton
className="mx_LeftPanel_exploreButton"
onClick={this.onExplore}
title={_t("action|explore_rooms")}

35
src/components/structures/SpaceHierarchy.tsx
View File

@ -15,7 +15,6 @@ limitations under the License.
*/
import React, {
ComponentProps,
Dispatch,
KeyboardEvent,
KeyboardEventHandler,
@ -62,7 +61,6 @@ import InfoTooltip from "../views/elements/InfoTooltip";
import TextWithTooltip from "../views/elements/TextWithTooltip";
import { useStateToggle } from "../../hooks/useStateToggle";
import { getChildOrder } from "../../stores/spaces/SpaceStore";
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import { Linkify, topicToHtml } from "../../HtmlUtils";
import { useDispatcher } from "../../hooks/useDispatcher";
import { Action } from "../../dispatcher/actions";
@ -75,7 +73,6 @@ import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPayload";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../KeyBindingsManager";
import { Alignment } from "../views/elements/Tooltip";
import { getTopic } from "../../hooks/room/useTopic";
import { SdkContextClass } from "../../contexts/SDKContext";
import { getDisplayAliasForAliasSet } from "../../Rooms";
@ -148,7 +145,7 @@ const Tile: React.FC<ITileProps> = ({
let button: ReactElement;
if (busy) {
button = (
<AccessibleTooltipButton
<AccessibleButton
disabled={true}
onClick={onJoinClick}
kind="primary_outline"
@ -157,7 +154,7 @@ const Tile: React.FC<ITileProps> = ({
title={_t("space|joining_space")}
>
<Spinner w={24} h={24} />
</AccessibleTooltipButton>
</AccessibleButton>
);
} else if (joinedRoom || room.join_rule === JoinRule.Knock) {
// If the room is knockable, show the "View" button even if we are not a member; that
@ -670,25 +667,16 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
const disabled = !selectedRelations.length || removing || saving;
let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
let props: Partial<ComponentProps<typeof AccessibleTooltipButton>> = {};
if (!selectedRelations.length) {
Button = AccessibleTooltipButton;
props = {
tooltip: _t("space|select_room_below"),
alignment: Alignment.Top,
};
}
let buttonText = _t("common|saving");
if (!saving) {
buttonText = selectionAllSuggested ? _t("space|unmark_suggested") : _t("space|mark_suggested");
}
const title = !selectedRelations.length ? _t("space|select_room_below") : undefined;
return (
<>
<Button
{...props}
<AccessibleButton
onClick={async (): Promise<void> => {
setRemoving(true);
try {
@ -719,11 +707,13 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
}}
kind="danger_outline"
disabled={disabled}
aria-label={removing ? _t("redact|ongoing") : _t("action|remove")}
title={title}
placement="top"
>
{removing ? _t("redact|ongoing") : _t("action|remove")}
</Button>
<Button
{...props}
</AccessibleButton>
<AccessibleButton
onClick={async (): Promise<void> => {
setSaving(true);
try {
@ -750,9 +740,12 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
}}
kind="primary_outline"
disabled={disabled}
aria-label={buttonText}
title={title}
placement="top"
>
{buttonText}
</Button>
</AccessibleButton>
</>
);
};

3
src/components/structures/SpaceRoomView.tsx
View File

@ -60,7 +60,6 @@ import {
defaultRoomsRenderer,
} from "../views/dialogs/AddExistingToSpaceDialog";
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import ErrorBoundary from "../views/elements/ErrorBoundary";
import Field from "../views/elements/Field";
import RoomFacePile from "../views/elements/RoomFacePile";
@ -248,7 +247,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
let settingsButton;
if (shouldShowSpaceSettings(space)) {
settingsButton = (
<AccessibleTooltipButton
<AccessibleButton
className="mx_SpaceRoomView_landing_settingsButton"
onClick={() => {
showSpaceSettings(space);

9
src/components/views/spaces/QuickSettingsButton.tsx
View File

@ -18,7 +18,6 @@ import React from "react";
import classNames from "classnames";
import { _t } from "../../../languageHandler";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu";
import AccessibleButton from "../elements/AccessibleButton";
import StyledCheckbox from "../elements/StyledCheckbox";
@ -130,16 +129,16 @@ const QuickSettingsButton: React.FC<{
return (
<>
<AccessibleTooltipButton
<AccessibleButton
className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
onClick={openMenu}
title={_t("quick_settings|title")}
aria-label={_t("quick_settings|title")}
title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
ref={handle}
forceHide={!isPanelCollapsed}
aria-expanded={!isPanelCollapsed}
>
{!isPanelCollapsed ? _t("common|settings") : null}
</AccessibleTooltipButton>
</AccessibleButton>
{contextMenu}
</>

3
src/components/views/spaces/SpaceCreateMenu.tsx
View File

@ -38,7 +38,6 @@ import {
import { logger } from "matrix-js-sdk/src/logger";
import { _t } from "../../../languageHandler";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import ContextMenu, { ChevronFace } from "../../structures/ContextMenu";
import createRoom, { IOpts as ICreateOpts } from "../../../createRoom";
import MatrixClientContext, { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
@ -310,7 +309,7 @@ const SpaceCreateMenu: React.FC<{
} else {
body = (
<React.Fragment>
<AccessibleTooltipButton
<AccessibleButton
className="mx_SpaceCreateMenu_back"
onClick={() => setVisibility(null)}
title={_t("action|go_back")}

18
src/components/views/spaces/SpacePanel.tsx
View File

@ -34,7 +34,6 @@ import { _t } from "../../../languageHandler";
import { useContextMenu } from "../../structures/ContextMenu";
import SpaceCreateMenu from "./SpaceCreateMenu";
import { SpaceButton, SpaceItem } from "./SpaceTreeLevel";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { useEventEmitter, useEventEmitterState } from "../../../hooks/useEventEmitter";
import SpaceStore from "../../../stores/spaces/SpaceStore";
import {
@ -73,6 +72,7 @@ import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
import { UIComponent } from "../../../settings/UIFeature";
import { ThreadsActivityCentre } from "./threads-activity-centre/";
import AccessibleButton from "../elements/AccessibleButton";
const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@ -389,24 +389,18 @@ const SpacePanel: React.FC = () => {
aria-label={_t("common|spaces")}
>
<UserMenu isPanelCollapsed={isPanelCollapsed}>
<AccessibleTooltipButton
<AccessibleButton
className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })}
onClick={() => setPanelCollapsed(!isPanelCollapsed)}
title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
tooltip={
<div>
<div className="mx_Tooltip_title">
{isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
</div>
<div className="mx_Tooltip_sub">
{IS_MAC
// TODO should use a kbd element for accessibility https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
caption={
IS_MAC
? "⌘ + ⇧ + D"
: _t(ALTERNATE_KEY_NAME[Key.CONTROL]) +
" + " +
_t(ALTERNATE_KEY_NAME[Key.SHIFT]) +
" + D"}
</div>
</div>
" + D"
}
/>
</UserMenu>

11
src/components/views/spaces/SpaceTreeLevel.tsx
View File

@ -45,12 +45,11 @@ import { NotificationLevel } from "../../../stores/notifications/NotificationLev
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { NotificationState } from "../../../stores/notifications/NotificationState";
import SpaceContextMenu from "../context_menus/SpaceContextMenu";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
type ButtonProps<T extends keyof JSX.IntrinsicElements> = Omit<
ComponentProps<typeof AccessibleTooltipButton<T>>,
ComponentProps<typeof AccessibleButton<T>>,
"title" | "onClick" | "size" | "element"
> & {
space?: Room;
@ -143,17 +142,17 @@ export const SpaceButton = <T extends keyof JSX.IntrinsicElements>({
const onClick = props.onClick ?? (selected && space ? viewSpaceHome : activateSpace);
return (
<AccessibleTooltipButton
<AccessibleButton
{...props}
className={classNames("mx_SpaceButton", className, {
mx_SpaceButton_active: selected,
mx_SpaceButton_hasMenuOpen: menuDisplayed,
mx_SpaceButton_narrow: isNarrow,
})}
title={label}
aria-label={label}
title={!isNarrow || menuDisplayed ? undefined : label}
onClick={onClick}
onContextMenu={openMenu}
forceHide={!isNarrow || menuDisplayed}
ref={handle}
tabIndex={tabIndex}
onFocus={onFocus}
@ -177,7 +176,7 @@ export const SpaceButton = <T extends keyof JSX.IntrinsicElements>({
{contextMenu}
</div>
</AccessibleTooltipButton>
</AccessibleButton>
);
};

4
test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
View File

@ -32,7 +32,9 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
>
<div
aria-disabled="true"
aria-label="Remove"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
data-state="closed"
disabled=""
role="button"
tabindex="0"
@ -41,7 +43,9 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
</div>
<div
aria-disabled="true"
aria-label="Mark as not suggested"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline mx_AccessibleButton_disabled"
data-state="closed"
disabled=""
role="button"
tabindex="0"

12
test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
View File

@ -35,6 +35,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div
aria-label="Expand"
class="mx_AccessibleButton mx_SpacePanel_toggleCollapse"
data-state="closed"
role="button"
tabindex="0"
/>
@ -55,6 +56,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div
aria-label="Home"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_home mx_SpaceButton_narrow"
data-state="closed"
role="button"
tabindex="0"
>
@ -91,6 +93,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div
aria-label="Favourites"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_favourites mx_SpaceButton_narrow"
data-state="closed"
role="button"
tabindex="-1"
>
@ -119,6 +122,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div
aria-label="People"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_people mx_SpaceButton_narrow"
data-state="closed"
role="button"
tabindex="-1"
>
@ -147,6 +151,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div
aria-label="Other rooms"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_orphans mx_SpaceButton_narrow"
data-state="closed"
role="button"
tabindex="-1"
>
@ -175,6 +180,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div
aria-label="Conferences"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_videoRooms mx_SpaceButton_narrow"
data-state="closed"
role="button"
tabindex="-1"
>
@ -203,6 +209,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div
aria-label="Create a space"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_new mx_SpaceButton_narrow"
data-state="closed"
data-testid="create-space-button"
role="button"
tabindex="-1"
@ -229,8 +236,8 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
class="mx_ThreadsActivityCentre_container"
>
<button
aria-controls="floating-ui-7"
aria-describedby="floating-ui-7"
aria-controls="floating-ui-35"
aria-describedby="floating-ui-35"
aria-expanded="true"
aria-haspopup="dialog"
aria-label="Threads"
@ -272,6 +279,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
aria-expanded="false"
aria-label="Quick settings"
class="mx_AccessibleButton mx_QuickSettingsButton"
data-state="closed"
role="button"
tabindex="0"
/>