Skip to content

Commit

Permalink
MenuItem: fix caption usage (#12455)
Browse files Browse the repository at this point in the history
* Add placement and fix additional span for `AccessibleButton`

* Use only `RovingAccessibleButton` in `MenuItem`

* Replace `tooltip` by `caption`

* Update snapshots
  • Loading branch information
florianduros authored Apr 26, 2024
1 parent 264e202 commit 45132ec
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 17 deletions.
13 changes: 2 additions & 11 deletions src/accessibility/context_menu/MenuItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions src/components/views/rooms/RoomList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/components/views/rooms/RoomListHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down

0 comments on commit 45132ec

Please sign in to comment.