optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

detail패널 접근성 추가.

Browse Source
This commit is contained in:
junghoon86.park
2024-06-12 11:00:58 +09:00
parent 78a194e87d
commit 514a05cbac
16 changed files with 334 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
com.twin.app.shoptime/src/components/TButtonScroller/TButtonScroller.jsx
View File

@@ -113,7 +113,7 @@ export default function TButtonScroller({
onClick={handleScrollUp}
spotlightDisabled={checkScrollPosition === "top" || disabledIndicator}
spotlightId="spotlightId_TbuttonScrollerUp"
aria-label="scroll Up"
ariaLabel="scroll Up"
role="button"
/>
<TScroller
@@ -139,7 +139,7 @@ export default function TButtonScroller({
checkScrollPosition === "bottom" || disabledIndicator
}
spotlightId="spotlightId_TbuttonScrollerDown"
aria-label="scroll Down"
ariaLabel="scroll Down"
role="button"
/>
</Container>

10
com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
View File

@@ -1,11 +1,11 @@
import React, { useCallback } from "react";
import React, { useCallback } from 'react';
import classNames from "classnames";
import classNames from 'classnames';
import DropDown from "@enact/sandstone/Dropdown";
import DropDown from '@enact/sandstone/Dropdown';
import useScrollReset from "../../hooks/useScrollReset";
import css from "./TDropDown.module.less";
import useScrollReset from '../../hooks/useScrollReset';
import css from './TDropDown.module.less';
export default function TDropDown({
className,

56
com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
View File

@@ -1,19 +1,28 @@
import React, { useCallback, useEffect, useMemo } from "react";
import React, {
useCallback,
useEffect,
useMemo,
} from 'react';
import classNames from "classnames";
import { useDispatch } from "react-redux";
import classNames from 'classnames';
import { useDispatch } from 'react-redux';
import Alert from "@enact/sandstone/Alert";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import Alert from '@enact/sandstone/Alert';
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import defaultImageItem from "../../../assets/images/img-thumb-empty-product@3x.png";
import { cancelFocusElement, focusElement } from "../../actions/commonActions";
import CustomImage from "../CustomImage/CustomImage";
import TButton from "../TButton/TButton";
import css from "../TPopUp/TPopUp.module.less";
import { SpotlightIds } from "../../utils/SpotlightIds";
import defaultImageItem
from '../../../assets/images/img-thumb-empty-product@3x.png';
import {
cancelFocusElement,
focusElement,
} from '../../actions/commonActions';
import { SpotlightIds } from '../../utils/SpotlightIds';
import CustomImage from '../CustomImage/CustomImage';
import TButton from '../TButton/TButton';
import css from '../TPopUp/TPopUp.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "default-element", preserveId: true },
@@ -26,7 +35,10 @@ const OptionContainer = SpotlightContainerDecorator(
);
const ButtonContainer = SpotlightContainerDecorator("div");
const ButtonContainerNegative = SpotlightContainerDecorator({ defaultElement: `[data-spotlight-id="${'tPopupBtn2'}"]`},"div");
const ButtonContainerNegative = SpotlightContainerDecorator(
{ defaultElement: `[data-spotlight-id="${"tPopupBtn2"}"]` },
"div"
);
const SpottableComponent = Spottable("li");
const SpottableDiv = Spottable("div");
@@ -85,9 +97,9 @@ export default function TPopUp({
}
}, [kind]);
const ButtonContainerComp = useMemo(()=>{
return kind === "exitPopup" ? ButtonContainerNegative: ButtonContainer;
},[kind]);
const ButtonContainerComp = useMemo(() => {
return kind === "exitPopup" ? ButtonContainerNegative : ButtonContainer;
}, [kind]);
const _onClick = useCallback(
(e) => {
@@ -267,12 +279,18 @@ export default function TPopUp({
spotlightId="tPopupBtn1"
onClick={_onClick}
role="button"
ariaLabel={button1Text}
>
{button1Text}
</TButton>
)}
{button2Text && !hasOnClose && (
<TButton spotlightId="tPopupBtn2" onClick={onClose} role="button">
{button2Text && (
<TButton
spotlightId="tPopupBtn2"
onClick={onClose}
role="button"
ariaLabel={button2Text}
>
{button2Text}
</TButton>
)}

5
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -282,6 +282,11 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
onSpotlightUp={onSpotlightUpTButton}
onSpotlightLeft={onSpotlightUpTButton}
marqueeDisabled={false}
ariaLabel={
(prdtId && productData?.prdtNm) ||
(type === "hotel" && hotelData?.hotelInfo.curationNm) ||
(type === "theme" && themeData?.themeInfo[0]?.curationNm)
}
/>
<TBody
className={css.tbody}

45
com.twin.app.shoptime/src/views/DetailPanel/GroupProduct/GroupOption.jsx
View File

@@ -1,17 +1,24 @@
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 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 noGroupImg from "../../../../assets/images/img-my-info-billing@3x.png";
import { pushPanel } from "../../../actions/panelActions";
import TScroller from "../../../components/TScroller/TScroller";
import { panel_names } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import css from "./GroupOption.module.less";
import noGroupImg from '../../../../assets/images/img-my-info-billing@3x.png';
import { pushPanel } from '../../../actions/panelActions';
import TScroller from '../../../components/TScroller/TScroller';
import { panel_names } from '../../../utils/Config';
import { $L } from '../../../utils/helperMethods';
import css from './GroupOption.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", continue5WayHold: true },
@@ -55,12 +62,23 @@ export default function OptionGroup() {
</p>
{groupInfos && groupInfos.length > 0 ? (
groupInfos.map((group, idx) => {
const ariaLabel =
"selected " +
group.prdtNm +
", sale price" +
group.priceInfo.split("|")[1] +
", " +
(idx + 1) +
" of " +
groupInfos.length +
", go to details, button";
return (
<SpottableComponent
className={css.groupOptionInfo}
key={`groupInfos:${idx}`}
onClick={handleGroupItemClick(idx)}
spotlightId={`groupOtion_${idx}`}
aria-label={ariaLabel}
>
<div className={css.productName}>{group.prdtNm}</div>
@@ -76,7 +94,10 @@ export default function OptionGroup() {
);
})
) : (
<div className={css.noItems}>
<div
className={css.noItems}
aria-label="There are no items in this group"
>
<img src={noGroupImg} alt="" />
<div>{$L("There are no items in this group.")}</div>
</div>

61
com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
View File

@@ -4,37 +4,42 @@ import React, {
useMemo,
useRef,
useState,
} from "react";
} from 'react';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import classNames from 'classnames';
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 {
launchMembershipApp,
setHidePopup,
setShowPopup,
} from "../../../actions/commonActions";
} from '../../../actions/commonActions';
import {
getProductCouponDownload,
getProductCouponSearch,
getProductCouponTotDownload,
} from "../../../actions/couponActions";
import { pushPanel } from "../../../actions/panelActions";
import { getProductOption } from "../../../actions/productActions";
import TButton from "../../../components/TButton/TButton";
import TPopUp from "../../../components/TPopUp/TPopUp";
import TQRCode from "../../../components/TQRCode/TQRCode";
import TScroller from "../../../components/TScroller/TScroller";
import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
import usePriceInfo from "../../../hooks/usePriceInfo";
import * as Config from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import FavoriteBtn from "../components/FavoriteBtn";
import css from "./SingleOption.module.less";
} from '../../../actions/couponActions';
import { pushPanel } from '../../../actions/panelActions';
import { getProductOption } from '../../../actions/productActions';
import TButton from '../../../components/TButton/TButton';
import TPopUp from '../../../components/TPopUp/TPopUp';
import TQRCode from '../../../components/TQRCode/TQRCode';
import TScroller from '../../../components/TScroller/TScroller';
import TVirtualGridList
from '../../../components/TVirtualGridList/TVirtualGridList';
import usePriceInfo from '../../../hooks/usePriceInfo';
import * as Config from '../../../utils/Config';
import { $L } from '../../../utils/helperMethods';
import FavoriteBtn from '../components/FavoriteBtn';
import css from './SingleOption.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "default-element" },
@@ -421,9 +426,20 @@ export default function SingleOption({
onBlur={onBlur}
onClick={handleDownloadClick}
>
<div className={css.couponItem}>
<div
className={css.couponItem}
aria-label={
"Purchase over " +
cpnAplyMinPurcAmt +
"up to " +
cpnAplyMaxDcAmt +
" off"
}
>
<span className={css.couponLate}>{`${cpnDctrt}%`}</span>
<span className={css.title}>{cpnTtl}</span>
<span className={css.title} aria-label={cpnTtl}>
{cpnTtl}
</span>
<span className={css.content}>
{$L(
"Purchase over ${cpnAplyMinPurcAmt} (up to ${cpnAplyMaxDcAmt} off)"
@@ -446,6 +462,7 @@ export default function SingleOption({
focused &&
css.focused
)}
aria-label="Download Button"
>
{downloadCouponArr.length > 0 &&
downloadCouponArr.includes(cpnSno)

42
com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelProduct.jsx
View File

@@ -4,23 +4,30 @@ import React, {
useMemo,
useRef,
useState,
} from "react";
} 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 Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import { setShowPopup } from "../../../actions/commonActions";
import TButton from "../../../components/TButton/TButton";
import TQRCode from "../../../components/TQRCode/TQRCode";
import useLogService from "../../../hooks/useLogService";
import * as Config from "../../../utils/Config";
import { $L, formatGMTString } from "../../../utils/helperMethods";
import IndicatorOptions from "../components/indicator/IndicatorOptions";
import ThemeIndicator from "../components/indicator/ThemeIndicator";
import StarRating from "../components/StarRating";
import css from "./HotelProduct.module.less";
import { setShowPopup } from '../../../actions/commonActions';
import TButton from '../../../components/TButton/TButton';
import TQRCode from '../../../components/TQRCode/TQRCode';
import useLogService from '../../../hooks/useLogService';
import * as Config from '../../../utils/Config';
import {
$L,
formatGMTString,
} from '../../../utils/helperMethods';
import IndicatorOptions from '../components/indicator/IndicatorOptions';
import ThemeIndicator from '../components/indicator/ThemeIndicator';
import StarRating from '../components/StarRating';
import css from './HotelProduct.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "default-element", preserveld: true },
@@ -264,7 +271,12 @@ export default function HotelOption({
<div className={css.bottomLayer}>
<div>
<div className={css.today}>{todayFormattedString}</div>
<div className={css.roomType}>
<div
className={css.roomType}
aria-label={
hotelInfos[selectedIndex]?.hotelDetailInfo.roomType
}
>
{hotelInfos[selectedIndex]?.hotelDetailInfo.roomType}
</div>
<div className={css.price}>

51
com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx
View File

@@ -1,23 +1,35 @@
import React, { useCallback, useEffect, useState } from "react";
import React, {
useCallback,
useEffect,
useState,
} from 'react';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { Job } from '@enact/core/util';
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import { getMainYouMayLike } from "../../../actions/mainActions";
import { popPanel, pushPanel } from "../../../actions/panelActions";
import { finishVideoPreview } 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 { $L } from "../../../utils/helperMethods";
import { SpotlightIds } from "../../../utils/SpotlightIds";
import css from "./YouMayLike.module.less";
import { getMainYouMayLike } from '../../../actions/mainActions';
import {
popPanel,
pushPanel,
} from '../../../actions/panelActions';
import { finishVideoPreview } 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 { $L } from '../../../utils/helperMethods';
import { SpotlightIds } from '../../../utils/SpotlightIds';
import css from './YouMayLike.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "default-element", preserveId: true },
@@ -116,6 +128,8 @@ export default function YouMayLike({
offerInfo={offerInfo}
productName={prdtNm}
onClick={handleItemClick}
label={index * 1 + 1 + " of " + youmaylikeData.length}
lastLabel=" go to detail, button"
/>
);
},
@@ -140,6 +154,9 @@ export default function YouMayLike({
onFocus={onFocus}
onBlur={onBlur}
onClick={onButtonClick}
aria-label={
(expanded === false ? "Open " : "Close ") + "YOU MAY LIKE, button"
}
>
{$L("YOU MAY LIKE")}
<span className={classNames(css.arrow, expanded && css.expanded)} />

34
com.twin.app.shoptime/src/views/DetailPanel/components/FavoriteBtn.jsx
View File

@@ -1,21 +1,30 @@
import React, { useCallback, useEffect } from "react";
import React, {
useCallback,
useEffect,
} from 'react';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import Spotlight from "@enact/spotlight";
import Spotlight from '@enact/spotlight';
import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
import {
setHidePopup,
setShowPopup,
} from '../../../actions/commonActions';
import {
getMyFavoriteFlag,
setMainLikeCategory,
} from "../../../actions/mainActions";
import { deleteMyFavorite } from "../../../actions/myPageActions";
import TButton from "../../../components/TButton/TButton";
import TPopUp from "../../../components/TPopUp/TPopUp";
import * as Config from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import css from "./FavoriteBtn.module.less";
} from '../../../actions/mainActions';
import { deleteMyFavorite } from '../../../actions/myPageActions';
import TButton from '../../../components/TButton/TButton';
import TPopUp from '../../../components/TPopUp/TPopUp';
import * as Config from '../../../utils/Config';
import { $L } from '../../../utils/helperMethods';
import css from './FavoriteBtn.module.less';
export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) {
const dispatch = useDispatch();
@@ -76,6 +85,7 @@ export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) {
favoriteFlagData.favorFlag === "N" ? css.favorBtn : css.favorUnableBtn
)}
onClick={handleFavoriteClick}
ariaLabel="Register in Favorites"
/>
{activePopup === Config.ACTIVE_POPUP.favoritePopup && (
<TPopUp

15
com.twin.app.shoptime/src/views/DetailPanel/components/ProductOption.jsx
View File

@@ -22,13 +22,22 @@ export default function ProductOption({ children, productInfo }) {
src={patncLogoPath && patncLogoPath}
fallbackSrc={defaultLogoImg}
/>
<div>
<div aria-label={productInfo.patnrNm + ", ID :" + prdtId}>
{$L("ID")} : {prdtId}
</div>
</div>
<div className={css.title}>{prdtNm}</div>
<div className={css.title} aria-label={prdtNm}>
{prdtNm}
</div>
<div className={css.bottomLayer}>
<div>{revwGrd && <StarRating rating={revwGrd} />}</div>
<div>
{revwGrd && (
<StarRating
rating={revwGrd}
aria-label={"star rating " + revwGrd + " out of 5"}
/>
)}
</div>
<ProductTag productInfo={productInfo} />
</div>
</div>

30
com.twin.app.shoptime/src/views/DetailPanel/components/ProductTag.jsx
View File

@@ -1,10 +1,13 @@
import React, { useEffect } from "react";
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from "react-redux";
import {
useDispatch,
useSelector,
} from 'react-redux';
import usePriceInfo from "../../../hooks/usePriceInfo";
import { $L } from "../../../utils/helperMethods";
import css from "./ProductTag.module.less";
import usePriceInfo from '../../../hooks/usePriceInfo';
import { $L } from '../../../utils/helperMethods';
import css from './ProductTag.module.less';
export default function ProductTag({ productInfo }) {
const { todaySpclFlag, freeShippingFlag, priceInfo, rewd } = productInfo;
@@ -25,13 +28,24 @@ export default function ProductTag({ productInfo }) {
return (
<div className={css.ProductBadge}>
{todaySpclFlag === "Y" && (
<span className={css.specialValue}>{$L("TSV")}</span>
<span className={css.specialValue} aria-label="TSV">
{$L("TSV")}
</span>
)}
{freeShippingFlag === "Y" && (
<span className={css.freeShipping}>{$L("Free S&H")}</span>
<span className={css.freeShipping} aria-label="Free S&H">
{$L("Free S&H")}
</span>
)}
{discountPercentage >= 10 && (
<span className={css.bigSale}>{$L("Big Sale")}</span>
<span className={css.bigSale} aria-label="Big Sale">
{$L("Big Sale")}
</span>
)}
{rewardFlag === "Y" && (
<span className={css.shoptimePrice} aria-label="Shop Time Price">
{$L("Shop Time Price")}
</span>
)}
</div>
);

7
com.twin.app.shoptime/src/views/DetailPanel/components/StarRating.jsx
View File

@@ -13,5 +13,10 @@ export default function StarRating({ rating, className }) {
const roundedRating = Math.min(Math.max(0, roundToHalf(rating)), 5);
const starRating = `starRating-${roundedRating.toString().replace(".", "_")}`;
return <div className={cx("star", starRating, className)} />;
return (
<div
aria-label={"star rating " + roundedRating + " out of 5"}
className={cx("star", starRating, className)}
/>
);
}

52
com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
View File

@@ -1,26 +1,40 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import React, {
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import classNames from 'classnames';
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 playImg from "../../../../../assets/images/btn/btn-play-thumb-nor.png";
import indicatorDefaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
import defaultImage from "../../../../../assets/images/img-thumb-empty-560.png";
import playImg from '../../../../../assets/images/btn/btn-play-thumb-nor.png';
import indicatorDefaultImage
from '../../../../../assets/images/img-thumb-empty-144@3x.png';
import defaultImage from '../../../../../assets/images/img-thumb-empty-560.png';
import {
finishVideoPreview,
startVideoPlayer,
} from "../../../../actions/playActions";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import usePriceInfo from "../../../../hooks/usePriceInfo";
import useScrollTo from "../../../../hooks/useScrollTo";
import { panel_names } from "../../../../utils/Config";
import { $L, scaleW } from "../../../../utils/helperMethods";
import css from "./Indicator.module.less";
} from '../../../../actions/playActions';
import CustomImage from '../../../../components/CustomImage/CustomImage';
import TVirtualGridList
from '../../../../components/TVirtualGridList/TVirtualGridList';
import usePriceInfo from '../../../../hooks/usePriceInfo';
import useScrollTo from '../../../../hooks/useScrollTo';
import { panel_names } from '../../../../utils/Config';
import {
$L,
scaleW,
} from '../../../../utils/helperMethods';
import css from './Indicator.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", preserveld: true },
@@ -231,6 +245,7 @@ function Indicator({
)}
onClick={handleItemClick}
spotlightId={`indicator-image-${index}`}
aria-label={productInfo.prdtNm}
{...rest}
>
<CustomImage
@@ -266,6 +281,7 @@ function Indicator({
onClick={handleVideoOnClick}
onFocus={videoContainerOnFocus}
onBlur={videoContainerOnBlur}
aria-label={productInfo?.prdtNm}
>
<CustomImage
className={css.image}
@@ -310,6 +326,7 @@ function Indicator({
css.upButton,
selectedIndex === 0 && css.disable
)}
aria-label="Move to up"
/>
<Container className={css.tVirtualGridListContainer}>
{productInfo && (
@@ -331,6 +348,7 @@ function Indicator({
css.downButton,
listImages.length - 1 === selectedIndex && css.disable
)}
aria-label="Move to down"
/>
</div>
</Container>

9
com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.jsx
View File

@@ -86,6 +86,7 @@ export default function IndicatorOptions({
<CustomImage
src={thumbnailUrl}
fallbackSrc={defaultImage}
ariaLabel={productInfo?.prdtNm}
alt=""
/>
</p>
@@ -94,6 +95,9 @@ export default function IndicatorOptions({
<CustomImage
src={productInfo?.patncLogoPath}
fallbackSrc={defaultLogoImg}
ariaLabel={
productInfo?.patncNm + ", ID : " + productInfo?.prdtId
}
alt=""
/>
<span>{$L("ID") + ":" + productInfo?.prdtId}</span>
@@ -142,7 +146,10 @@ export default function IndicatorOptions({
)}
{(isCall || isFullOption) && productInfo?.orderPhnNo && (
<div className={css.order}>
<div
className={css.order}
aria-label={productInfo?.orderPhnNo + ", call to order"}
>
<div>{$L("Call to Order")}</div>
<div className={css.icon}>
<span />

48
com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx
View File

@@ -1,22 +1,35 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import React, {
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import Image from "@enact/sandstone/Image";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import Image from '@enact/sandstone/Image';
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import defaultImage from "../../../../../assets/images/img-thumb-empty-560.png";
import { startVideoPlayer } from "../../../../actions/playActions";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../hooks/useScrollTo";
import { panel_names } from "../../../../utils/Config";
import { $L, scaleW } from "../../../../utils/helperMethods";
import css from "./ThemeIndicator.module.less";
import ThemeIndicatorArrow from "./ThemeIndicatorArrow";
import defaultImage from '../../../../../assets/images/img-thumb-empty-560.png';
import { startVideoPlayer } from '../../../../actions/playActions';
import CustomImage from '../../../../components/CustomImage/CustomImage';
import TVirtualGridList
from '../../../../components/TVirtualGridList/TVirtualGridList';
import useScrollTo from '../../../../hooks/useScrollTo';
import { panel_names } from '../../../../utils/Config';
import {
$L,
scaleW,
} from '../../../../utils/helperMethods';
import css from './ThemeIndicator.module.less';
import ThemeIndicatorArrow from './ThemeIndicatorArrow';
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", preserveld: true },
@@ -289,6 +302,7 @@ function ThemeIndicator({
onClick={handleVideoOnClick}
onFocus={videoContainerOnFocus}
onBlur={videoContainerOnBlur}
aria-label={themeProductInfo?.prdtNm}
>
<CustomImage
className={classNames(css.image)}
@@ -319,6 +333,7 @@ function ThemeIndicator({
css.upButton,
selectedIndex === 0 && css.disable
)}
aria-label="Move to up"
/>
<Container
className={css.tVirtualGridListContainer}
@@ -343,6 +358,7 @@ function ThemeIndicator({
css.downButton,
themeProductInfos.length - 1 === selectedIndex && css.disable
)}
aria-label="Move to down"
/>
</div>
</Container>

22
com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicatorArrow.jsx
View File

@@ -1,13 +1,20 @@
import React, { useCallback, useMemo, useState } from "react";
import React, {
useCallback,
useMemo,
useState,
} from 'react';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import Spotlight from "@enact/spotlight";
import Spottable from "@enact/spotlight/Spottable";
import Spotlight from '@enact/spotlight';
import Spottable from '@enact/spotlight/Spottable';
import { getVideoIndicatorFocus } from "../../../../actions/productActions";
import css from "./ThemeIndicatorArrow.module.less";
import { getVideoIndicatorFocus } from '../../../../actions/productActions';
import css from './ThemeIndicatorArrow.module.less';
const SpottableComponent = Spottable("div");
export default function ThemeIndicatorArrow({
@@ -70,6 +77,7 @@ export default function ThemeIndicatorArrow({
(themeProductInfo?.prdtMediaUrl && imageSelectedIndex === 0)
}
spotlightId="thumbnailPrevButton"
aria-label={themeProductInfo?.prdtNm}
/>
{hasMediaUrl ? (
<span>