binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: modified link behaviour to improve accessibility (#6284)

Browse source
This commit is contained in:
Vamsi Krishna 2024-12-27 17:46:40 +05:30 • committed by GitHub
parent 4159d12959
commit 3c6bbaef3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

34
web/core/components/issues/issue-detail/links/link-item.tsx
View file

@ -2,7 +2,7 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { Pencil, Trash2, LinkIcon, ExternalLink } from "lucide-react"; import { Pencil, Trash2, LinkIcon, Copy } from "lucide-react";
import { EIssueServiceType } from "@plane/constants"; import { EIssueServiceType } from "@plane/constants";
import { TIssueServiceType } from "@plane/types"; import { TIssueServiceType } from "@plane/types";
// ui // ui
@ -48,33 +48,33 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
<div className="flex items-center gap-2.5 truncate flex-grow"> <div className="flex items-center gap-2.5 truncate flex-grow">
<LinkIcon className="size-4 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200" /> <LinkIcon className="size-4 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200" />
<Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}> <Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
<span <a
href={linkDetail.url}
target="_blank"
rel="noopener noreferrer"
className="truncate text-sm cursor-pointer flex-grow" className="truncate text-sm cursor-pointer flex-grow"
onClick={() => {
copyTextToClipboard(linkDetail.url);
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Link copied!",
message: "Link copied to clipboard",
});
}}
> >
{linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url} {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
</span> </a>
</Tooltip> </Tooltip>
</div> </div>
<div className="flex items-center gap-1 flex-shrink-0"> <div className="flex items-center gap-1 flex-shrink-0">
<p className="p-1 text-xs align-bottom leading-5 text-custom-text-400 group-hover-text-custom-text-200"> <p className="p-1 text-xs align-bottom leading-5 text-custom-text-400 group-hover-text-custom-text-200">
{calculateTimeAgoShort(linkDetail.created_at)} {calculateTimeAgoShort(linkDetail.created_at)}
</p> </p>
<a <span
href={linkDetail.url} onClick={() => {
target="_blank" copyTextToClipboard(linkDetail.url);
rel="noopener noreferrer" setToast({
type: TOAST_TYPE.SUCCESS,
title: "Link copied!",
message: "Link copied to clipboard",
});
}}
className="relative grid place-items-center rounded p-1 text-custom-text-400 outline-none group-hover:text-custom-text-200 cursor-pointer hover:bg-custom-background-80" className="relative grid place-items-center rounded p-1 text-custom-text-400 outline-none group-hover:text-custom-text-200 cursor-pointer hover:bg-custom-background-80"
> >
<ExternalLink className="h-3.5 w-3.5 stroke-[1.5]" /> <Copy className="h-3.5 w-3.5 stroke-[1.5]" />
</a> </span>
<CustomMenu <CustomMenu
ellipsis ellipsis
buttonClassName="text-custom-text-400 group-hover:text-custom-text-200" buttonClassName="text-custom-text-400 group-hover:text-custom-text-200"

21
web/core/components/modules/links/list-item.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react"; import { Copy, LinkIcon, Pencil, Trash2 } from "lucide-react";
// plane types // plane types
import { ILinkDetails } from "@plane/types"; import { ILinkDetails } from "@plane/types";
// plane ui // plane ui
@ -45,12 +45,9 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
<LinkIcon className="h-3 w-3 flex-shrink-0" /> <LinkIcon className="h-3 w-3 flex-shrink-0" />
</span> </span>
<Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}> <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
<span <a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-xs">
className="cursor-pointer truncate text-xs"
onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
>
{link.title && link.title !== "" ? link.title : link.url} {link.title && link.title !== "" ? link.title : link.url}
</span> </a>
</Tooltip> </Tooltip>
</div> </div>
@ -68,14 +65,12 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
<Pencil className="size-3 stroke-[1.5] text-custom-text-200" /> <Pencil className="size-3 stroke-[1.5] text-custom-text-200" />
</button> </button>
)} )}
<a <span
href={link.url} onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
target="_blank" className="grid place-items-center p-1 hover:bg-custom-background-80 cursor-pointer"
rel="noopener noreferrer"
className="grid place-items-center p-1 hover:bg-custom-background-80"
> >
<ExternalLink className="size-3 stroke-[1.5] text-custom-text-200" /> <Copy className="h-3.5 w-3.5 stroke-[1.5]" />
</a> </span>
{isEditingAllowed && ( {isEditingAllowed && (
<button <button
type="button" type="button"