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

Fix TAC opening with keyboard (#12285)

Browse source 
* Fix TAC opening with keyboard

* Use compound tooltip and icon button

* Revert "Fix TAC opening with keyboard"

This reverts commit 5a1e5d0c

* Add missing aria-label

* Update tests

* Add tests

* Fix visual regression

* Fix remaining tooltip

* Fix ref typing

* Fix typing
This commit is contained in:
Florian Duros 2024-02-29 15:07:46 +01:00 • committed by GitHub
parent 5bd0afce30
commit 29b79ef351
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 65 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
View file

@ -16,17 +16,16 @@
* /
*/
import React, { forwardRef, HTMLProps } from "react";
import React, { ComponentProps, forwardRef } from "react";
import { Icon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
import classNames from "classnames";
import { IndicatorIcon } from "@vector-im/compound-web";
import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
import { _t } from "../../../../languageHandler";
import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
import { notificationLevelToIndicator } from "../../../../utils/notifications";
interface ThreadsActivityCentreButtonProps extends HTMLProps<HTMLDivElement> {
interface ThreadsActivityCentreButtonProps extends ComponentProps<typeof IconButton> {
/**
* Display the `Treads` label next to the icon.
*/
@ -40,28 +39,36 @@ interface ThreadsActivityCentreButtonProps extends HTMLProps<HTMLDivElement> {
/**
* A button to open the thread activity centre.
*/
export const ThreadsActivityCentreButton = forwardRef<HTMLDivElement, ThreadsActivityCentreButtonProps>(
export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, ThreadsActivityCentreButtonProps>(
function ThreadsActivityCentreButton({ displayLabel, notificationLevel, ...props }, ref): React.JSX.Element {
// Disable tooltip when the label is displayed
const openTooltip = displayLabel ? false : undefined;
return (
<AccessibleTooltipButton
className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })}
title={_t("common|threads")}
// @ts-ignore
// ref nightmare...
ref={ref}
forceHide={displayLabel}
aria-expanded={displayLabel}
{...props}
>
<IndicatorIcon
className="mx_ThreadsActivityCentreButton_IndicatorIcon"
<Tooltip label={_t("common|threads")} side="right" open={openTooltip}>
<IconButton
aria-label={_t("common|threads")}
className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })}
indicator={notificationLevelToIndicator(notificationLevel)}
size="24px"
{...props}
ref={ref}
>
<Icon className="mx_ThreadsActivityCentreButton_Icon" />
</IndicatorIcon>
{displayLabel && _t("common|threads")}
</AccessibleTooltipButton>
<>
<Icon className="mx_ThreadsActivityCentreButton_Icon" />
{/* This is dirty, but we need to add the label to the indicator icon */}
{displayLabel && (
<Text
className="mx_ThreadsActivityCentreButton_Text"
as="span"
size="md"
title={_t("common|threads")}
>
{_t("common|threads")}
</Text>
)}
</>
</IconButton>
</Tooltip>
);
},
);