홈패널 접근성 처리

- 베스트셀러.온세일,파퓰러쇼 부분적용

com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx

@@ -62,6 +62,7 @@ export default memo(function TItemCard({
   spotlightId,
   nonPosition = false,
   type = TYPES.vertical,
+  firstLabel,
   label,
   lastLabel,
   ...rest
@@ -125,7 +126,9 @@ export default memo(function TItemCard({
     ? " Original price " + originalPrice + ", "
     : "";
   const lastLabeltext = lastLabel ? lastLabel : "";
+  const firstLabeltext = firstLabel ? firstLabel + " " : "";
   const ariaLabel =
+    firstLabeltext +
     discountLabel +
     productName +
     discountpriceLabel +

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -148,23 +148,36 @@ const BestSeller = ({ order, scrollTopBody, handleItemFocus }) => {
                 offerInfo,
               },
               itemIndex
-            ) => (
-              <TItemCard
-                key={prdtId}
-                imageAlt={prdtId}
-                imageSource={imgUrl}
-                priceInfo={priceInfo}
-                productName={prdtNm}
-                isBestSeller={true}
-                productId={prdtId}
-                rank={rankOrd}
-                onFocus={handleFocus(itemIndex)}
-                onBlur={handleBlur(itemIndex)}
-                onClick={handleCardClick(patnrId, prdtId)}
-                offerInfo={offerInfo}
-                spotlightId={"bestsellerItem" + itemIndex}
-              />
-            )
+            ) => {
+              const rankText =
+                rankOrd === 1
+                  ? rankOrd + "st"
+                  : rankOrd === 2
+                  ? rankOrd + "nd"
+                  : rankOrd === 3
+                  ? rankOrd + "rd"
+                  : rankOrd + "th";
+              return (
+                <TItemCard
+                  key={prdtId}
+                  imageAlt={prdtId}
+                  imageSource={imgUrl}
+                  priceInfo={priceInfo}
+                  productName={prdtNm}
+                  isBestSeller={true}
+                  productId={prdtId}
+                  rank={rankOrd}
+                  onFocus={handleFocus(itemIndex)}
+                  onBlur={handleBlur(itemIndex)}
+                  onClick={handleCardClick(patnrId, prdtId)}
+                  offerInfo={offerInfo}
+                  spotlightId={"bestsellerItem" + itemIndex}
+                  firstLabel={rankText}
+                  label={itemIndex * 1 + 1 + " of " + bestSellerDatas.length}
+                  lastLabel=" go to detail, button"
+                />
+              );
+            }
           )}
 
         {drawChk && (
@@ -173,6 +186,7 @@ const BestSeller = ({ order, scrollTopBody, handleItemFocus }) => {
               className={css.displayBox}
               onClick={handleMoreCardClick}
               spotlightId={"bestseller-item-more-btn"}
+              aria-label="See more button"
             ></SpottableComponent>
           </div>
         )}

com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx

@@ -9,10 +9,10 @@ import TScroller from "../../../components/TScroller/TScroller";
 import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
 import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
+import { LOG_MENU } from "../../../utils/Config";
 import { $L, scaleW } from "../../../utils/helperMethods";
 import css from "./HomeOnSale.module.less";
 import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem";
-import { LOG_MENU } from "../../../utils/Config";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -119,6 +119,8 @@ const HomeOnSale = ({ order, scrollTopBody, handleItemFocus, ...rest }) => {
                       itemData={itemData}
                       onFocus={handleFocus(index)}
                       onBlur={handleBlur(index)}
+                      label={index * 1 + 1 + " of " + homeOnSaleInfos.length}
+                      lastLabel=" go to detail, button"
                     />
                   );
                 })}

com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.jsx

@@ -14,7 +14,13 @@ import css from "./HomeOnSaleItem.module.less";
 
 const SpottableComponent = Spottable("div");
 
-export default function HomeOnSaleItem({ homeOnSaleInfos, itemData, ...rest }) {
+export default function HomeOnSaleItem({
+  homeOnSaleInfos,
+  itemData,
+  label,
+  lastLabel,
+  ...rest
+}) {
   const { originalPrice, discountedPrice, discountRate } =
     usePriceInfo(itemData.priceInfo) || {};
 
@@ -36,11 +42,31 @@ export default function HomeOnSaleItem({ homeOnSaleInfos, itemData, ...rest }) {
     },
     [dispatch, itemData]
   );
+  const prdtNum = label ? label : "";
+  const discountLabel = discountRate ? discountRate + " discount," : "";
+  const discountpriceLabel = discountRate
+    ? ", Sale price " + discountedPrice
+    : "";
+  const priceLabel = originalPrice
+    ? ", Original price " + originalPrice + ", "
+    : "";
+  const lastLabeltext = lastLabel ? lastLabel : "";
+
+  const ariaLabel =
+    discountLabel +
+    itemData.prdtNm +
+    "," +
+    itemData.catNm +
+    discountpriceLabel +
+    priceLabel +
+    prdtNum +
+    lastLabeltext;
   return (
     <SpottableComponent
       className={css.onSaleItemList}
       onClick={() => handleCardClick(itemData)}
       spotlightId={"home_onsale_item_" + itemData.prdtId}
+      aria-label={ariaLabel}
       {...rest}
     >
       <CustomImage

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -158,6 +158,7 @@ const PopularShow = ({
                 patncLogoPath,
                 catNm,
                 patnrId,
+                patncNm,
                 catCd,
                 showUrl,
               },
@@ -186,6 +187,9 @@ const PopularShow = ({
                   onFocus={handleFocus(itemIndex)}
                   onBlur={handleBlur(itemIndex)}
                   onClick={handleCardClick(patnrId, showId, catCd, showUrl)}
+                  firstLabel={patncNm + " "}
+                  label={itemIndex * 1 + 1 + " of " + topInfos.length}
+                  lastLabel=" go to detail, button"
                 />
               );
             }