optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

homepanel 중 homebanner 접근성 적용

Browse Source 
- customImage적용
 - 버튼 로고 이미지 aria-label적용
This commit is contained in:
junghoon86.park
2024-05-28 15:44:15 +09:00
parent 17238c8b0b
commit 6f136eec04
4 changed files with 90 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
com.twin.app.shoptime/src/components/CustomImage/CustomImage.jsx
View File

@@ -21,6 +21,7 @@ export default memo(function CustomImage({
onLoad,
onError,
alt,
ariaLabel,
fallbackSrc,
}) {
const [imageLoaded, setImageLoaded] = useState(false);
@@ -78,6 +79,7 @@ export default memo(function CustomImage({
onLoad={_onLoad}
onError={_onError}
alt={alt}
aria-label={ariaLabel}
/>
);
});

18
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
View File

@@ -215,7 +215,11 @@ export default function HomeBanner({
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
>
<CustomImage delay={0} src={replaceImage.wdthtpImgPath1} />
<CustomImage
delay={0}
src={replaceImage.wdthtpImgPath1}
aria-label={replaceImage.wdthtpImgNm1}
/>
</SpottableComponent>
)}
</div>
@@ -244,7 +248,11 @@ export default function HomeBanner({
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
>
<CustomImage delay={0} src={replaceImage.wdthtpImgPath2} />
<CustomImage
delay={0}
src={replaceImage.wdthtpImgPath2}
aria-label={replaceImage.wdthtpImgNm2}
/>
</SpottableComponent>
)}
</div>
@@ -283,7 +291,11 @@ export default function HomeBanner({
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
>
<CustomImage delay={0} src={replaceImage.vtctpImgPath1} />
<CustomImage
delay={0}
src={replaceImage.vtctpImgPath1}
aria-label={replaceImage.vtctpImgPath1}
/>
</SpottableComponent>
)}
</div>

24
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
View File

@@ -286,12 +286,16 @@ export default function RandomUnit({
onFocus={onFocus}
onBlur={onBlur}
spotlightId={spotlightId}
aria-label={
randomData.prdtNm ? randomData.prdtNm : randomData.tmnlImgNm
}
>
<div className={css.imgBanner}>
<CustomImage
delay={0}
src={randomData.tmnlImgPath}
animationSpeed="fast"
ariaLabel={randomData.tmnImgNm}
/>
</div>
@@ -301,6 +305,7 @@ export default function RandomUnit({
src={randomData.patncLogoPath}
fallbackSrc={defaultLogoImg}
animationSpeed="fast"
ariaLabel={randomData.brdcChnlId}
/>
</p>
</SpottableComponent>
@@ -315,9 +320,19 @@ export default function RandomUnit({
onFocus={onFocus}
onBlur={onBlur}
spotlightId={spotlightId}
aria-label={
randomData.shptmBanrTpNm == "LIVE"
? "LIVE " + randomData.showNm
: randomData.showNm
}
>
<p className={css.liveIcon}>
<CustomImage delay={0} src={liveShow} animationSpeed="fast" />
<CustomImage
delay={0}
src={liveShow}
animationSpeed="fast"
ariaLabel="LIVE icon"
/>
</p>
<div
@@ -330,6 +345,7 @@ export default function RandomUnit({
<CustomImage
delay={0}
src={randomData.tmnlImgPath}
ariaLabel={randomData.tmnImgNm}
animationSpeed="fast"
/>
) : (
@@ -339,6 +355,7 @@ export default function RandomUnit({
randomData.vtctpYn === "Y" ? emptyVerImage : emptyHorImage
}
animationSpeed="fast"
ariaLabel={randomData.tmnImgNm}
/>
)}
</div>
@@ -350,6 +367,7 @@ export default function RandomUnit({
src={randomData.showId ? randomData.patncLogoPath : null}
fallbackSrc={defaultLogoImg}
animationSpeed="fast"
ariaLabel={randomData.brdcChnlId}
/>
) : null}
</p>
@@ -365,6 +383,9 @@ export default function RandomUnit({
onFocus={onFocus}
onBlur={onBlur}
spotlightId={spotlightId}
aria-label={
randomData.prdtNm ? randomData.prdtNm : randomData.tmnlImgNm
}
>
<div className={css.productInfo}>
<div className={css.textBox}>{randomData.prdtNm}</div>
@@ -388,6 +409,7 @@ export default function RandomUnit({
src={randomData.tmnlImgPath}
animationSpeed="fast"
fallbackSrc={defaultImageItem}
ariaLabel={randomData.tmnlImgNm}
/>
</div>
</SpottableComponent>

57
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
View File

@@ -315,6 +315,7 @@ export default function RollingUnit({
spotlightId={spotlightId + "Prev"}
spotlightDisabled={prevFocus}
onKeyDown={prevKeyDown}
aria-label="Move to left Button"
/>
) : null}
@@ -327,6 +328,11 @@ export default function RollingUnit({
onBlur={onBlur}
spotlightId={spotlightId}
spotlightDisabled={contentsFocus}
aria-label={
rollingData[startIndex].prdtNm
? rollingData[startIndex].prdtNm
: rollingData[startIndex].tmnlImgNm
}
>
<div className={css.imgBanner}>
<img src={rollingData[startIndex].tmnlImgPath} />
@@ -338,6 +344,7 @@ export default function RollingUnit({
src={rollingData[startIndex].patncLogoPath}
fallbackSrc={defaultLogoImg}
animationSpeed="fast"
ariaLabel={rollingData[startIndex].brdcChnlId}
/>
</p>
</SpottableComponent>
@@ -349,9 +356,15 @@ export default function RollingUnit({
onBlur={onBlur}
spotlightId={spotlightId}
spotlightDisabled={contentsFocus}
aria-label={"LIVE " + rollingData[startIndex].showNm}
>
<p className={css.liveIcon}>
<CustomImage delay={0} src={liveShow} animationSpeed="fast" />
<CustomImage
delay={0}
src={liveShow}
animationSpeed="fast"
ariaLabel="LIVE icon"
/>
</p>
<div
@@ -361,22 +374,32 @@ export default function RollingUnit({
)}
>
{rollingData[startIndex].tmnlImgPath == null ? (
<img
<CustomImage
delay={0}
src={
rollingData[startIndex].vtctpYn === "Y"
? emptyVerImage
: emptyHorImage
}
ariaLabel={rollingData[startIndex].tmnlImgNm}
/>
) : (
<img src={rollingData[startIndex].tmnlImgPath} />
<CustomImage
delay={0}
src={rollingData[startIndex].tmnlImgPath}
ariaLabel={rollingData[startIndex].tmnlImgNm}
/>
)}
<div className={css.btnPlay}>
{rollingData[startIndex].tmnlImgPath == null ? (
""
) : (
<img src={btnPlay} />
<CustomImage
delay={0}
src={btnPlay}
ariaLabel="Play video Button"
/>
)}
</div>
</div>
@@ -387,6 +410,7 @@ export default function RollingUnit({
src={rollingData[startIndex].patncLogoPath}
fallbackSrc={defaultLogoImg}
animationSpeed="fast"
ariaLabel={rollingData[startIndex].brdcChnlId}
/>
</p>
</SpottableComponent>
@@ -398,6 +422,7 @@ export default function RollingUnit({
onBlur={onBlur}
spotlightId={spotlightId}
spotlightDisabled={contentsFocus}
aria-label={rollingData[startIndex].showNm}
>
<div
className={classNames(
@@ -406,22 +431,32 @@ export default function RollingUnit({
)}
>
{rollingData[startIndex].tmnlImgPath == null ? (
<img
<CustomImage
delay={0}
src={
rollingData[startIndex].vtctpYn === "Y"
? emptyVerImage
: emptyHorImage
}
ariaLabel={rollingData[startIndex].tmnlImgNm}
/>
) : (
<img src={rollingData[startIndex].tmnlImgPath} />
<CustomImage
delay={0}
src={rollingData[startIndex].tmnlImgPath}
ariaLabel={rollingData[startIndex].tmnlImgNm}
/>
)}
<div className={css.btnPlay}>
{rollingData[startIndex].tmnlImgPath == null ? (
""
) : (
<img src={btnPlay} />
<CustomImage
delay={0}
src={btnPlay}
ariaLabel="Play video Button"
/>
)}
</div>
@@ -432,6 +467,7 @@ export default function RollingUnit({
src={rollingData[startIndex].patncLogoPath}
fallbackSrc={defaultLogoImg}
animationSpeed="fast"
ariaLabel={rollingData[startIndex].brdcChnlId}
/>
</p>
)}
@@ -449,6 +485,11 @@ export default function RollingUnit({
onBlur={onBlur}
spotlightId={spotlightId}
spotlightDisabled={contentsFocus}
aria-label={
rollingData[startIndex].prdtNm
? rollingData[startIndex].prdtNm
: rollingData[startIndex].tmnlImgNm
}
>
<div className={css.productInfo}>
<div className={css.textBox}>{rollingData[startIndex].prdtNm}</div>
@@ -473,6 +514,7 @@ export default function RollingUnit({
animationSpeed="fast"
src={rollingData[startIndex].tmnlImgPath}
fallbackSrc={defaultImageItem}
ariaLabel={rollingData[startIndex].tmnlImgNm}
/>
</div>
</SpottableComponent>
@@ -487,6 +529,7 @@ export default function RollingUnit({
spotlightId={spotlightId + "Next"}
spotlightDisabled={nextFocus}
onKeyDown={nextKeyDown}
aria-label="Move to right Button"
/>
) : null}
</Container>