Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Tooltip: Improve accessibility for context menus #12462

Merged
merged 16 commits into from
May 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/accessibility/context_menu/ContextMenuTooltipButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ limitations under the License.

import React, { ComponentProps, forwardRef, Ref } from "react";

import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
import AccessibleButton from "../../components/views/elements/AccessibleButton";

type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleTooltipButton<T>> & {
type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleButton<T>> & {
// whether the context menu is currently open
isExpanded: boolean;
};
Expand All @@ -31,17 +31,17 @@ export const ContextMenuTooltipButton = forwardRef(function <T extends keyof JSX
ref: Ref<HTMLElement>,
) {
return (
<AccessibleTooltipButton
<AccessibleButton
{...props}
element={element as keyof JSX.IntrinsicElements}
onClick={onClick}
onContextMenu={onContextMenu ?? onClick ?? undefined}
aria-haspopup={true}
aria-expanded={isExpanded}
forceHide={isExpanded}
disableTooltip={isExpanded}
ref={ref}
>
{children}
</AccessibleTooltipButton>
</AccessibleButton>
);
});
7 changes: 7 additions & 0 deletions src/components/views/elements/AccessibleButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,11 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
* Callback for when the tooltip is opened or closed.
*/
onTooltipOpenChange?: TooltipProps["onOpenChange"];

/**
* Whether the tooltip should be disabled.
*/
disableTooltip?: TooltipProps["disabled"];
};

/**
Expand Down Expand Up @@ -140,6 +145,7 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
caption,
placement = "right",
onTooltipOpenChange,
disableTooltip,
...restProps
}: Props<T>,
ref: Ref<HTMLElement>,
Expand Down Expand Up @@ -217,6 +223,7 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
isTriggerInteractive={true}
placement={placement}
onOpenChange={onTooltipOpenChange}
disabled={disableTooltip}
>
{button}
</Tooltip>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -229,8 +229,8 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
class="mx_ThreadsActivityCentre_container"
>
<button
aria-controls="floating-ui-35"
aria-describedby="floating-ui-35"
aria-controls="floating-ui-39"
aria-describedby="floating-ui-39"
aria-expanded="true"
aria-haspopup="dialog"
aria-label="Threads"
Expand Down
Loading