PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Tooltip: Use AccessibleButton in RovingAccessibleTooltipButton (#12458)

Browse source 
* Use `AccessibleButton` in `RovingAccessibleTooltipButton`

* Update snapshots

* Update @vector-im/compound-web

* Update playwright

* Remove placement
This commit is contained in:
Florian Duros 2024-04-30 11:35:58 +02:00 committed by GitHub
parent 3634e665b1
commit 2df946b5b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 34 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -76,7 +76,7 @@
"@sentry/browser": "^7.0.0",
"@testing-library/react-hooks": "^8.0.1",
"@vector-im/compound-design-tokens": "^1.2.0",
"@vector-im/compound-web": "^4.0.2",
"@vector-im/compound-web": "^4.1.0",
"@zxcvbn-ts/core": "^3.0.4",
"@zxcvbn-ts/language-common": "^3.0.4",
"@zxcvbn-ts/language-en": "^3.0.2",

BIN
playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

11
src/accessibility/roving/RovingAccessibleTooltipButton.tsx
View file

@ -16,18 +16,15 @@ limitations under the License.
import React, { ComponentProps } from "react";
import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
import { useRovingTabIndex } from "../RovingTabIndex";
import { Ref } from "./types";
import AccessibleButton from "../../components/views/elements/AccessibleButton";
type Props<T extends keyof JSX.IntrinsicElements> = Omit<
ComponentProps<typeof AccessibleTooltipButton<T>>,
"tabIndex"
> & {
type Props<T extends keyof JSX.IntrinsicElements> = Omit<ComponentProps<typeof AccessibleButton<T>>, "tabIndex"> & {
inputRef?: Ref;
};
// Wrapper to allow use of useRovingTabIndex for simple AccessibleTooltipButtons outside of React Functional Components.
// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
export const RovingAccessibleTooltipButton = <T extends keyof JSX.IntrinsicElements>({
inputRef,
onFocus,
@ -35,7 +32,7 @@ export const RovingAccessibleTooltipButton = <T extends keyof JSX.IntrinsicEleme
}: Props<T>): JSX.Element => {
const [onFocusInternal, isActive, ref] = useRovingTabIndex(inputRef);
return (
<AccessibleTooltipButton
<AccessibleButton
{...props}
onFocus={(event: React.FocusEvent) => {
onFocusInternal();

30
src/components/views/messages/MessageActionBar.tsx
View file

@ -229,22 +229,16 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
}
};
const title = !hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation");
return (
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_iconButton mx_MessageActionBar_threadButton"
disabled={hasARelation}
tooltip={
<>
<div className="mx_Tooltip_title">
{!hasARelation
? _t("action|reply_in_thread")
: _t("threads|error_start_thread_existing_relation")}
</div>
</>
}
title={!hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation")}
title={title}
onClick={onClick}
onContextMenu={onClick}
placement="left"
>
<ThreadIcon />
</RovingAccessibleTooltipButton>
@ -509,18 +503,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
mx_MessageActionBar_iconButton: true,
mx_MessageActionBar_expandCollapseMessageButton: true,
});
const tooltip = (
<>
<div className="mx_Tooltip_title">
{this.props.isQuoteExpanded
? _t("timeline|mab|collapse_reply_chain")
: _t("timeline|mab|expand_reply_chain")}
</div>
<div className="mx_Tooltip_sub">
{_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
</div>
</>
);
toolbarOpts.push(
<RovingAccessibleTooltipButton
className={expandClassName}
@ -529,9 +512,10 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
? _t("timeline|mab|collapse_reply_chain")
: _t("timeline|mab|expand_reply_chain")
}
tooltip={tooltip}
caption={_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
onClick={this.props.toggleThreadExpanded}
key="expand"
placement="left"
>
{this.props.isQuoteExpanded ? <CollapseMessageIcon /> : <ExpandMessageIcon />}
</RovingAccessibleTooltipButton>,

5
src/components/views/pips/WidgetPip.tsx
View file

@ -34,7 +34,6 @@ import { WidgetType } from "../../../widgets/WidgetType";
import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
import WidgetUtils from "../../../utils/WidgetUtils";
import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions";
import { Alignment } from "../elements/Tooltip";
interface Props {
widgetId: string;
@ -128,9 +127,9 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
<Toolbar className="mx_WidgetPip_footer">
<RovingAccessibleTooltipButton
onClick={onLeaveClick}
tooltip={_t("action|leave")}
title={_t("action|leave")}
aria-label={_t("action|leave")}
alignment={Alignment.Top}
placement="top"
>
<HangupIcon className="mx_Icon mx_Icon_24" />
</RovingAccessibleTooltipButton>

13
src/components/views/rooms/MessageComposerFormatBar.tsx
View file

@ -127,16 +127,6 @@ interface IFormatButtonProps {
class FormatButton extends React.PureComponent<IFormatButtonProps> {
public render(): React.ReactNode {
const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
let shortcut;
if (this.props.shortcut) {
shortcut = <div className="mx_MessageComposerFormatBar_tooltipShortcut">{this.props.shortcut}</div>;
}
const tooltip = (
<div>
<div className="mx_Tooltip_title">{this.props.label}</div>
<div className="mx_Tooltip_sub">{shortcut}</div>
</div>
);
// element="button" and type="button" are necessary for the buttons to work on WebKit,
// otherwise the text is deselected before onClick can ever be called
@ -145,8 +135,9 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
element="button"
type="button"
onClick={this.props.onClick}
aria-label={this.props.label}
title={this.props.label}
tooltip={tooltip}
caption={this.props.shortcut}
className={className}
/>
);

12
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View file

@ -397,6 +397,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<button
aria-label="Bold"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
data-state="closed"
role="button"
tabindex="0"
type="button"
@ -404,6 +405,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<button
aria-label="Italics"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
data-state="closed"
role="button"
tabindex="-1"
type="button"
@ -411,6 +413,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
data-state="closed"
role="button"
tabindex="-1"
type="button"
@ -418,6 +421,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
data-state="closed"
role="button"
tabindex="-1"
type="button"
@ -425,6 +429,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
data-state="closed"
role="button"
tabindex="-1"
type="button"
@ -432,6 +437,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
data-state="closed"
role="button"
tabindex="-1"
type="button"
@ -644,6 +650,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<button
aria-label="Bold"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
data-state="closed"
role="button"
tabindex="0"
type="button"
@ -651,6 +658,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<button
aria-label="Italics"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
data-state="closed"
role="button"
tabindex="-1"
type="button"
@ -658,6 +666,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
data-state="closed"
role="button"
tabindex="-1"
type="button"
@ -665,6 +674,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
data-state="closed"
role="button"
tabindex="-1"
type="button"
@ -672,6 +682,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
data-state="closed"
role="button"
tabindex="-1"
type="button"
@ -679,6 +690,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
data-state="closed"
role="button"
tabindex="-1"
type="button"

2
test/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap
View file

@ -11,6 +11,7 @@ exports[`EventTileThreadToolbar renders 1`] = `
<div
aria-label="View in room"
class="mx_AccessibleButton mx_MessageActionBar_iconButton"
data-state="closed"
role="button"
tabindex="0"
>
@ -19,6 +20,7 @@ exports[`EventTileThreadToolbar renders 1`] = `
<div
aria-label="Copy link to thread"
class="mx_AccessibleButton mx_MessageActionBar_iconButton"
data-state="closed"
role="button"
tabindex="-1"
>

8
yarn.lock
View file

@ -3060,10 +3060,10 @@
dependencies:
svg2vectordrawable "^2.9.1"
"@vector-im/compound-web@^4.0.2":
version "4.0.2"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.0.2.tgz#cd89ca076b9b0528718e45110a4c8126e7556c63"
integrity sha512-MBqmSbtcWC6KJjuTWPZ6FYc83YrUJ9dOageUdbayjhVGZ/de/a+nl/vPIAX+5ic2QWUN7nn9hujfzQF69mbIeg==
"@vector-im/compound-web@^4.1.0":
version "4.1.0"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.1.0.tgz#45fa22e4e91b5fd4c2f535e040072990d5a33712"
integrity sha512-FQSJK7PaJ3dR1c1Q3TYVSShJBl9TwlrhKadnTWsPIX6xE+rvCAeujE50QbcEWdDlWeaJ9Hi0bVPlEssJ+eRwtQ==
dependencies:
"@floating-ui/react" "^0.26.9"
"@floating-ui/react-dom" "^2.0.8"