Skip to content

Commit d5979a5

Browse files
DavidHDevDavidHDev
authored
Merge pull request #636 from son426/feat/pixel-transition-a11y
feat: Improve PixelTransition component accessibility
2 parents 1b36a4f + a7e73dd commit d5979a5

File tree

4 files changed

+66
-36
lines changed

4 files changed

+66
-36
lines changed

‎src/content/Animations/PixelTransition/PixelTransition.jsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ function PixelTransition({
88
gridSize = 7,
99
pixelColor = 'currentColor',
1010
animationStepDuration = 0.3,
11+
aspectRatio = '100%',
1112
className = '',
12-
style = {},
13-
aspectRatio = '100%'
13+
style = {}
1414
}) {
1515
const containerRef = useRef(null);
1616
const pixelGridRef = useRef(null);
@@ -89,10 +89,10 @@ function PixelTransition({
8989
});
9090
};
9191

92-
const handleMouseEnter = () => {
92+
const handleEnter = () => {
9393
if (!isActive) animatePixels(true);
9494
};
95-
const handleMouseLeave = () => {
95+
const handleLeave = () => {
9696
if (isActive) animatePixels(false);
9797
};
9898
const handleClick = () => {
@@ -104,13 +104,18 @@ function PixelTransition({
104104
ref={containerRef}
105105
className={`pixelated-image-card ${className}`}
106106
style={style}
107-
onMouseEnter={!isTouchDevice ? handleMouseEnter : undefined}
108-
onMouseLeave={!isTouchDevice ? handleMouseLeave : undefined}
107+
onMouseEnter={!isTouchDevice ? handleEnter : undefined}
108+
onMouseLeave={!isTouchDevice ? handleLeave : undefined}
109109
onClick={isTouchDevice ? handleClick : undefined}
110+
onFocus={!isTouchDevice ? handleEnter : undefined}
111+
onBlur={!isTouchDevice ? handleLeave : undefined}
112+
tabIndex={0}
110113
>
111114
<div style={{ paddingTop: aspectRatio }} />
112-
<div className="pixelated-image-card__default">{firstContent}</div>
113-
<div className="pixelated-image-card__active" ref={activeRef}>
115+
<div className="pixelated-image-card__default" aria-hidden={isActive}>
116+
{firstContent}
117+
</div>
118+
<div className="pixelated-image-card__active" ref={activeRef} aria-hidden={!isActive}>
114119
{secondContent}
115120
</div>
116121
<div className="pixelated-image-card__pixels" ref={pixelGridRef} />

‎src/tailwind/Animations/PixelTransition/PixelTransition.jsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ function PixelTransition({
77
gridSize = 7,
88
pixelColor = 'currentColor',
99
animationStepDuration = 0.3,
10+
aspectRatio = '100%',
1011
className = '',
11-
style = {},
12-
aspectRatio = '100%'
12+
style = {}
1313
}) {
1414
const containerRef = useRef(null);
1515
const pixelGridRef = useRef(null);
@@ -90,10 +90,10 @@ function PixelTransition({
9090
});
9191
};
9292

93-
const handleMouseEnter = () => {
93+
const handleEnter = () => {
9494
if (!isActive) animatePixels(true);
9595
};
96-
const handleMouseLeave = () => {
96+
const handleLeave = () => {
9797
if (isActive) animatePixels(false);
9898
};
9999
const handleClick = () => {
@@ -116,15 +116,25 @@ function PixelTransition({
116116
overflow-hidden
117117
`}
118118
style={style}
119-
onMouseEnter={!isTouchDevice ? handleMouseEnter : undefined}
120-
onMouseLeave={!isTouchDevice ? handleMouseLeave : undefined}
119+
onMouseEnter={!isTouchDevice ? handleEnter : undefined}
120+
onMouseLeave={!isTouchDevice ? handleLeave : undefined}
121121
onClick={isTouchDevice ? handleClick : undefined}
122+
onFocus={!isTouchDevice ? handleEnter : undefined}
123+
onBlur={!isTouchDevice ? handleLeave : undefined}
124+
tabIndex={0}
122125
>
123126
<div style={{ paddingTop: aspectRatio }} />
124127

125-
<div className="absolute inset-0 w-full h-full">{firstContent}</div>
128+
<div className="absolute inset-0 w-full h-full" aria-hidden={isActive}>
129+
{firstContent}
130+
</div>
126131

127-
<div ref={activeRef} className="absolute inset-0 w-full h-full z-[2]" style={{ display: 'none' }}>
132+
<div
133+
ref={activeRef}
134+
className="absolute inset-0 w-full h-full z-[2]"
135+
style={{ display: 'none' }}
136+
aria-hidden={!isActive}
137+
>
128138
{secondContent}
129139
</div>
130140

‎src/ts-default/Animations/PixelTransition/PixelTransition.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { gsap } from 'gsap';
33
import './PixelTransition.css';
44

55
interface PixelTransitionProps {
6-
firstContent: React.ReactNode;
7-
secondContent: React.ReactNode;
6+
firstContent: React.ReactNode | string;
7+
secondContent: React.ReactNode | string;
88
gridSize?: number;
99
pixelColor?: string;
1010
animationStepDuration?: number;
@@ -19,9 +19,9 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
1919
gridSize = 7,
2020
pixelColor = 'currentColor',
2121
animationStepDuration = 0.3,
22+
aspectRatio = '100%',
2223
className = '',
23-
style = {},
24-
aspectRatio = '100%'
24+
style = {}
2525
}) => {
2626
const containerRef = useRef<HTMLDivElement | null>(null);
2727
const pixelGridRef = useRef<HTMLDivElement | null>(null);
@@ -100,10 +100,10 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
100100
});
101101
};
102102

103-
const handleMouseEnter = (): void => {
103+
const handleEnter = (): void => {
104104
if (!isActive) animatePixels(true);
105105
};
106-
const handleMouseLeave = (): void => {
106+
const handleLeave = (): void => {
107107
if (isActive) animatePixels(false);
108108
};
109109
const handleClick = (): void => {
@@ -115,13 +115,18 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
115115
ref={containerRef}
116116
className={`pixelated-image-card ${className}`}
117117
style={style}
118-
onMouseEnter={!isTouchDevice ? handleMouseEnter : undefined}
119-
onMouseLeave={!isTouchDevice ? handleMouseLeave : undefined}
118+
onMouseEnter={!isTouchDevice ? handleEnter : undefined}
119+
onMouseLeave={!isTouchDevice ? handleLeave : undefined}
120120
onClick={isTouchDevice ? handleClick : undefined}
121+
onFocus={!isTouchDevice ? handleEnter : undefined}
122+
onBlur={!isTouchDevice ? handleLeave : undefined}
123+
tabIndex={0}
121124
>
122125
<div style={{ paddingTop: aspectRatio }} />
123-
<div className="pixelated-image-card__default">{firstContent}</div>
124-
<div className="pixelated-image-card__active" ref={activeRef}>
126+
<div className="pixelated-image-card__default" aria-hidden={isActive}>
127+
{firstContent}
128+
</div>
129+
<div className="pixelated-image-card__active" ref={activeRef} aria-hidden={!isActive}>
125130
{secondContent}
126131
</div>
127132
<div className="pixelated-image-card__pixels" ref={pixelGridRef} />

‎src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React, { useRef, useEffect, useState, CSSProperties } from 'react';
22
import { gsap } from 'gsap';
33

44
interface PixelTransitionProps {
5-
firstContent: React.ReactNode;
6-
secondContent: React.ReactNode;
5+
firstContent: React.ReactNode | string;
6+
secondContent: React.ReactNode | string;
77
gridSize?: number;
88
pixelColor?: string;
99
animationStepDuration?: number;
@@ -18,9 +18,9 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
1818
gridSize = 7,
1919
pixelColor = 'currentColor',
2020
animationStepDuration = 0.3,
21+
aspectRatio = '100%',
2122
className = '',
22-
style = {},
23-
aspectRatio = '100%'
23+
style = {}
2424
}) => {
2525
const containerRef = useRef<HTMLDivElement | null>(null);
2626
const pixelGridRef = useRef<HTMLDivElement | null>(null);
@@ -101,10 +101,10 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
101101
});
102102
};
103103

104-
const handleMouseEnter = (): void => {
104+
const handleEnter = (): void => {
105105
if (!isActive) animatePixels(true);
106106
};
107-
const handleMouseLeave = (): void => {
107+
const handleLeave = (): void => {
108108
if (isActive) animatePixels(false);
109109
};
110110
const handleClick = (): void => {
@@ -127,15 +127,25 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
127127
overflow-hidden
128128
`}
129129
style={style}
130-
onMouseEnter={!isTouchDevice ? handleMouseEnter : undefined}
131-
onMouseLeave={!isTouchDevice ? handleMouseLeave : undefined}
130+
onMouseEnter={!isTouchDevice ? handleEnter : undefined}
131+
onMouseLeave={!isTouchDevice ? handleLeave : undefined}
132132
onClick={isTouchDevice ? handleClick : undefined}
133+
onFocus={!isTouchDevice ? handleEnter : undefined}
134+
onBlur={!isTouchDevice ? handleLeave : undefined}
135+
tabIndex={0}
133136
>
134137
<div style={{ paddingTop: aspectRatio }} />
135138

136-
<div className="absolute inset-0 w-full h-full">{firstContent}</div>
139+
<div className="absolute inset-0 w-full h-full" aria-hidden={isActive}>
140+
{firstContent}
141+
</div>
137142

138-
<div ref={activeRef} className="absolute inset-0 w-full h-full z-[2]" style={{ display: 'none' }}>
143+
<div
144+
ref={activeRef}
145+
className="absolute inset-0 w-full h-full z-[2]"
146+
style={{ display: 'none' }}
147+
aria-hidden={!isActive}
148+
>
139149
{secondContent}
140150
</div>
141151

0 commit comments

Comments
 (0)