From 3268217156e3ea70ca0165b4987493ab285a3456 Mon Sep 17 00:00:00 2001
From: Atanas Atanasov <hi@atanas.info>
Date: Tue, 7 Nov 2023 12:32:01 +0200
Subject: [PATCH] Address SonarLint findings (#2635)

---
 src/components/funding/index.tsx              |  4 +--
 src/data/social.tsx                           |  6 ++---
 src/pages/blog/[slug].tsx                     |  4 +--
 src/pages/portfolio/open-source/[slug].tsx    |  4 +--
 src/styles/funding.css                        |  6 ++++-
 src/styles/social.css                         |  6 +++++
 .../footer/__snapshots__/index.tsx.snap       |  3 +--
 .../funding/__snapshots__/index.tsx.snap      | 24 ++++++-----------
 .../layout/__snapshots__/index.tsx.snap       |  3 +--
 tests/src/components/mdx/index.tsx            |  4 +--
 tests/src/pages/__snapshots__/404.tsx.snap    |  3 +--
 .../src/pages/__snapshots__/_offline.tsx.snap |  3 +--
 tests/src/pages/__snapshots__/about.tsx.snap  |  9 +++----
 .../src/pages/__snapshots__/articles.tsx.snap | 27 +++++++------------
 .../pages/__snapshots__/certificates.tsx.snap |  3 +--
 tests/src/pages/__snapshots__/index.tsx.snap  | 12 +++------
 .../__snapshots__/interactive-resume.tsx.snap |  6 ++---
 tests/src/pages/__snapshots__/music.tsx.snap  | 24 ++++++-----------
 .../pages/__snapshots__/occupation.tsx.snap   |  3 +--
 tests/src/pages/__snapshots__/resume.tsx.snap |  6 ++---
 tests/src/pages/__snapshots__/skills.tsx.snap |  6 ++---
 tests/src/pages/__snapshots__/slides.tsx.snap |  9 +++----
 tests/src/pages/__snapshots__/social.tsx.snap | 12 ++++-----
 .../pages/__snapshots__/testimonials.tsx.snap |  6 ++---
 .../src/pages/__snapshots__/timeline.tsx.snap |  3 +--
 tests/src/pages/__snapshots__/videos.tsx.snap |  9 +++----
 .../pages/blog/__snapshots__/[slug].tsx.snap  |  6 ++---
 .../pages/blog/__snapshots__/index.tsx.snap   |  3 +--
 .../automotive-applications.tsx.snap          |  3 +--
 .../__snapshots__/email-templates.tsx.snap    |  6 ++---
 .../portfolio/__snapshots__/index.tsx.snap    |  3 +--
 .../mobile-applications.tsx.snap              |  3 +--
 .../__snapshots__/personal-projects.tsx.snap  |  3 +--
 .../__snapshots__/web-applications.tsx.snap   | 12 +++------
 .../open-source/__snapshots__/[slug].tsx.snap | 12 +++------
 .../open-source/__snapshots__/index.tsx.snap  |  3 +--
 .../pages/stats/__snapshots__/github.tsx.snap | 24 ++++++-----------
 .../pages/stats/__snapshots__/gitlab.tsx.snap | 12 +++------
 .../pages/stats/__snapshots__/index.tsx.snap  |  3 +--
 .../pages/stats/__snapshots__/npm.tsx.snap    |  3 +--
 40 files changed, 112 insertions(+), 189 deletions(-)

diff --git a/src/components/funding/index.tsx b/src/components/funding/index.tsx
index 139a0455b..dbf20bc58 100644
--- a/src/components/funding/index.tsx
+++ b/src/components/funding/index.tsx
@@ -33,7 +33,7 @@ export const Funding: FC<Readonly<Props>> = ({ data }) => {
 				Sponsor me
 			</Button>
 
-			<div className="c-funding__backdrop" onClick={() => setOpen(false)} />
+			<button className="c-funding__backdrop" onClick={() => setOpen(false)} />
 
 			<svg viewBox="-100 -100 700 700" ref={knob} className="c-funding__knob">
 				<g>
@@ -42,7 +42,7 @@ export const Funding: FC<Readonly<Props>> = ({ data }) => {
 					))}
 				</g>
 
-				<g className="c-funding__trigger" role="button" onClick={() => setOpen(false)}>
+				<g className="c-funding__trigger" onClick={() => setOpen(false)}>
 					<circle cx="250" cy="250" r="30" />
 
 					<text textAnchor="middle" x="250" y="260" fill="var(--color-primary)" fontSize="2.5em">
diff --git a/src/data/social.tsx b/src/data/social.tsx
index 62c4ba5a2..bac34a508 100644
--- a/src/data/social.tsx
+++ b/src/data/social.tsx
@@ -23,7 +23,6 @@ export const socialItems: SocialItem[] = [
 				height={400}
 				loading="lazy"
 				className="github-frame"
-				frameBorder={0}
 			/>
 		)
 	},
@@ -37,7 +36,9 @@ export const socialItems: SocialItem[] = [
 				className="twitter-timeline"
 				data-theme="dark"
 				data-height={400}
-			/>
+			>
+				@scriptexbg on Twitter
+			</a>
 		)
 	},
 	{
@@ -65,7 +66,6 @@ export const socialItems: SocialItem[] = [
 				height={400}
 				loading="lazy"
 				className="spotify-frame"
-				frameBorder={0}
 			/>
 		)
 	},
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
index 65134b907..00fc60205 100644
--- a/src/pages/blog/[slug].tsx
+++ b/src/pages/blog/[slug].tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import type { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 
 import { Routes } from '@data/routes';
-import { MDX, Layout, Title } from '@components';
+import { MDX as Mdx, Layout, Title } from '@components';
 import type { BlogPostPageData } from '@scripts/types';
 import { getPostBySlug, getAllPosts } from '@lib/markdown';
 import { Article, getArticlesFromCMS, getFundingFromCMS, getPartnersFromCMS } from '@scripts/cms';
@@ -21,7 +21,7 @@ export const OpenSourceProject: FC<Readonly<InferGetStaticPropsType<typeof getSt
 		<Layout funding={funding} partners={partners}>
 			<Title text={`${match?.title ?? post.slug} | Atanas Atanasov | Senior Javascript/Typescript Engineer`} />
 
-			<MDX
+			<Mdx
 				id="blog-post"
 				back={Routes.BLOG}
 				title={match?.title ?? post.slug ?? ''}
diff --git a/src/pages/portfolio/open-source/[slug].tsx b/src/pages/portfolio/open-source/[slug].tsx
index c2cb63220..ffa845c3c 100644
--- a/src/pages/portfolio/open-source/[slug].tsx
+++ b/src/pages/portfolio/open-source/[slug].tsx
@@ -5,7 +5,7 @@ import type { GetStaticProps, InferGetStaticPropsType } from 'next';
 
 import { Routes } from '@data/routes';
 import { openSourceProjects } from '@data/pages';
-import { MDX, Layout, Title } from '@components';
+import { MDX as Mdx, Layout, Title } from '@components';
 import { getPostBySlug, getAllPosts } from '@lib/markdown';
 import { getFundingFromCMS, getPartnersFromCMS } from '@scripts/cms';
 import type { PortfolioOpenSourceProjectPageData } from '@scripts/types';
@@ -38,7 +38,7 @@ export const OpenSourceProject: FC<InferGetStaticPropsType<typeof getStaticProps
 		<Layout funding={funding} partners={partners}>
 			<Title text="Open Source | Atanas Atanasov | Senior Javascript/Typescript Engineer" />
 
-			<MDX
+			<Mdx
 				id="blog-post"
 				back={Routes.PORTFOLIO_OPEN_SOURCE_PROJECTS}
 				title={post.slug}
diff --git a/src/styles/funding.css b/src/styles/funding.css
index 965f57937..ebf5f0edd 100644
--- a/src/styles/funding.css
+++ b/src/styles/funding.css
@@ -109,9 +109,13 @@
 	bottom: 0;
 	left: 0;
 	z-index: 90;
-	background-color: var(--color-secondary);
+	padding: 0;
+	border: 0;
+	background: var(--color-secondary);
 	transition: opacity var(--timing) var(--easing);
 	pointer-events: none;
+	appearance: nine;
+	cursor: pointer;
 }
 
 .c-funding--open {
diff --git a/src/styles/social.css b/src/styles/social.css
index ab2f1751f..034b5624f 100644
--- a/src/styles/social.css
+++ b/src/styles/social.css
@@ -64,6 +64,12 @@
 		height: 100%;
 	}
 
+	& a.twitter-timeline {
+		font-size: 0;
+		line-height: 0;
+		text-indent: -250rem;
+	}
+
 	& .linkedin-frame iframe {
 		width: auto;
 		min-width: 20.75rem;
diff --git a/tests/src/components/footer/__snapshots__/index.tsx.snap b/tests/src/components/footer/__snapshots__/index.tsx.snap
index 393fddb09..33492ce3e 100644
--- a/tests/src/components/footer/__snapshots__/index.tsx.snap
+++ b/tests/src/components/footer/__snapshots__/index.tsx.snap
@@ -68,7 +68,7 @@ exports[`Footer component Should render the Footer component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -145,7 +145,6 @@ exports[`Footer component Should render the Footer component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/components/funding/__snapshots__/index.tsx.snap b/tests/src/components/funding/__snapshots__/index.tsx.snap
index b56171f65..ed6230478 100644
--- a/tests/src/components/funding/__snapshots__/index.tsx.snap
+++ b/tests/src/components/funding/__snapshots__/index.tsx.snap
@@ -11,7 +11,7 @@ exports[`Gunding component Should render the Gunding component 1`] = `
     >
       Sponsor me
     </button>
-    <div
+    <button
       class="c-funding__backdrop"
     />
     <svg
@@ -88,7 +88,6 @@ exports[`Gunding component Should render the Gunding component 1`] = `
       </g>
       <g
         class="c-funding__trigger"
-        role="button"
       >
         <circle
           cx="250"
@@ -171,7 +170,7 @@ exports[`Should test the Funding lifecycle 1`] = `
     >
       Sponsor me
     </button>
-    <div
+    <button
       class="c-funding__backdrop"
     />
     <svg
@@ -248,7 +247,6 @@ exports[`Should test the Funding lifecycle 1`] = `
       </g>
       <g
         class="c-funding__trigger"
-        role="button"
       >
         <circle
           cx="250"
@@ -329,7 +327,7 @@ exports[`Should test the Funding lifecycle 2`] = `
     >
       Sponsor me
     </button>
-    <div
+    <button
       class="c-funding__backdrop"
     />
     <svg
@@ -406,7 +404,6 @@ exports[`Should test the Funding lifecycle 2`] = `
       </g>
       <g
         class="c-funding__trigger"
-        role="button"
       >
         <circle
           cx="250"
@@ -487,7 +484,7 @@ exports[`Should test the Funding lifecycle 3`] = `
     >
       Sponsor me
     </button>
-    <div
+    <button
       class="c-funding__backdrop"
     />
     <svg
@@ -564,7 +561,6 @@ exports[`Should test the Funding lifecycle 3`] = `
       </g>
       <g
         class="c-funding__trigger"
-        role="button"
       >
         <circle
           cx="250"
@@ -645,7 +641,7 @@ exports[`Should test the Funding lifecycle 4`] = `
     >
       Sponsor me
     </button>
-    <div
+    <button
       class="c-funding__backdrop"
     />
     <svg
@@ -722,7 +718,6 @@ exports[`Should test the Funding lifecycle 4`] = `
       </g>
       <g
         class="c-funding__trigger"
-        role="button"
       >
         <circle
           cx="250"
@@ -803,7 +798,7 @@ exports[`Should test the Funding lifecycle 5`] = `
     >
       Sponsor me
     </button>
-    <div
+    <button
       class="c-funding__backdrop"
     />
     <svg
@@ -880,7 +875,6 @@ exports[`Should test the Funding lifecycle 5`] = `
       </g>
       <g
         class="c-funding__trigger"
-        role="button"
       >
         <circle
           cx="250"
@@ -961,7 +955,7 @@ exports[`Should test the Funding lifecycle 6`] = `
     >
       Sponsor me
     </button>
-    <div
+    <button
       class="c-funding__backdrop"
     />
     <svg
@@ -1038,7 +1032,6 @@ exports[`Should test the Funding lifecycle 6`] = `
       </g>
       <g
         class="c-funding__trigger"
-        role="button"
       >
         <circle
           cx="250"
@@ -1119,7 +1112,7 @@ exports[`Should test the Funding lifecycle 7`] = `
     >
       Sponsor me
     </button>
-    <div
+    <button
       class="c-funding__backdrop"
     />
     <svg
@@ -1196,7 +1189,6 @@ exports[`Should test the Funding lifecycle 7`] = `
       </g>
       <g
         class="c-funding__trigger"
-        role="button"
       >
         <circle
           cx="250"
diff --git a/tests/src/components/layout/__snapshots__/index.tsx.snap b/tests/src/components/layout/__snapshots__/index.tsx.snap
index a6009e9bb..7f5232e84 100644
--- a/tests/src/components/layout/__snapshots__/index.tsx.snap
+++ b/tests/src/components/layout/__snapshots__/index.tsx.snap
@@ -955,7 +955,7 @@ exports[`Layout component Should render the Layout component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1032,7 +1032,6 @@ exports[`Layout component Should render the Layout component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/components/mdx/index.tsx b/tests/src/components/mdx/index.tsx
index 050fa4be9..a983fb496 100644
--- a/tests/src/components/mdx/index.tsx
+++ b/tests/src/components/mdx/index.tsx
@@ -1,9 +1,9 @@
-import { MDX } from '@components';
 import { Routes } from '@data/routes';
+import { MDX as Mdx } from '@components';
 import { snapshotTest } from '@test-config/helpers';
 
 snapshotTest(
-	() => <MDX id="test" back={Routes.BLOG} title="Test" image="/images/test.jpg" content="Test content" />,
+	() => <Mdx id="test" back={Routes.BLOG} title="Test" image="/images/test.jpg" content="Test content" />,
 	undefined,
 	'MDX'
 );
diff --git a/tests/src/pages/__snapshots__/404.tsx.snap b/tests/src/pages/__snapshots__/404.tsx.snap
index 146b2e439..4498b845d 100644
--- a/tests/src/pages/__snapshots__/404.tsx.snap
+++ b/tests/src/pages/__snapshots__/404.tsx.snap
@@ -1045,7 +1045,7 @@ exports[`ErrorPage component Should render the ErrorPage component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1122,7 +1122,6 @@ exports[`ErrorPage component Should render the ErrorPage component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/_offline.tsx.snap b/tests/src/pages/__snapshots__/_offline.tsx.snap
index ab85af94b..94a77b278 100644
--- a/tests/src/pages/__snapshots__/_offline.tsx.snap
+++ b/tests/src/pages/__snapshots__/_offline.tsx.snap
@@ -1042,7 +1042,7 @@ exports[`OfflinePage component Should render the OfflinePage component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1119,7 +1119,6 @@ exports[`OfflinePage component Should render the OfflinePage component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/about.tsx.snap b/tests/src/pages/__snapshots__/about.tsx.snap
index 1f95dbc14..7ceeafd48 100644
--- a/tests/src/pages/__snapshots__/about.tsx.snap
+++ b/tests/src/pages/__snapshots__/about.tsx.snap
@@ -1084,7 +1084,7 @@ exports[`About component Should render the About component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1161,7 +1161,6 @@ exports[`About component Should render the About component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2365,7 +2364,7 @@ exports[`About component Should render the About component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2442,7 +2441,6 @@ exports[`About component Should render the About component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -3648,7 +3646,7 @@ exports[`Tests the About page when offline 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3725,7 +3723,6 @@ exports[`Tests the About page when offline 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/articles.tsx.snap b/tests/src/pages/__snapshots__/articles.tsx.snap
index 616d6e097..ddf0d12b7 100644
--- a/tests/src/pages/__snapshots__/articles.tsx.snap
+++ b/tests/src/pages/__snapshots__/articles.tsx.snap
@@ -1106,7 +1106,7 @@ exports[`Articles component Should render the Articles component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1183,7 +1183,6 @@ exports[`Articles component Should render the Articles component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2389,7 +2388,7 @@ exports[`Articles component Should render the Articles component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2466,7 +2465,6 @@ exports[`Articles component Should render the Articles component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -3672,7 +3670,7 @@ exports[`Articles component Should render the Articles component 3`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3749,7 +3747,6 @@ exports[`Articles component Should render the Articles component 3`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -4955,7 +4952,7 @@ exports[`Articles component Should render the Articles component 4`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -5032,7 +5029,6 @@ exports[`Articles component Should render the Articles component 4`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -6238,7 +6234,7 @@ exports[`Articles component Should render the Articles component 5`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -6315,7 +6311,6 @@ exports[`Articles component Should render the Articles component 5`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -7521,7 +7516,7 @@ exports[`Articles component Should render the Articles component 6`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -7598,7 +7593,6 @@ exports[`Articles component Should render the Articles component 6`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -8804,7 +8798,7 @@ exports[`Articles component Should render the Articles component 7`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -8881,7 +8875,6 @@ exports[`Articles component Should render the Articles component 7`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -10087,7 +10080,7 @@ exports[`Articles component Should render the Articles component 8`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -10164,7 +10157,6 @@ exports[`Articles component Should render the Articles component 8`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -11370,7 +11362,7 @@ exports[`Articles component Should render the Articles component 9`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -11447,7 +11439,6 @@ exports[`Articles component Should render the Articles component 9`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/certificates.tsx.snap b/tests/src/pages/__snapshots__/certificates.tsx.snap
index 8e3de75b6..07c03c0e5 100644
--- a/tests/src/pages/__snapshots__/certificates.tsx.snap
+++ b/tests/src/pages/__snapshots__/certificates.tsx.snap
@@ -1112,7 +1112,7 @@ exports[`Certificates component Should render the Certificates component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1189,7 +1189,6 @@ exports[`Certificates component Should render the Certificates component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/index.tsx.snap b/tests/src/pages/__snapshots__/index.tsx.snap
index d1c5d4279..1c9c07223 100644
--- a/tests/src/pages/__snapshots__/index.tsx.snap
+++ b/tests/src/pages/__snapshots__/index.tsx.snap
@@ -973,7 +973,7 @@ exports[`Home component Should render the Home component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1050,7 +1050,6 @@ exports[`Home component Should render the Home component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2132,7 +2131,7 @@ exports[`Home component Should render the Home component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2209,7 +2208,6 @@ exports[`Home component Should render the Home component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -3295,7 +3293,7 @@ exports[`Should test the Home page 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3372,7 +3370,6 @@ exports[`Should test the Home page 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -4454,7 +4451,7 @@ exports[`Should test the Home page 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -4531,7 +4528,6 @@ exports[`Should test the Home page 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/interactive-resume.tsx.snap b/tests/src/pages/__snapshots__/interactive-resume.tsx.snap
index 19fa84664..cf6e701a3 100644
--- a/tests/src/pages/__snapshots__/interactive-resume.tsx.snap
+++ b/tests/src/pages/__snapshots__/interactive-resume.tsx.snap
@@ -1215,7 +1215,7 @@ exports[`InteractiveResume component Should render the InteractiveResume compone
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1292,7 +1292,6 @@ exports[`InteractiveResume component Should render the InteractiveResume compone
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2622,7 +2621,7 @@ exports[`Tests the Interactive resume page when offline 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2699,7 +2698,6 @@ exports[`Tests the Interactive resume page when offline 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/music.tsx.snap b/tests/src/pages/__snapshots__/music.tsx.snap
index 54a31c954..a66ef13d3 100644
--- a/tests/src/pages/__snapshots__/music.tsx.snap
+++ b/tests/src/pages/__snapshots__/music.tsx.snap
@@ -1133,7 +1133,7 @@ exports[`Music component Should render the Music component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1210,7 +1210,6 @@ exports[`Music component Should render the Music component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2443,7 +2442,7 @@ exports[`Music component Should render the Music component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2520,7 +2519,6 @@ exports[`Music component Should render the Music component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -3753,7 +3751,7 @@ exports[`Music component Should render the Music component 3`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3830,7 +3828,6 @@ exports[`Music component Should render the Music component 3`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -5063,7 +5060,7 @@ exports[`Music component Should render the Music component 4`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -5140,7 +5137,6 @@ exports[`Music component Should render the Music component 4`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -6373,7 +6369,7 @@ exports[`Music component Should render the Music component 5`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -6450,7 +6446,6 @@ exports[`Music component Should render the Music component 5`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -7683,7 +7678,7 @@ exports[`Music component Should render the Music component 6`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -7760,7 +7755,6 @@ exports[`Music component Should render the Music component 6`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -8993,7 +8987,7 @@ exports[`Music component Should render the Music component 7`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -9070,7 +9064,6 @@ exports[`Music component Should render the Music component 7`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -10303,7 +10296,7 @@ exports[`Music component Should render the Music component 8`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -10380,7 +10373,6 @@ exports[`Music component Should render the Music component 8`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/occupation.tsx.snap b/tests/src/pages/__snapshots__/occupation.tsx.snap
index 47474bfde..f41ee6f89 100644
--- a/tests/src/pages/__snapshots__/occupation.tsx.snap
+++ b/tests/src/pages/__snapshots__/occupation.tsx.snap
@@ -1080,7 +1080,7 @@ exports[`Occupation component Should render the Occupation component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1157,7 +1157,6 @@ exports[`Occupation component Should render the Occupation component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/resume.tsx.snap b/tests/src/pages/__snapshots__/resume.tsx.snap
index c9e920652..93ec01480 100644
--- a/tests/src/pages/__snapshots__/resume.tsx.snap
+++ b/tests/src/pages/__snapshots__/resume.tsx.snap
@@ -1347,7 +1347,7 @@ exports[`Resume component Should render the Resume component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1424,7 +1424,6 @@ exports[`Resume component Should render the Resume component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2871,7 +2870,7 @@ exports[`Resume component Should render the Resume component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2948,7 +2947,6 @@ exports[`Resume component Should render the Resume component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/skills.tsx.snap b/tests/src/pages/__snapshots__/skills.tsx.snap
index c9a257492..7e1fff595 100644
--- a/tests/src/pages/__snapshots__/skills.tsx.snap
+++ b/tests/src/pages/__snapshots__/skills.tsx.snap
@@ -4422,7 +4422,7 @@ exports[`Skills component Should render the Skills component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -4499,7 +4499,6 @@ exports[`Skills component Should render the Skills component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -9021,7 +9020,7 @@ exports[`Skills component Should render the Skills component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -9098,7 +9097,6 @@ exports[`Skills component Should render the Skills component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/slides.tsx.snap b/tests/src/pages/__snapshots__/slides.tsx.snap
index c37228c70..1454e333d 100644
--- a/tests/src/pages/__snapshots__/slides.tsx.snap
+++ b/tests/src/pages/__snapshots__/slides.tsx.snap
@@ -1135,7 +1135,7 @@ exports[`Slides component Should render the Slides component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1212,7 +1212,6 @@ exports[`Slides component Should render the Slides component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2447,7 +2446,7 @@ exports[`Slides component Should render the Slides component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2524,7 +2523,6 @@ exports[`Slides component Should render the Slides component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -3759,7 +3757,7 @@ exports[`Slides component Should render the Slides component 3`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3836,7 +3834,6 @@ exports[`Slides component Should render the Slides component 3`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/social.tsx.snap b/tests/src/pages/__snapshots__/social.tsx.snap
index d0d0a3fbc..8ffe80a98 100644
--- a/tests/src/pages/__snapshots__/social.tsx.snap
+++ b/tests/src/pages/__snapshots__/social.tsx.snap
@@ -723,7 +723,6 @@ exports[`Social component Should render the Social component 1`] = `
               </h3>
               <iframe
                 class="github-frame"
-                frameborder="0"
                 height="400"
                 loading="lazy"
                 src="https://github.com/sponsors/scriptex/card"
@@ -743,7 +742,9 @@ exports[`Social component Should render the Social component 1`] = `
                 data-height="400"
                 data-theme="dark"
                 href="//twitter.com/scriptexbg"
-              />
+              >
+                @scriptexbg on Twitter
+              </a>
             </div>
             <div
               class="o-grid__item xs-12 sm-6"
@@ -769,7 +770,6 @@ exports[`Social component Should render the Social component 1`] = `
               <iframe
                 allow="encrypted-media"
                 class="spotify-frame"
-                frameborder="0"
                 height="400"
                 loading="lazy"
                 src="https://open.spotify.com/embed/playlist/37i9dQZF1EpzZomgLqaOnp?theme=0"
@@ -1513,7 +1513,7 @@ exports[`Social component Should render the Social component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1590,7 +1590,6 @@ exports[`Social component Should render the Social component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2987,7 +2986,7 @@ exports[`Tests the Social page when offline 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3064,7 +3063,6 @@ exports[`Tests the Social page when offline 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/testimonials.tsx.snap b/tests/src/pages/__snapshots__/testimonials.tsx.snap
index 470744a4a..c39f347e4 100644
--- a/tests/src/pages/__snapshots__/testimonials.tsx.snap
+++ b/tests/src/pages/__snapshots__/testimonials.tsx.snap
@@ -1252,7 +1252,7 @@ exports[`Testimonials component Should render the Testimonials component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1329,7 +1329,6 @@ exports[`Testimonials component Should render the Testimonials component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2537,7 +2536,7 @@ exports[`Testimonials component Should render the Testimonials component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2614,7 +2613,6 @@ exports[`Testimonials component Should render the Testimonials component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/timeline.tsx.snap b/tests/src/pages/__snapshots__/timeline.tsx.snap
index 4e6e443c5..409759da9 100644
--- a/tests/src/pages/__snapshots__/timeline.tsx.snap
+++ b/tests/src/pages/__snapshots__/timeline.tsx.snap
@@ -1166,7 +1166,7 @@ exports[`Timeline component Should render the Timeline component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1243,7 +1243,6 @@ exports[`Timeline component Should render the Timeline component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/__snapshots__/videos.tsx.snap b/tests/src/pages/__snapshots__/videos.tsx.snap
index e24261320..57e19d0cb 100644
--- a/tests/src/pages/__snapshots__/videos.tsx.snap
+++ b/tests/src/pages/__snapshots__/videos.tsx.snap
@@ -1160,7 +1160,7 @@ exports[`Videos component Should render the Videos component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1237,7 +1237,6 @@ exports[`Videos component Should render the Videos component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2497,7 +2496,7 @@ exports[`Videos component Should render the Videos component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2574,7 +2573,6 @@ exports[`Videos component Should render the Videos component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -3834,7 +3832,7 @@ exports[`Videos component Should render the Videos component 3`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3911,7 +3909,6 @@ exports[`Videos component Should render the Videos component 3`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/blog/__snapshots__/[slug].tsx.snap b/tests/src/pages/blog/__snapshots__/[slug].tsx.snap
index e7fa298b6..ec61211e8 100644
--- a/tests/src/pages/blog/__snapshots__/[slug].tsx.snap
+++ b/tests/src/pages/blog/__snapshots__/[slug].tsx.snap
@@ -1115,7 +1115,7 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1192,7 +1192,6 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2407,7 +2406,7 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2484,7 +2483,6 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/blog/__snapshots__/index.tsx.snap b/tests/src/pages/blog/__snapshots__/index.tsx.snap
index a67c54154..30533567a 100644
--- a/tests/src/pages/blog/__snapshots__/index.tsx.snap
+++ b/tests/src/pages/blog/__snapshots__/index.tsx.snap
@@ -1097,7 +1097,7 @@ exports[`Blog component Should render the Blog component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1174,7 +1174,6 @@ exports[`Blog component Should render the Blog component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/portfolio/__snapshots__/automotive-applications.tsx.snap b/tests/src/pages/portfolio/__snapshots__/automotive-applications.tsx.snap
index 325ff9305..aa90426ed 100644
--- a/tests/src/pages/portfolio/__snapshots__/automotive-applications.tsx.snap
+++ b/tests/src/pages/portfolio/__snapshots__/automotive-applications.tsx.snap
@@ -1998,7 +1998,7 @@ exports[`PortfolioAutomotiveApps component Should render the PortfolioAutomotive
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2075,7 +2075,6 @@ exports[`PortfolioAutomotiveApps component Should render the PortfolioAutomotive
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/portfolio/__snapshots__/email-templates.tsx.snap b/tests/src/pages/portfolio/__snapshots__/email-templates.tsx.snap
index 0d0ed1fba..1d13db592 100644
--- a/tests/src/pages/portfolio/__snapshots__/email-templates.tsx.snap
+++ b/tests/src/pages/portfolio/__snapshots__/email-templates.tsx.snap
@@ -1192,7 +1192,7 @@ exports[`PortfolioEmailTemplates component Should render the PortfolioEmailTempl
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1269,7 +1269,6 @@ exports[`PortfolioEmailTemplates component Should render the PortfolioEmailTempl
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2561,7 +2560,7 @@ exports[`PortfolioEmailTemplates component Should render the PortfolioEmailTempl
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2638,7 +2637,6 @@ exports[`PortfolioEmailTemplates component Should render the PortfolioEmailTempl
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/portfolio/__snapshots__/index.tsx.snap b/tests/src/pages/portfolio/__snapshots__/index.tsx.snap
index 07f59c4dd..d9b0eece8 100644
--- a/tests/src/pages/portfolio/__snapshots__/index.tsx.snap
+++ b/tests/src/pages/portfolio/__snapshots__/index.tsx.snap
@@ -1196,7 +1196,7 @@ exports[`Portfolio component Should render the Portfolio component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1273,7 +1273,6 @@ exports[`Portfolio component Should render the Portfolio component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/portfolio/__snapshots__/mobile-applications.tsx.snap b/tests/src/pages/portfolio/__snapshots__/mobile-applications.tsx.snap
index a954f35d3..44847b82b 100644
--- a/tests/src/pages/portfolio/__snapshots__/mobile-applications.tsx.snap
+++ b/tests/src/pages/portfolio/__snapshots__/mobile-applications.tsx.snap
@@ -3420,7 +3420,7 @@ exports[`PortfolioMobileApps component Should render the PortfolioMobileApps com
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3497,7 +3497,6 @@ exports[`PortfolioMobileApps component Should render the PortfolioMobileApps com
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/portfolio/__snapshots__/personal-projects.tsx.snap b/tests/src/pages/portfolio/__snapshots__/personal-projects.tsx.snap
index 004b70910..0417f033d 100644
--- a/tests/src/pages/portfolio/__snapshots__/personal-projects.tsx.snap
+++ b/tests/src/pages/portfolio/__snapshots__/personal-projects.tsx.snap
@@ -1397,7 +1397,7 @@ exports[`PortfolioPersonalProjects component Should render the PortfolioPersonal
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1474,7 +1474,6 @@ exports[`PortfolioPersonalProjects component Should render the PortfolioPersonal
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/portfolio/__snapshots__/web-applications.tsx.snap b/tests/src/pages/portfolio/__snapshots__/web-applications.tsx.snap
index 332d5cddb..0a9d4cc1c 100644
--- a/tests/src/pages/portfolio/__snapshots__/web-applications.tsx.snap
+++ b/tests/src/pages/portfolio/__snapshots__/web-applications.tsx.snap
@@ -1188,7 +1188,7 @@ exports[`PortfolioWebApps component Should render the PortfolioWebApps component
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1265,7 +1265,6 @@ exports[`PortfolioWebApps component Should render the PortfolioWebApps component
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2553,7 +2552,7 @@ exports[`PortfolioWebApps component Should render the PortfolioWebApps component
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2630,7 +2629,6 @@ exports[`PortfolioWebApps component Should render the PortfolioWebApps component
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -3822,7 +3820,7 @@ exports[`PortfolioWebApps component Should render the PortfolioWebApps component
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3899,7 +3897,6 @@ exports[`PortfolioWebApps component Should render the PortfolioWebApps component
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -5091,7 +5088,7 @@ exports[`PortfolioWebApps component Should render the PortfolioWebApps component
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -5168,7 +5165,6 @@ exports[`PortfolioWebApps component Should render the PortfolioWebApps component
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/portfolio/open-source/__snapshots__/[slug].tsx.snap b/tests/src/pages/portfolio/open-source/__snapshots__/[slug].tsx.snap
index 74fe783fa..ea8ca10c0 100644
--- a/tests/src/pages/portfolio/open-source/__snapshots__/[slug].tsx.snap
+++ b/tests/src/pages/portfolio/open-source/__snapshots__/[slug].tsx.snap
@@ -1120,7 +1120,7 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1197,7 +1197,6 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2412,7 +2411,7 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2489,7 +2488,6 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -3567,7 +3565,7 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3644,7 +3642,6 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -4722,7 +4719,7 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -4799,7 +4796,6 @@ exports[`OpenSourceProject component Should render the OpenSourceProject compone
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/portfolio/open-source/__snapshots__/index.tsx.snap b/tests/src/pages/portfolio/open-source/__snapshots__/index.tsx.snap
index 2b4790d0c..c4ef6ebf0 100644
--- a/tests/src/pages/portfolio/open-source/__snapshots__/index.tsx.snap
+++ b/tests/src/pages/portfolio/open-source/__snapshots__/index.tsx.snap
@@ -1364,7 +1364,7 @@ exports[`PortfolioOpenSourceProjects component Should render the PortfolioOpenSo
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1441,7 +1441,6 @@ exports[`PortfolioOpenSourceProjects component Should render the PortfolioOpenSo
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/stats/__snapshots__/github.tsx.snap b/tests/src/pages/stats/__snapshots__/github.tsx.snap
index 0f694e4ed..db9a39de1 100644
--- a/tests/src/pages/stats/__snapshots__/github.tsx.snap
+++ b/tests/src/pages/stats/__snapshots__/github.tsx.snap
@@ -1364,7 +1364,7 @@ exports[`GithubStats component Should render the GithubStats component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1441,7 +1441,6 @@ exports[`GithubStats component Should render the GithubStats component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2905,7 +2904,7 @@ exports[`GithubStats component Should render the GithubStats component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2982,7 +2981,6 @@ exports[`GithubStats component Should render the GithubStats component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -4317,7 +4315,7 @@ exports[`GithubStats component Should render the GithubStats component 3`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -4394,7 +4392,6 @@ exports[`GithubStats component Should render the GithubStats component 3`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -5589,7 +5586,7 @@ exports[`GithubStats component Should render the GithubStats component 4`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -5666,7 +5663,6 @@ exports[`GithubStats component Should render the GithubStats component 4`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -7130,7 +7126,7 @@ exports[`GithubStats component Should render the GithubStats component 5`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -7207,7 +7203,6 @@ exports[`GithubStats component Should render the GithubStats component 5`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -8671,7 +8666,7 @@ exports[`GithubStats component Should render the GithubStats component 6`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -8748,7 +8743,6 @@ exports[`GithubStats component Should render the GithubStats component 6`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -10210,7 +10204,7 @@ exports[`GithubStats component Should render the GithubStats component 7`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -10287,7 +10281,6 @@ exports[`GithubStats component Should render the GithubStats component 7`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -11763,7 +11756,7 @@ exports[`Test the GithubStats page with fake timers 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -11840,7 +11833,6 @@ exports[`Test the GithubStats page with fake timers 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/stats/__snapshots__/gitlab.tsx.snap b/tests/src/pages/stats/__snapshots__/gitlab.tsx.snap
index 1e086b47a..68fcfdf89 100644
--- a/tests/src/pages/stats/__snapshots__/gitlab.tsx.snap
+++ b/tests/src/pages/stats/__snapshots__/gitlab.tsx.snap
@@ -1224,7 +1224,7 @@ exports[`GitlabStats component Should render the GitlabStats component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1301,7 +1301,6 @@ exports[`GitlabStats component Should render the GitlabStats component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -2625,7 +2624,7 @@ exports[`GitlabStats component Should render the GitlabStats component 2`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -2702,7 +2701,6 @@ exports[`GitlabStats component Should render the GitlabStats component 2`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -3897,7 +3895,7 @@ exports[`GitlabStats component Should render the GitlabStats component 3`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -3974,7 +3972,6 @@ exports[`GitlabStats component Should render the GitlabStats component 3`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
@@ -5304,7 +5301,7 @@ exports[`Test the GitlabStats page with fake timers 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -5381,7 +5378,6 @@ exports[`Test the GitlabStats page with fake timers 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/stats/__snapshots__/index.tsx.snap b/tests/src/pages/stats/__snapshots__/index.tsx.snap
index f84d5f465..fc1b23dad 100644
--- a/tests/src/pages/stats/__snapshots__/index.tsx.snap
+++ b/tests/src/pages/stats/__snapshots__/index.tsx.snap
@@ -1136,7 +1136,7 @@ exports[`Stats component Should render the Stats component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1213,7 +1213,6 @@ exports[`Stats component Should render the Stats component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"
diff --git a/tests/src/pages/stats/__snapshots__/npm.tsx.snap b/tests/src/pages/stats/__snapshots__/npm.tsx.snap
index 2e54dc92e..2f60f5ead 100644
--- a/tests/src/pages/stats/__snapshots__/npm.tsx.snap
+++ b/tests/src/pages/stats/__snapshots__/npm.tsx.snap
@@ -1190,7 +1190,7 @@ exports[`NPMStats component Should render the NPMStats component 1`] = `
         >
           Sponsor me
         </button>
-        <div
+        <button
           class="c-funding__backdrop"
         />
         <svg
@@ -1267,7 +1267,6 @@ exports[`NPMStats component Should render the NPMStats component 1`] = `
           </g>
           <g
             class="c-funding__trigger"
-            role="button"
           >
             <circle
               cx="250"