Address SonarLint findings (#2635)

scriptex · Nov 7, 2023 · 3268217 · 3268217 · vercel · Nov 7, 2023
1 parent 6558725
commit 3268217
Show file tree

Hide file tree

Showing 40 changed files with 112 additions and 189 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"