Tooltip: improve accessibility of the right panel (#12490)

* Move to `AccessibleButton`

* Update snapshots

* Update playwright snapshots
pull/28217/head
Florian Duros 2024-05-03 10:44:04 +02:00 committed by GitHub
parent 3059b5b1e2
commit 95ee2979c8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 11 additions and 12 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

View File

@ -21,9 +21,7 @@ limitations under the License.
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import classNames from "classnames"; import classNames from "classnames";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import { ButtonEvent } from "../elements/AccessibleButton";
import { Alignment } from "../elements/Tooltip";
interface IProps { interface IProps {
// Whether this button is highlighted // Whether this button is highlighted
@ -52,11 +50,11 @@ export default class HeaderButton extends React.Component<IProps> {
}); });
return ( return (
<AccessibleTooltipButton <AccessibleButton
{...props} {...props}
aria-current={isHighlighted ? "true" : "false"} aria-current={isHighlighted ? "true" : "false"}
title={title} title={title}
alignment={Alignment.Bottom} placement="bottom"
className={classes} className={classes}
onClick={onClick} onClick={onClick}
/> />

View File

@ -49,7 +49,6 @@ import WidgetUtils from "../../../utils/WidgetUtils";
import { IntegrationManagers } from "../../../integrations/IntegrationManagers"; import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import WidgetAvatar from "../avatars/WidgetAvatar"; import WidgetAvatar from "../avatars/WidgetAvatar";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import WidgetStore, { IApp } from "../../../stores/WidgetStore"; import WidgetStore, { IApp } from "../../../stores/WidgetStore";
import { E2EStatus } from "../../../utils/ShieldUtils"; import { E2EStatus } from "../../../utils/ShieldUtils";
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
@ -184,18 +183,17 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
return ( return (
<div className={classes} ref={handle}> <div className={classes} ref={handle}>
<AccessibleTooltipButton <AccessibleButton
className="mx_RoomSummaryCard_icon_app" className="mx_RoomSummaryCard_icon_app"
onClick={onOpenWidgetClick} onClick={onOpenWidgetClick}
// only show a tooltip if the widget is pinned // only show a tooltip if the widget is pinned
title={openTitle} title={!(isPinned || isMaximised) ? undefined : openTitle}
forceHide={!(isPinned || isMaximised)}
disabled={isPinned || isMaximised} disabled={isPinned || isMaximised}
> >
<WidgetAvatar app={app} size="20px" /> <WidgetAvatar app={app} size="20px" />
<span>{name}</span> <span>{name}</span>
{subtitle} {subtitle}
</AccessibleTooltipButton> </AccessibleButton>
{canModifyWidget && ( {canModifyWidget && (
<ContextMenuTooltipButton <ContextMenuTooltipButton
@ -206,13 +204,13 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
/> />
)} )}
<AccessibleTooltipButton <AccessibleButton
className="mx_RoomSummaryCard_app_pinToggle" className="mx_RoomSummaryCard_app_pinToggle"
onClick={togglePin} onClick={togglePin}
title={pinTitle} title={pinTitle}
disabled={cannotPin} disabled={cannotPin}
/> />
<AccessibleTooltipButton <AccessibleButton
className="mx_RoomSummaryCard_app_maximiseToggle" className="mx_RoomSummaryCard_app_maximiseToggle"
onClick={toggleMaximised} onClick={toggleMaximised}
title={maximiseTitle} title={maximiseTitle}

View File

@ -6,6 +6,7 @@ exports[`LegacyRoomHeaderButtons-test.tsx should render 1`] = `
aria-current="false" aria-current="false"
aria-label="Chat" aria-label="Chat"
class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_timelineCardButton" class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_timelineCardButton"
data-state="closed"
role="button" role="button"
tabindex="0" tabindex="0"
/> />
@ -13,6 +14,7 @@ exports[`LegacyRoomHeaderButtons-test.tsx should render 1`] = `
aria-current="false" aria-current="false"
aria-label="Threads" aria-label="Threads"
class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_threadsButton" class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_threadsButton"
data-state="closed"
data-testid="threadsButton" data-testid="threadsButton"
role="button" role="button"
tabindex="0" tabindex="0"
@ -21,6 +23,7 @@ exports[`LegacyRoomHeaderButtons-test.tsx should render 1`] = `
aria-current="false" aria-current="false"
aria-label="Room info" aria-label="Room info"
class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_roomSummaryButton" class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_roomSummaryButton"
data-state="closed"
role="button" role="button"
tabindex="0" tabindex="0"
/> />