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

카테고리 접근성 적용

Browse Source
This commit is contained in:
junghoon86.park
2024-05-31 14:05:02 +09:00
parent 7ddfcc2947
commit a2616b0cb8
9 changed files with 75 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
com.twin.app.shoptime/src/components/TButtonTab/TButtonTab.jsx
View File

@@ -5,9 +5,9 @@ import classNames from "classnames";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import useScrollReset from "../../hooks/useScrollReset";
import { $L } from "../../utils/helperMethods";
import css from "./TButtonTab.module.less";
import TButtonTabItem from "./TButtonTabItem";
import { $L } from "../../utils/helperMethods";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
@@ -66,6 +66,21 @@ export default function TButtonTab({
{...rest}
>
{contents.map((item, index) => {
const selectedText = "Selected, ";
let ariaLabelText = null;
const selectedChk = index === selectedIndex;
if (selectedChk) {
ariaLabelText =
selectedText +
item +
", tab, " +
(index * 1 + 1) +
" of " +
contents.length;
} else {
ariaLabelText =
item + ", tab, " + (index * 1 + 1) + " of " + contents.length;
}
return (
<TButtonTabItem
key={`buttonTabItem ${index}`}
@@ -79,6 +94,7 @@ export default function TButtonTab({
colorType={colorType}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
ariaLabel={ariaLabelText}
>
{$L(item)}
</TButtonTabItem>

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

@@ -28,6 +28,7 @@ const ItemBase = ({
scrollTop,
onBlur,
onFocus,
ariaLabel,
...rest
}) => {
const [pressed, setPressed] = useState(false);
@@ -88,6 +89,7 @@ const ItemBase = ({
spotlightDisabled={spotlightDisabled}
onFocus={_onFocus}
onBlur={_onBlur}
aria-label={ariaLabel}
>
{noMarquee ? (
<div className={css.title}>{convertNewlinesToBr(children)}</div>

1
com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
View File

@@ -45,6 +45,7 @@ export default function TDropDown({
onBlur={handleStopScrolling}
onOpen={_onOpen}
onClose={_onClose}
aria-label={children}
{...rest}
>
{children}

3
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx
View File

@@ -62,7 +62,6 @@ export default function ItemContents({ onClick }) {
prdtNm,
priceInfo,
rankOrd,
total,
} = targetItem;
return (
@@ -77,6 +76,8 @@ export default function ItemContents({ onClick }) {
onClick={_handleItemClick(patnrId, prdtId)}
offerInfo={offerInfo}
spotlightId={"categoryItemContents" + index}
label={index * 1 + 1 + " of " + itemListDatas.total}
lastLabel=" go to detail, button"
/>
);
},

21
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryItems.jsx
View File

@@ -18,7 +18,7 @@ export default function NoResultsCategoryItems() {
<div className={css.container}>
<div className={css.info}>
<div className={css.imageBox}>
<img src={NoResultsImage} alt="No Datas" />
<img src={NoResultsImage} alt="THERE ARE NO SHOWS AVAILABLE" />
</div>
<p>{$L("THERE ARE NO ITEMS AVAILABLE")}</p>
</div>
@@ -26,9 +26,16 @@ export default function NoResultsCategoryItems() {
<SectionTitle title={$L("BEST SELLER")} />
<TGrid>
{bestSellerDatas &&
bestSellerDatas
.slice(0, 5)
.map((bestSeller) => (
bestSellerDatas.slice(0, 5).map((bestSeller, index) => {
const rankText =
bestSeller.rankOrd === 1
? bestSeller.rankOrd + "st"
: bestSeller.rankOrd === 2
? bestSeller.rankOrd + "nd"
: bestSeller.rankOrd === 3
? bestSeller.rankOrd + "rd"
: bestSeller.rankOrd + "th";
return (
<TItemCard
key={bestSeller.rankOrd}
imageSource={bestSeller.imgUrl}
@@ -36,9 +43,13 @@ export default function NoResultsCategoryItems() {
productName={bestSeller.prdtNm}
priceInfo={bestSeller.priceInfo}
rank={bestSeller.rankOrd}
firstLabel={rankText}
label={index * 1 + 1 + " of 5"}
lastLabel=" go to detail, button"
isBestSeller
/>
))}
);
})}
</TGrid>
</div>
</div>

2
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryShows.jsx
View File

@@ -10,7 +10,7 @@ export default function NoResultsCategoryShows() {
<div className={css.container}>
<div className={css.info}>
<div className={css.imageBox}>
<img src={NoResultsImage} alt="No Datas" />
<img src={NoResultsImage} alt="THERE ARE NO SHOWS AVAILABLE" />
</div>
<p>{$L("THERE ARE NO SHOWS AVAILABLE")}</p>
</div>

36
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx
View File

@@ -1,23 +1,17 @@
import React, { useCallback } from 'react';
import React, { useCallback } from "react";
import {
useDispatch,
useSelector,
} from 'react-redux';
import { useDispatch, useSelector } from "react-redux";
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import defaultImageShow
from '../../../../../assets/images/img-thumb-empty-product@3x.png';
import { startVideoPlayer } from '../../../../actions/playActions';
import CustomImage from '../../../../components/CustomImage/CustomImage';
import NoResultsCategoryShows
from '../NoResultsCategory/NoResultsCategoryShows';
import css from './ShowContents.module.less';
import ShowLists from './ShowLists/ShowLists';
import ShowProductContents from './ShowProductContents/ShowProductContents';
import defaultImageShow from "../../../../../assets/images/img-thumb-empty-product@3x.png";
import { startVideoPlayer } from "../../../../actions/playActions";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import NoResultsCategoryShows from "../NoResultsCategory/NoResultsCategoryShows";
import css from "./ShowContents.module.less";
import ShowLists from "./ShowLists/ShowLists";
import ShowProductContents from "./ShowProductContents/ShowProductContents";
const SpottableVideoContainer = Spottable("div");
const Container = SpotlightContainerDecorator(
@@ -58,7 +52,12 @@ export default function ShowContents({ onClick }) {
<>
{topShowInfo && (
<>
<h1 className={css.topsTitle}>{topShowInfo.showNm}</h1>
<h1
className={css.topsTitle}
aria-label={topShowInfo.showNm + ", Heading2"}
>
{topShowInfo.showNm}
</h1>
<Container className={css.topShowContainer}>
<SpottableVideoContainer
className={css.videoContainer}
@@ -69,6 +68,7 @@ export default function ShowContents({ onClick }) {
topShowInfo.showUrl
)}
spotlightId={"category-topshow"}
aria-label={"1st, " + topShowInfo.showNm}
>
<CustomImage
alt={topShowInfo.showNm}

30
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.jsx
View File

@@ -1,24 +1,16 @@
import React, {
useCallback,
useEffect,
} from 'react';
import React, { useCallback, useEffect } from "react";
import {
useDispatch,
useSelector,
} from 'react-redux';
import { useDispatch, useSelector } from "react-redux";
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { startVideoPlayer } from '../../../../../actions/playActions';
import TItemCard from '../../../../../components/TItemCard/TItemCard';
import TVirtualGridList
from '../../../../../components/TVirtualGridList/TVirtualGridList';
import useScrollTo from '../../../../../hooks/useScrollTo';
import { panel_names } from '../../../../../utils/Config';
import { SpotlightIds } from '../../../../../utils/SpotlightIds';
import css from './ShowProductContents.module.less';
import { startVideoPlayer } from "../../../../../actions/playActions";
import TItemCard from "../../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../../hooks/useScrollTo";
import { panel_names } from "../../../../../utils/Config";
import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./ShowProductContents.module.less";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", leaveFor: { left: "", right: "" } },
@@ -77,6 +69,8 @@ export default function ShowProductContents({ onClick }) {
onClick={handleItemClick(index)}
offerInfo={offerInfo}
productId={prdtId}
label={index * 1 + 1 + " of " + productInfos.length}
lastLabel=" go to detail, button"
/>
);
},

9
com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
View File

@@ -115,8 +115,9 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
: LOG_MENU.CATEGORY_ITEM;
}
}
sendLogGNB(nowMenu);
if (nowMenu) {
sendLogGNB(nowMenu);
}
}, [categoryItemInfos, categoryShowInfos, sendLogGNB, tab]);
useEffect(() => {
@@ -349,7 +350,7 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
return (
<TPanel>
<THeader title="CATEGORY" />
<THeader title="CATEGORY" ariaLabel="CATEGORY, HEADING 1" />
{categoryDatas && (
<TBody
className={css.tBody}
@@ -363,6 +364,7 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
title={lgCatNm}
className={css.title}
itemCount={itemCountNumbers}
ariaLabel={lgCatNm}
/>
)}
{buttonTabList && buttonTabList.length > 0 && (
@@ -397,6 +399,7 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
type={TYPES.topButton}
size={null}
onClick={handleTopButtonClick}
ariaLabel="Move to Top, Button"
/>
)}
</div>