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 React from "react";
import { RovingAccessibleButton, RovingAccessibleTooltipButton } from "../RovingTabIndex"; import { RovingAccessibleButton } from "../RovingTabIndex";
interface IProps extends React.ComponentProps<typeof RovingAccessibleButton> { interface IProps extends React.ComponentProps<typeof RovingAccessibleButton> {
label?: string; label?: string;
tooltip?: string;
} }
// Semantic component for representing a role=menuitem // 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; const ariaLabel = props["aria-label"] || label;
if (tooltip) {
return (
<RovingAccessibleTooltipButton {...props} role="menuitem" aria-label={ariaLabel} title={tooltip}>
{children}
</RovingAccessibleTooltipButton>
);
}
return ( return (
<RovingAccessibleButton {...props} role="menuitem" aria-label={ariaLabel}> <RovingAccessibleButton {...props} role="menuitem" aria-label={ariaLabel}>
{children} {children}

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

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

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

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