imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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")}

26
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
? "⌘ + ⇧ + D"
: _t(ALTERNATE_KEY_NAME[Key.CONTROL]) +
" + " +
_t(ALTERNATE_KEY_NAME[Key.SHIFT]) +
" + D"}
</div>
</div>
// 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"
}
/>
</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>
);
};