fix: remove nested links and buttons

[Olaleye-Blessing]

Signed-off-by: Olaleye Blessing [email protected]

Description
Fix wrongly nested links and buttons.
This PR fixes #2740

Notes for Reviewers
Still needs to update components that're affected by these changes.

Signed commits

• Yes, I signed my commits.

[Olaleye-Blessing]

I was planning to fix some layouts affected by this change but I can't cause I'm having a weird error while trying to run the site locally. This started today.

One obvious affected layout is the screenshot below:

the paragraph/text in each article is shifted downwards

[Olaleye-Blessing]

@leecalcote

[leecalcote]

I missed your ping here, @Olaleye-Blessing. @YashKamboj will you have a look at this?

[l5io]

🚀 Preview for commit a9ba56f at: https://629e95ad8c09091969e7509b--layer5.netlify.app

[YashKamboj]

@Olaleye-Blessing Are you still facing the errors, as i can see that you are using windows, why don't you use git bash to use make commands or wsl

[YashKamboj]

You did a great work , but i want to ask that why don't you use the simple solution like adding <form> around the button, it would a simple fix

[Olaleye-Blessing]

@Olaleye-Blessing Are you still facing the errors, as i can see that you are using windows, why don't you use git bash to use make commands or wsl

I formatted my laptop some weeks ago. I will try again and see if the error is gone.

[Olaleye-Blessing]

You did a great work , but i want to ask that why don't you use the simple solution like adding <form> around the button, it would a simple fix

I don't understand this. Could you explain further? I think what I'm trying to do is to prevent having a <button> being nested inside a <a>.

[YashKamboj]

@Olaleye-Blessing i meant something like this

<form action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

I also found something else too , not sure if it will work , give this a try too
<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

[Olaleye-Blessing]

@YashKamboj true, the form will work. But don't you think screen readers are going to have a problem?

According to css trick article, there should be a difference when using a link and a button. Using a button with onClick will show a button even for links.

[Olaleye-Blessing]

And I think my drafted pull request has fixed the issue, the only thing left is to correct the layouts that have been affected.

[Olaleye-Blessing]

@leecalcote @YashKamboj. Like I said earlier, the issue has been fixed but some layouts are affected. Should the layouts be fixed in this pull request?

[YashKamboj]

@Olaleye-Blessing i gues @Nikhil-Ladha could give you a better review on this one

[l5io]

🚀 Preview for commit f54ac69 at: https://62a6d04434343a770f57aa70--layer5.netlify.app

[Nikhil-Ladha]

Everything else seems fine, just that box-shadow effect on the news section on the home page needs to be fixed.
Can you please take care of that @Olaleye-Blessing ?

[Nikhil-Ladha]

That is, adding a box-shadow: none after this line will fix the issue.

[Nikhil-Ladha]

Please follow the instruction mentioned here to fix the DCO check

[Olaleye-Blessing]

@Nikhil-Ladha done

[l5io]

🚀 Preview for commit 16fe509 at: https://62a759b38cadbf0651423acc--layer5.netlify.app

[Nikhil-Ladha]

Looks good.

[leecalcote]

Uh-oh. There seems to be an adverse effect here of the Saffron (yellow) color button style going missing. Let's revert this PR to immediately get the styling returned and then look to have this PR's changes re-implemented.

[Nikhil-Ladha]

Uh-oh. There seems to be an adverse effect here of the Saffron (yellow) color button style going missing. Let's revert this PR to immediately get the styling returned and then look to have this PR's changes re-implemented.

Where did you see this effect? I couldn't find it 🤔

[Nikhil-Ladha]

Ok, now I see what went wrong.
The buttons having internal link got affected. @Olaleye-Blessing can you take a look and fix it?

[Olaleye-Blessing]

ok, I'll look into it.