플레이어 패널 부분 접근성 적용

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

@@ -10,7 +10,7 @@ let script = document.createElement("script");
 script.innerText = QRCodeMin;
 document.body.appendChild(script);
 
-export default function TQRCode({ text, menu, width = "128", height = "128" }) {
+export default function TQRCode({ ariaLabel,text, menu, width = "128", height = "128" }) {
   const qrcodeRef = useRef(null);
   const deviceInfo = useSelector((state) => state.device.deviceInfo);
   const dispatch = useDispatch();
@@ -36,5 +36,5 @@ export default function TQRCode({ text, menu, width = "128", height = "128" }) {
       });
     }
   }, [text, menu, deviceInfo]);
-  return <div ref={qrcodeRef} />;
+  return <div aria-label={ariaLabel} ref={qrcodeRef} />;
 }

com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx

@@ -103,7 +103,7 @@ export default memo(function PlayerItemCard({
   }, [onFocus]);
 
   const progressStyle = useMemo(() => ({ width: `${percent}%` }), [percent]);
-
+  const ariaLabel = "Selected, " + patnerName + " " + productName;
   return (
     <SpottableComponent
       className={classNames(css[type])}
@@ -113,6 +113,7 @@ export default memo(function PlayerItemCard({
       spotlightId={
         productId ? "spotlightId-" + removeDotAndColon(productId) : spotlightId
       }
+      aria-label={ariaLabel}
       {...rest}
     >
       <div className={css.imageWrap}>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayChat.jsx

@@ -40,34 +40,52 @@ export default function PlayerOverlayChat({ currentTime }) {
   return (
     <>
       <div className={css.chatContainer}>
-        <div className={css.chatHeader}>LIVE CHAT</div>
+        <div className={css.chatHeader} aria-label="LIVE CHAT">
+          LIVE CHAT
+        </div>
         <div className={css.contents}>
           {recentChats.map((item, index) => (
             <div key={index} className={css.chatItem} style={{ order: -index }}>
-              <div className={css.username}>{item?.username}</div>
-              <div className={css.content}>{item?.content}</div>
+              <div className={css.username} aria-label={item?.username}>
+                {item?.username}
+              </div>
+              <div className={css.content} aria-label={item?.content}>
+                {item?.content}
+              </div>
             </div>
           ))}
         </div>
-        <TButton className={css.messageBtn} onClick={handleQRCodeClick}>
+        <TButton
+          className={css.messageBtn}
+          onClick={handleQRCodeClick}
+          ariaLabel="TYPE A MESSAGE"
+        >
           {"TYPE A MESSAGE"}
         </TButton>
-        <p className={css.chatclose}>X</p>
+        <p className={css.chatclose} aria-label="chat close, button">
+          X
+        </p>
       </div>
 
       {activePopup === ACTIVE_POPUP.qrPopup && (
         <TPopUp kind="qrPopup" open={popupVisible} onClose={onClose}>
           <div className={css.popupContainer}>
             <div className={css.header}>
-              <h3>{$L("QR CODE")}</h3>
+              <h3 aria-label="QR CODE Heading 1">{$L("QR CODE")}</h3>
             </div>
 
             <div className={css.qrcodeContainer}>
-              <div className={css.qrcode}>
+              <div className={css.qrcode} aria-label="QR image">
                 <TQRCode text="" width="" menu="player" height="" />
               </div>
-              <h3>{$L("To send a message, please scan the QR code.")}</h3>
-              <TButton className={css.popupBtn} onClick={onClose}>
+              <h3 aria-label="To send a message, please scan the QR code.">
+                {$L("To send a message, please scan the QR code.")}
+              </h3>
+              <TButton
+                className={css.popupBtn}
+                onClick={onClose}
+                ariaLabel="Close"
+              >
                 {$L("CLOSE")}
               </TButton>
             </div>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx

@@ -154,12 +154,14 @@ export default function PlayerOverlayContents({
             className={css.backIcon}
             spotlightId="player-back-button"
             onSpotlightDown={onSpotlightMoveMediaButton}
+            aria-label="Video Player Close"
           />
           <div className={css.indicatorUpButton}>
             <SpottableBtn
               onClick={handleIndicatorUpClick}
               spotlightId="videoIndicator-up-button"
               onSpotlightRight={onSpotlightMoveTabButton}
+              aria-label="Previous channel"
             />
           </div>
 
@@ -169,6 +171,7 @@ export default function PlayerOverlayContents({
               spotlightId="videoIndicator-down-button"
               onSpotlightLeft={onSpotlightMoveSlider}
               onSpotlightRight={onSpotlightMoveSlider}
+              aria-label="Next channel"
             />
           </div>
 
@@ -186,12 +189,21 @@ export default function PlayerOverlayContents({
               spotlightId="player-subtitlebutton"
               onSpotlightUp={onSpotlightMoveTabButton}
               onSpotlightLeft={onSpotlightMoveMediaButton}
+              aria-label="Caption"
             />
           </div>
         </Container>
 
-        <div className={panelInfo?.shptmBanrTpNm === "LIVE" && css.liveIcon} />
-        <CustomImage src={patncLogoPath} fallbackSrc={defaultLogoImg} alt="" />
+        <div
+          className={panelInfo?.shptmBanrTpNm === "LIVE" && css.liveIcon}
+          aria-label={panelInfo?.shptmBanrTpNm === "LIVE" && "Live Icon"}
+        />
+        <CustomImage
+          src={patncLogoPath}
+          fallbackSrc={defaultLogoImg}
+          alt={partnerName}
+          aria-label={partnerName}
+        />
         <h2 className={css.patnerName}>{partnerName}</h2>
         <h3 className={css.title}>
           <Marquee className={css.marquee} marqueeOn="render">
@@ -203,7 +215,7 @@ export default function PlayerOverlayContents({
       {panelInfo.shptmBanrTpNm === "VOD" && disclaimer && (
         <div className={css.disclaimer}>
           <span className={css.icon} />
-          <h3>{disclaimer}</h3>
+          <h3 aria-label={disclaimer}>{disclaimer}</h3>
         </div>
       )}
     </>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx

@@ -83,6 +83,7 @@ export default function PlayerOverlayQRCode({
                   menu="player"
                   width="156"
                   height="156"
+                  ariaLabel="QR CODE, “SCAN TO SHOP” go to Shoptime App"
                 />
                 <div className={css.text}>{text}</div>
               </div>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabButton/PlayerTabButton.jsx

@@ -66,6 +66,7 @@ export default function PlayerTabButton({
         onSpotlightUp={onSpotlightUp}
         onSpotlightDown={onSpotlightDown}
         className={css.button}
+        aria-label="See item list"
       />
     </Container>
   );