카테고리 접근성 적용

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 (
           <TButtonTabItem
             key={`buttonTabItem ${index}`}
@@ -79,6 +94,7 @@ export default function TButtonTab({
             colorType={colorType}
             onFocus={handleScrollReset}
             onBlur={handleStopScrolling}
+            ariaLabel={ariaLabelText}
           >
             {$L(item)}
           </TButtonTabItem>

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 ? (
         <div className={css.title}>{convertNewlinesToBr(children)}</div>

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}

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"
         />
       );
     },

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

@@ -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>

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

@@ -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>

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 && (
               <>
-                <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}

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

@@ -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"
         />
       );
     },

com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx

@@ -115,8 +115,9 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
             : LOG_MENU.CATEGORY_ITEM;
       }
     }
-
+    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>