homepanel aria-label 발화 테스트용도

2024-06-26 11:20:48 +09:00
parent 0a4ba6418d
commit 879ffed753
3 changed files with 124 additions and 77 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
@@ -1,36 +1,20 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from "react";

-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";

-import Spotlight from '@enact/spotlight';
-import {
-  SpotlightContainerDecorator,
-} from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import Spotlight from "@enact/spotlight";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";

-import {
-  pushPanel,
-  updatePanel,
-} from '../../../actions/panelActions';
-import SectionTitle from '../../../components/SectionTitle/SectionTitle';
-import TItemCard from '../../../components/TItemCard/TItemCard';
-import TScroller from '../../../components/TScroller/TScroller';
-import useScrollReset from '../../../hooks/useScrollReset';
-import useScrollTo from '../../../hooks/useScrollTo';
-import { panel_names } from '../../../utils/Config';
-import {
-  $L,
-  scaleW,
-} from '../../../utils/helperMethods';
-import css from './BestSeller.module.less';
+import { pushPanel, updatePanel } from "../../../actions/panelActions";
+import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+import TItemCard from "../../../components/TItemCard/TItemCard";
+import TScroller from "../../../components/TScroller/TScroller";
+import useScrollReset from "../../../hooks/useScrollReset";
+import useScrollTo from "../../../hooks/useScrollTo";
+import { panel_names } from "../../../utils/Config";
+import { $L, scaleW } from "../../../utils/helperMethods";
+import css from "./BestSeller.module.less";

 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -54,6 +38,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
  );

  const [drawChk, setDrawChk] = useState(false);
+  const [firstChk, setFirstChk] = useState(0);

  const orderStyle = useMemo(() => ({ order: order }), [order]);

@@ -102,6 +87,30 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
        handleScrollReset();
      }

+      if (firstChk === 0 && itemIndex === 0) {
+        const c = Spotlight.getCurrent();
+        if (c) {
+          let cAriaLabel = c.getAttribute("aria-label");
+          cAriaLabel = "Best Seller, Heading 1," + cAriaLabel;
+          c.setAttribute("aria-label", cAriaLabel);
+        }
+        setFirstChk(1);
+      } else if (firstChk === 1 && itemIndex === 0) {
+        const c = Spotlight.getCurrent();
+        if (c) {
+          let cAriaLabel = c.getAttribute("aria-label");
+          if (cAriaLabel) {
+            const newcAriaLabel = cAriaLabel.replace(
+              "Best Seller, Heading 1,",
+              ""
+            );
+            c.setAttribute("aria-label", newcAriaLabel);
+          }
+        }
+      } else {
+        return;
+      }
+
      if (cursorVisible) {
        return;
      }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
@@ -1,24 +1,17 @@
-import React, {
-  useCallback,
-  useMemo,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from "react";

-import { useSelector } from 'react-redux';
+import { useSelector } from "react-redux";

-import {
-  SpotlightContainerDecorator,
-} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spotlight from "@enact/spotlight";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";

-import SectionTitle from '../../../components/SectionTitle/SectionTitle';
-import TScroller from '../../../components/TScroller/TScroller';
-import useScrollReset from '../../../hooks/useScrollReset';
-import useScrollTo from '../../../hooks/useScrollTo';
-import {
-  $L,
-  scaleW,
-} from '../../../utils/helperMethods';
-import css from './HomeOnSale.module.less';
-import HomeOnSaleItem from './HomeOnSaleItem/HomeOnSaleItem';
+import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+import TScroller from "../../../components/TScroller/TScroller";
+import useScrollReset from "../../../hooks/useScrollReset";
+import useScrollTo from "../../../hooks/useScrollTo";
+import { $L, scaleW } from "../../../utils/helperMethods";
+import css from "./HomeOnSale.module.less";
+import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem";

 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
@@ -32,6 +25,8 @@ const HomeOnSale = ({
  spotlightId,
  ...rest
 }) => {
+  const [firstChk, setFirstChk] = useState(0);
+
  const { getScrollTo, scrollLeft } = useScrollTo();
  const { handleScrollReset, handleStopScrolling } = useScrollReset(
    scrollLeft,
@@ -63,6 +58,27 @@ const HomeOnSale = ({
        handleScrollReset();
      }

+      if (firstChk === 0 && index === 0) {
+        const c = Spotlight.getCurrent();
+        if (c) {
+          let cAriaLabel = c.getAttribute("aria-label");
+          cAriaLabel = "On Sale, Heading 1," + cAriaLabel;
+          c.setAttribute("aria-label", cAriaLabel);
+        }
+        setFirstChk(1);
+      } else if (firstChk === 1 && index === 0) {
+        const c = Spotlight.getCurrent();
+        if (c) {
+          let cAriaLabel = c.getAttribute("aria-label");
+          if (cAriaLabel) {
+            const newcAriaLabel = cAriaLabel.replace("On Sale, Heading 1,", "");
+            c.setAttribute("aria-label", newcAriaLabel);
+          }
+        }
+      } else {
+        return;
+      }
+
      if (index === homeOnSaleInfos?.length - 1) {
        handleScrollRight(e);
      }
@@ -78,6 +94,7 @@ const HomeOnSale = ({
      handleScrollRight,
      homeOnSaleInfos?.length,
      scrollTopBody,
+      firstChk,
    ]
  );

--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
@@ -1,36 +1,24 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } 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 Spotlight from "@enact/spotlight";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";

-import { pushPanel } from '../../../actions/panelActions';
-import { startVideoPlayer } from '../../../actions/playActions';
-import SectionTitle from '../../../components/SectionTitle/SectionTitle';
+import { pushPanel } from "../../../actions/panelActions";
+import { startVideoPlayer } from "../../../actions/playActions";
+import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TItemCard, {
  IMAGETYPES,
  TYPES,
-} from '../../../components/TItemCard/TItemCard';
-import TScroller from '../../../components/TScroller/TScroller';
-import useScrollReset from '../../../hooks/useScrollReset';
-import useScrollTo from '../../../hooks/useScrollTo';
-import { panel_names } from '../../../utils/Config';
-import {
-  $L,
-  scaleW,
-} from '../../../utils/helperMethods';
-import css from '../PopularShow/PopularShow.module.less';
+} from "../../../components/TItemCard/TItemCard";
+import TScroller from "../../../components/TScroller/TScroller";
+import useScrollReset from "../../../hooks/useScrollReset";
+import useScrollTo from "../../../hooks/useScrollTo";
+import { panel_names } from "../../../utils/Config";
+import { $L, scaleW } from "../../../utils/helperMethods";
+import css from "../PopularShow/PopularShow.module.less";

 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -62,6 +50,8 @@ const PopularShow = ({

  const orderStyle = useMemo(() => ({ order: order }), [order]);

+  const [firstChk, setFirstChk] = useState(0);
+
  useEffect(() => {
    setDrawChk(true);
  }, [topInfos]);
@@ -103,7 +93,7 @@ const PopularShow = ({
        handleStopScrolling();
      }
    },
-    [handleStopScrolling]
+    [handleStopScrolling, firstChk]
  );

  const handleFocus = useCallback(
@@ -114,11 +104,42 @@ const PopularShow = ({
        handleScrollReset();
      }

+      if (firstChk === 0 && itemIndex === 0) {
+        const c = Spotlight.getCurrent();
+        const getAriaLabel = c.getAttribute("aria-label");
+        if (c) {
+          let cAriaLabel = c.getAttribute("aria-label");
+          cAriaLabel = "POPULAR SHOW, Heading 1," + cAriaLabel;
+          c.setAttribute("aria-label", cAriaLabel);
+        }
+        setFirstChk(1);
+      } else if (firstChk === 1 && itemIndex === 0) {
+        const c = Spotlight.getCurrent();
+        if (c) {
+          let cAriaLabel = c.getAttribute("aria-label");
+          if (cAriaLabel) {
+            const newcAriaLabel = cAriaLabel.replace(
+              "POPULAR SHOW, Heading 1,",
+              ""
+            );
+            c.setAttribute("aria-label", newcAriaLabel);
+          }
+        }
+      } else {
+        return;
+      }
+
      if (cursorVisible) {
        return;
      }
    },
-    [cursorVisible, _handleItemFocus, handleScrollReset, scrollTopBody]
+    [
+      cursorVisible,
+      _handleItemFocus,
+      handleScrollReset,
+      scrollTopBody,
+      firstChk,
+    ]
  );

  const handleScrollRight = (e) => {