From e80c77c6ef12699bc3bb21004662ddb524c4c3f8 Mon Sep 17 00:00:00 2001
From: son426 <coghks0426@naver.com>
Date: Wed, 29 Oct 2025 16:26:09 +0900
Subject: [PATCH 1/2] feat(a11y): Improve PixelTransition component
 accessibility

- Adds  to enable keyboard focus.

- Maps onFocus/onBlur to the transition logic for keyboard users.

- Renames handleMouseEnter/Leave to handleEnter/Leave for clarity, as they now serve both mouse and keyboard events.

- Implements dynamic  to ensure screen readers only announce visible content.
---
 .../PixelTransition/PixelTransition.jsx       | 17 +++++++++-----
 .../PixelTransition/PixelTransition.jsx       | 22 ++++++++++++++-----
 .../PixelTransition/PixelTransition.tsx       | 17 +++++++++-----
 .../PixelTransition/PixelTransition.tsx       | 22 ++++++++++++++-----
 4 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/src/content/Animations/PixelTransition/PixelTransition.jsx b/src/content/Animations/PixelTransition/PixelTransition.jsx
index 55a9f4b1..3ad1ed0a 100644
--- a/src/content/Animations/PixelTransition/PixelTransition.jsx
+++ b/src/content/Animations/PixelTransition/PixelTransition.jsx
@@ -89,10 +89,10 @@ function PixelTransition({
     });
   };
 
-  const handleMouseEnter = () => {
+  const handleEnter = () => {
     if (!isActive) animatePixels(true);
   };
-  const handleMouseLeave = () => {
+  const handleLeave = () => {
     if (isActive) animatePixels(false);
   };
   const handleClick = () => {
@@ -104,13 +104,18 @@ function PixelTransition({
       ref={containerRef}
       className={`pixelated-image-card ${className}`}
       style={style}
-      onMouseEnter={!isTouchDevice ? handleMouseEnter : undefined}
-      onMouseLeave={!isTouchDevice ? handleMouseLeave : undefined}
+      onMouseEnter={!isTouchDevice ? handleEnter : undefined}
+      onMouseLeave={!isTouchDevice ? handleLeave : undefined}
       onClick={isTouchDevice ? handleClick : undefined}
+      onFocus={!isTouchDevice ? handleEnter : undefined}
+      onBlur={!isTouchDevice ? handleLeave : undefined}
+      tabIndex={0}
     >
       <div style={{ paddingTop: aspectRatio }} />
-      <div className="pixelated-image-card__default">{firstContent}</div>
-      <div className="pixelated-image-card__active" ref={activeRef}>
+      <div className="pixelated-image-card__default" aria-hidden={isActive}>
+        {firstContent}
+      </div>
+      <div className="pixelated-image-card__active" ref={activeRef} aria-hidden={!isActive}>
         {secondContent}
       </div>
       <div className="pixelated-image-card__pixels" ref={pixelGridRef} />
diff --git a/src/tailwind/Animations/PixelTransition/PixelTransition.jsx b/src/tailwind/Animations/PixelTransition/PixelTransition.jsx
index ec69884c..b0d88b18 100644
--- a/src/tailwind/Animations/PixelTransition/PixelTransition.jsx
+++ b/src/tailwind/Animations/PixelTransition/PixelTransition.jsx
@@ -90,10 +90,10 @@ function PixelTransition({
     });
   };
 
-  const handleMouseEnter = () => {
+  const handleEnter = () => {
     if (!isActive) animatePixels(true);
   };
-  const handleMouseLeave = () => {
+  const handleLeave = () => {
     if (isActive) animatePixels(false);
   };
   const handleClick = () => {
@@ -116,15 +116,25 @@ function PixelTransition({
         overflow-hidden
       `}
       style={style}
-      onMouseEnter={!isTouchDevice ? handleMouseEnter : undefined}
-      onMouseLeave={!isTouchDevice ? handleMouseLeave : undefined}
+      onMouseEnter={!isTouchDevice ? handleEnter : undefined}
+      onMouseLeave={!isTouchDevice ? handleLeave : undefined}
       onClick={isTouchDevice ? handleClick : undefined}
+      onFocus={!isTouchDevice ? handleEnter : undefined}
+      onBlur={!isTouchDevice ? handleLeave : undefined}
+      tabIndex={0}
     >
       <div style={{ paddingTop: aspectRatio }} />
 
-      <div className="absolute inset-0 w-full h-full">{firstContent}</div>
+      <div className="absolute inset-0 w-full h-full" aria-hidden={isActive}>
+        {firstContent}
+      </div>
 
-      <div ref={activeRef} className="absolute inset-0 w-full h-full z-[2]" style={{ display: 'none' }}>
+      <div
+        ref={activeRef}
+        className="absolute inset-0 w-full h-full z-[2]"
+        style={{ display: 'none' }}
+        aria-hidden={!isActive}
+      >
         {secondContent}
       </div>
 
diff --git a/src/ts-default/Animations/PixelTransition/PixelTransition.tsx b/src/ts-default/Animations/PixelTransition/PixelTransition.tsx
index 8bde4765..239b2492 100644
--- a/src/ts-default/Animations/PixelTransition/PixelTransition.tsx
+++ b/src/ts-default/Animations/PixelTransition/PixelTransition.tsx
@@ -100,10 +100,10 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
     });
   };
 
-  const handleMouseEnter = (): void => {
+  const handleEnter = (): void => {
     if (!isActive) animatePixels(true);
   };
-  const handleMouseLeave = (): void => {
+  const handleLeave = (): void => {
     if (isActive) animatePixels(false);
   };
   const handleClick = (): void => {
@@ -115,13 +115,18 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
       ref={containerRef}
       className={`pixelated-image-card ${className}`}
       style={style}
-      onMouseEnter={!isTouchDevice ? handleMouseEnter : undefined}
-      onMouseLeave={!isTouchDevice ? handleMouseLeave : undefined}
+      onMouseEnter={!isTouchDevice ? handleEnter : undefined}
+      onMouseLeave={!isTouchDevice ? handleLeave : undefined}
       onClick={isTouchDevice ? handleClick : undefined}
+      onFocus={!isTouchDevice ? handleEnter : undefined}
+      onBlur={!isTouchDevice ? handleLeave : undefined}
+      tabIndex={0}
     >
       <div style={{ paddingTop: aspectRatio }} />
-      <div className="pixelated-image-card__default">{firstContent}</div>
-      <div className="pixelated-image-card__active" ref={activeRef}>
+      <div className="pixelated-image-card__default" aria-hidden={isActive}>
+        {firstContent}
+      </div>
+      <div className="pixelated-image-card__active" ref={activeRef} aria-hidden={!isActive}>
         {secondContent}
       </div>
       <div className="pixelated-image-card__pixels" ref={pixelGridRef} />
diff --git a/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx b/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx
index 71122add..ede7736c 100644
--- a/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx
+++ b/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx
@@ -101,10 +101,10 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
     });
   };
 
-  const handleMouseEnter = (): void => {
+  const handleEnter = (): void => {
     if (!isActive) animatePixels(true);
   };
-  const handleMouseLeave = (): void => {
+  const handleLeave = (): void => {
     if (isActive) animatePixels(false);
   };
   const handleClick = (): void => {
@@ -127,15 +127,25 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
         overflow-hidden
       `}
       style={style}
-      onMouseEnter={!isTouchDevice ? handleMouseEnter : undefined}
-      onMouseLeave={!isTouchDevice ? handleMouseLeave : undefined}
+      onMouseEnter={!isTouchDevice ? handleEnter : undefined}
+      onMouseLeave={!isTouchDevice ? handleLeave : undefined}
       onClick={isTouchDevice ? handleClick : undefined}
+      onFocus={!isTouchDevice ? handleEnter : undefined}
+      onBlur={!isTouchDevice ? handleLeave : undefined}
+      tabIndex={0}
     >
       <div style={{ paddingTop: aspectRatio }} />
 
-      <div className="absolute inset-0 w-full h-full">{firstContent}</div>
+      <div className="absolute inset-0 w-full h-full" aria-hidden={isActive}>
+        {firstContent}
+      </div>
 
-      <div ref={activeRef} className="absolute inset-0 w-full h-full z-[2]" style={{ display: 'none' }}>
+      <div
+        ref={activeRef}
+        className="absolute inset-0 w-full h-full z-[2]"
+        style={{ display: 'none' }}
+        aria-hidden={!isActive}
+      >
         {secondContent}
       </div>
 

From a7e73dd620c0ebe70c7edd61d077591e823a8f89 Mon Sep 17 00:00:00 2001
From: son426 <coghks0426@naver.com>
Date: Wed, 29 Oct 2025 16:41:11 +0900
Subject: [PATCH 2/2] refactor(PixelTransition): Tidy up props and types

- Update content types to React.ReactNode | string to match docs.

- Match prop order with propData.
---
 .../Animations/PixelTransition/PixelTransition.jsx        | 4 ++--
 .../Animations/PixelTransition/PixelTransition.jsx        | 4 ++--
 .../Animations/PixelTransition/PixelTransition.tsx        | 8 ++++----
 .../Animations/PixelTransition/PixelTransition.tsx        | 8 ++++----
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/content/Animations/PixelTransition/PixelTransition.jsx b/src/content/Animations/PixelTransition/PixelTransition.jsx
index 3ad1ed0a..2654cf5a 100644
--- a/src/content/Animations/PixelTransition/PixelTransition.jsx
+++ b/src/content/Animations/PixelTransition/PixelTransition.jsx
@@ -8,9 +8,9 @@ function PixelTransition({
   gridSize = 7,
   pixelColor = 'currentColor',
   animationStepDuration = 0.3,
+  aspectRatio = '100%',
   className = '',
-  style = {},
-  aspectRatio = '100%'
+  style = {}
 }) {
   const containerRef = useRef(null);
   const pixelGridRef = useRef(null);
diff --git a/src/tailwind/Animations/PixelTransition/PixelTransition.jsx b/src/tailwind/Animations/PixelTransition/PixelTransition.jsx
index b0d88b18..e533b61d 100644
--- a/src/tailwind/Animations/PixelTransition/PixelTransition.jsx
+++ b/src/tailwind/Animations/PixelTransition/PixelTransition.jsx
@@ -7,9 +7,9 @@ function PixelTransition({
   gridSize = 7,
   pixelColor = 'currentColor',
   animationStepDuration = 0.3,
+  aspectRatio = '100%',
   className = '',
-  style = {},
-  aspectRatio = '100%'
+  style = {}
 }) {
   const containerRef = useRef(null);
   const pixelGridRef = useRef(null);
diff --git a/src/ts-default/Animations/PixelTransition/PixelTransition.tsx b/src/ts-default/Animations/PixelTransition/PixelTransition.tsx
index 239b2492..47e403c1 100644
--- a/src/ts-default/Animations/PixelTransition/PixelTransition.tsx
+++ b/src/ts-default/Animations/PixelTransition/PixelTransition.tsx
@@ -3,8 +3,8 @@ import { gsap } from 'gsap';
 import './PixelTransition.css';
 
 interface PixelTransitionProps {
-  firstContent: React.ReactNode;
-  secondContent: React.ReactNode;
+  firstContent: React.ReactNode | string;
+  secondContent: React.ReactNode | string;
   gridSize?: number;
   pixelColor?: string;
   animationStepDuration?: number;
@@ -19,9 +19,9 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
   gridSize = 7,
   pixelColor = 'currentColor',
   animationStepDuration = 0.3,
+  aspectRatio = '100%',
   className = '',
-  style = {},
-  aspectRatio = '100%'
+  style = {}
 }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const pixelGridRef = useRef<HTMLDivElement | null>(null);
diff --git a/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx b/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx
index ede7736c..adf88dee 100644
--- a/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx
+++ b/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx
@@ -2,8 +2,8 @@ import React, { useRef, useEffect, useState, CSSProperties } from 'react';
 import { gsap } from 'gsap';
 
 interface PixelTransitionProps {
-  firstContent: React.ReactNode;
-  secondContent: React.ReactNode;
+  firstContent: React.ReactNode | string;
+  secondContent: React.ReactNode | string;
   gridSize?: number;
   pixelColor?: string;
   animationStepDuration?: number;
@@ -18,9 +18,9 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
   gridSize = 7,
   pixelColor = 'currentColor',
   animationStepDuration = 0.3,
+  aspectRatio = '100%',
   className = '',
-  style = {},
-  aspectRatio = '100%'
+  style = {}
 }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const pixelGridRef = useRef<HTMLDivElement | null>(null);