diff --git a/com.twin.app.shoptime/src/components/TButtonTab/TButtonTab.jsx b/com.twin.app.shoptime/src/components/TButtonTab/TButtonTab.jsx
index 42e591ab..1732e644 100644
--- a/com.twin.app.shoptime/src/components/TButtonTab/TButtonTab.jsx
+++ b/com.twin.app.shoptime/src/components/TButtonTab/TButtonTab.jsx
@@ -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 (
{$L(item)}
diff --git a/com.twin.app.shoptime/src/components/TButtonTab/TButtonTabItem.jsx b/com.twin.app.shoptime/src/components/TButtonTab/TButtonTabItem.jsx
index 60d9af62..ecdd1d5f 100644
--- a/com.twin.app.shoptime/src/components/TButtonTab/TButtonTabItem.jsx
+++ b/com.twin.app.shoptime/src/components/TButtonTab/TButtonTabItem.jsx
@@ -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 ? (
{convertNewlinesToBr(children)}
diff --git a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
index bebbc8a4..4176aa8d 100644
--- a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
+++ b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
@@ -45,6 +45,7 @@ export default function TDropDown({
onBlur={handleStopScrolling}
onOpen={_onOpen}
onClose={_onClose}
+ aria-label={children}
{...rest}
>
{children}
diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx
index 0a21baba..c1084de9 100644
--- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx
+++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx
@@ -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"
/>
);
},
diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryItems.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryItems.jsx
index 74edfcdf..1f3f4505 100644
--- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryItems.jsx
+++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryItems.jsx
@@ -18,7 +18,7 @@ export default function NoResultsCategoryItems() {
-

+
{$L("THERE ARE NO ITEMS AVAILABLE")}
@@ -26,9 +26,16 @@ export default function NoResultsCategoryItems() {
{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 (
- ))}
+ );
+ })}
diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryShows.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryShows.jsx
index f14b33c0..bbc2844b 100644
--- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryShows.jsx
+++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/NoResultsCategory/NoResultsCategoryShows.jsx
@@ -10,7 +10,7 @@ export default function NoResultsCategoryShows() {
-

+
{$L("THERE ARE NO SHOWS AVAILABLE")}
diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx
index a7b61452..67aad9d2 100644
--- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx
+++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx
@@ -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 && (
<>
-
{topShowInfo.showNm}
+
+ {topShowInfo.showNm}
+
);
},
diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
index 4755191d..4f2243e8 100644
--- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
+++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
@@ -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 (
-
+
{categoryDatas && (
)}
{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"
/>
)}