docs icon indicating copy to clipboard operation
docs copied to clipboard

Use HTMLAnchorElement for links instead of HTMLButtonElement

Open Tejs1 opened this issue 1 year ago • 7 comments

Describe this PR

Refactored CustomLink to use a styled <a> tag for better accessibility and security.

Changes

  • Replaced CustomButton with a Link styled component.
  • Updated CustomLink to include href, target, and rel directly.
  • Removed goToPath and window.open.
  • Added noreferrer attribute is a crucial security measure for external links opened in a new tab.
  • Removed inline-block for link to be wrapped
  • Updated CSS breaking changes due to <a> tag integration

image

What issue does this fix?

Improves link handling for security and accessibility. Fixes https://github.com/prisma/docs/issues/5582 Fixes https://github.com/prisma/docs/issues/5574 Fixes https://github.com/prisma/docs/issues/5666 Fixes https://github.com/prisma/docs/issues/5653 Fixes https://github.com/prisma/docs/issues/5544 Fixes https://github.com/prisma/docs/issues/5428

Any other relevant information

Has Open in new tab context menu, middle click works and link Preview in bottom #5582 #5666 #5653

Screenshot 2024-02-27 120006

Link is aligned Properly #5574

Screenshot 2024-02-27 1205s46

Added Line break to Links #5428

Screenshot 2024-02-27 124940

Tejs1 avatar Feb 27 '24 06:02 Tejs1

@Tejs1 is attempting to deploy a commit to the Prisma Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Feb 27 '24 06:02 vercel[bot]

Hey @janpio , there could be additional breaking changes similar to below one. Could you please approve the Vercel fork deployment so we can identify any issues using Lost Pixel Bot?

image

Tejs1 avatar Feb 27 '24 09:02 Tejs1

I can't, but I can let the relevant team know to look at this.

(Thanks for taking a look at all these issues, quite some are from my observations - so I am looking forward to get these fixed)

janpio avatar Feb 27 '24 11:02 janpio

Glad to help 🙌

Tejs1 avatar Feb 27 '24 12:02 Tejs1

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 27, 2024 1:37pm

vercel[bot] avatar Feb 27 '24 13:02 vercel[bot]

Thanks for doing this, @Tejs1. I have approved the deployment. The changes look good to me, but we will need to wait for a web engineer to take a look before we can push this through. I really appreciate the help! We will get this in once we know it's all working correctly.

mhessdev avatar Feb 27 '24 13:02 mhessdev

@carlagn @mhessdev Any updates? lemme know if you want any changes. I tested with lost pixel in my repo only link line breaks were changed in 95 shots[pages/routes] like following image

Tejs1 avatar Feb 29 '24 15:02 Tejs1

Hi @Tejs1

Thanks for your PR here. We recently updated our docs repo from Gatsby to Docusaurus. We resolved a number of accessibility issues. I'm unsure if this is one of them. You can find our modified links here: https://github.com/prisma/docs/blob/a114584a9b2800b686eaaa7f388c683e61a350d4/src/theme/MDXComponents.tsx#L95-L107

jharrell avatar Apr 24 '24 23:04 jharrell