From 879ffed753356ec3784c1283c649cafe846e7cdf Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Wed, 26 Jun 2024 11:20:48 +0900 Subject: [PATCH] =?UTF-8?q?homepanel=20aria-label=20=EB=B0=9C=ED=99=94=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=9A=A9=EB=8F=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/HomePanel/BestSeller/BestSeller.jsx | 69 +++++++++------- .../views/HomePanel/HomeOnSale/HomeOnSale.jsx | 53 ++++++++----- .../HomePanel/PopularShow/PopularShow.jsx | 79 ++++++++++++------- 3 files changed, 124 insertions(+), 77 deletions(-) diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index 945006f2..cd006bb5 100644 --- 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; } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx index 06454055..85cc58f4 100644 --- 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, ] ); diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index 96fb6b22..b7888fab 100644 --- 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) => {