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

MenuItem: fix caption usage (#12455)

Browse source 
* Add placement and fix additional span for `AccessibleButton`

* Use only `RovingAccessibleButton` in `MenuItem`

* Replace `tooltip` by `caption`

* Update snapshots
This commit is contained in:
Florian Duros 2024-04-26 12:17:13 +02:00 committed by GitHub
parent 264e202ccd
commit 45132ec6aa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 8 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/accessibility/context_menu/MenuItem.tsx
View file

@ -18,25 +18,16 @@ limitations under the License.
import React from "react";
import { RovingAccessibleButton, RovingAccessibleTooltipButton } from "../RovingTabIndex";
import { RovingAccessibleButton } from "../RovingTabIndex";
interface IProps extends React.ComponentProps<typeof RovingAccessibleButton> {
label?: string;
tooltip?: string;
}
// Semantic component for representing a role=menuitem
export const MenuItem: React.FC<IProps> = ({ children, label, tooltip, ...props }) => {
export const MenuItem: React.FC<IProps> = ({ children, label, ...props }) => {
const ariaLabel = props["aria-label"] || label;
if (tooltip) {
return (
<RovingAccessibleTooltipButton {...props} role="menuitem" aria-label={ariaLabel} title={tooltip}>
{children}
</RovingAccessibleTooltipButton>
);
}
return (
<RovingAccessibleButton {...props} role="menuitem" aria-label={ariaLabel}>
{children}

8
src/components/views/rooms/RoomList.tsx
View file

@ -160,7 +160,7 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
showSpaceInvite(activeSpace);
}}
disabled={!canInvite}
tooltip={canInvite ? undefined : _t("spaces|error_no_permission_invite")}
title={canInvite ? undefined : _t("spaces|error_no_permission_invite")}
/>
)}
</IconizedContextMenuOptionList>
@ -250,7 +250,7 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateRoomItem", e);
}}
disabled={!canAddRooms}
tooltip={canAddRooms ? undefined : _t("spaces|error_no_permission_create_room")}
title={canAddRooms ? undefined : _t("spaces|error_no_permission_create_room")}
/>
{videoRoomsEnabled && (
<IconizedContextMenuOption
@ -266,7 +266,7 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
);
}}
disabled={!canAddRooms}
tooltip={canAddRooms ? undefined : _t("spaces|error_no_permission_create_room")}
title={canAddRooms ? undefined : _t("spaces|error_no_permission_create_room")}
>
<BetaPill />
</IconizedContextMenuOption>
@ -281,7 +281,7 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
showAddExistingRooms(activeSpace);
}}
disabled={!canAddRooms}
tooltip={canAddRooms ? undefined : _t("spaces|error_no_permission_add_room")}
title={canAddRooms ? undefined : _t("spaces|error_no_permission_add_room")}
/>
</>
) : null}

4
src/components/views/rooms/RoomListHeader.tsx
View file

@ -267,7 +267,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
closePlusMenu();
}}
disabled={!canAddSubRooms}
tooltip={!canAddSubRooms ? _t("spaces|error_no_permission_add_room") : undefined}
title={!canAddSubRooms ? _t("spaces|error_no_permission_add_room") : undefined}
/>
{canCreateSpaces && (
<IconizedContextMenuOption
@ -280,7 +280,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
closePlusMenu();
}}
disabled={!canAddSubSpaces}
tooltip={!canAddSubSpaces ? _t("spaces|error_no_permission_add_space") : undefined}
title={!canAddSubSpaces ? _t("spaces|error_no_permission_add_space") : undefined}
>
<BetaPill />
</IconizedContextMenuOption>