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 { 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 { TIssueServiceType } from "@plane/types";
// ui
@ -48,8 +48,21 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
<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" />
<Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
<span
<a
href={linkDetail.url}
target="_blank"
rel="noopener noreferrer"
className="truncate text-sm cursor-pointer flex-grow"
>
{linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
</a>
</Tooltip>
</div>
<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">
{calculateTimeAgoShort(linkDetail.created_at)}
</p>
<span
onClick={() => {
copyTextToClipboard(linkDetail.url);
setToast({
@ -58,23 +71,10 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
message: "Link copied to clipboard",
});
}}
>
{linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
</span>
</Tooltip>
</div>
<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">
{calculateTimeAgoShort(linkDetail.created_at)}
</p>
<a
href={linkDetail.url}
target="_blank"
rel="noopener noreferrer"
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]" />
</a>
<Copy className="h-3.5 w-3.5 stroke-[1.5]" />
</span>
<CustomMenu
ellipsis
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 { ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
import { Copy, LinkIcon, Pencil, Trash2 } from "lucide-react";
// plane types
import { ILinkDetails } from "@plane/types";
// plane ui
@ -45,12 +45,9 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
<LinkIcon className="h-3 w-3 flex-shrink-0" />
</span>
<Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
<span
className="cursor-pointer truncate text-xs"
onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
>
<a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-xs">
{link.title && link.title !== "" ? link.title : link.url}
</span>
</a>
</Tooltip>
</div>
@ -68,14 +65,12 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
<Pencil className="size-3 stroke-[1.5] text-custom-text-200" />
</button>
)}
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="grid place-items-center p-1 hover:bg-custom-background-80"
<span
onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
className="grid place-items-center p-1 hover:bg-custom-background-80 cursor-pointer"
>
<ExternalLink className="size-3 stroke-[1.5] text-custom-text-200" />
</a>
<Copy className="h-3.5 w-3.5 stroke-[1.5]" />
</span>
{isEditingAllowed && (
<button
type="button"