(#6140) Review changes

Author: chrisalat

dev/src/components/docs/ComponentList.tsx

@@ -49,11 +49,16 @@ const LazyLoadComponent: FC<
 		<div ref={ref} className="components-overview-item">
 			{isVisible && (
 				<Suspense fallback={<div className="skeleton"></div>}>
-					<a tabIndex={0} onKeyDown={handleRedirect} onClick={handleRedirect}>
-						<KolCard aria-label={formattedComponentName} role="img" _level={2} _label={formattedComponentName}>
-							<SampleComponent lang={lang} />
-						</KolCard>
-					</a>
+					<a tabIndex={0} onKeyDown={handleRedirect} onClick={handleRedirect}></a>
+					<KolCard
+						tabIndex={-1}
+						aria-label={formattedComponentName}
+						role="img"
+						_level={2}
+						_label={formattedComponentName}
+					>
+						<SampleComponent lang={lang} />
+					</KolCard>
 				</Suspense>
 			)}
 		</div>

dev/src/css/custom.css

@@ -141,7 +141,7 @@ kol-link-button {
 	color: #00cc00;
 	background-color: #e6ffe6;
 }
-  
+
 .token.deleted-sign {
 	color: #cc0000;
 	background-color: #ffe6e6;
@@ -157,6 +157,15 @@ kol-link-button {
 }
 
 .components-overview-item {
+	position: relative;
 	height: 300px;
+}
+
+.components-overview-item a {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
 	cursor: pointer;
 }