탭 레이아웃 접근성 작업

com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx

@@ -31,6 +31,7 @@ const TabItemBase = ({
   tabActivated,
   setSubTabLastFocusId,
   setSelectedTitle,
+  length,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
@@ -161,6 +162,7 @@ const TabItemBase = ({
       onBlur={_onBlur}
       onClick={_onClick}
       spotlightId={spotlightId}
+      role="button"
     >
       <div
         className={classNames(

com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx

@@ -1,21 +1,13 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
-import classNames from 'classnames';
-import compose from 'ramda/src/compose';
+import classNames from "classnames";
+import compose from "ramda/src/compose";
 
-import { Job } from '@enact/core/util';
-import {
-  Marquee,
-  MarqueeController,
-} from '@enact/sandstone/Marquee';
-import Spottable from '@enact/spotlight/Spottable';
+import { Job } from "@enact/core/util";
+import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
+import Spottable from "@enact/spotlight/Spottable";
 
-import css from './TabItemSub.module.less';
+import css from "./TabItemSub.module.less";
 
 const SpottableComponent = Spottable("div");
 const TabItemBase = ({
@@ -30,14 +22,15 @@ const TabItemBase = ({
   isSubItem,
   onFocus,
   path,
+  patncNm,
   spotlightId,
   setLastFocusId,
   setSelectedTitle,
+  label,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
   const itemRef = useRef();
-
   const clearPressedJob = useRef(
     new Job((func) => {
       setTimeout(func, 100);
@@ -136,6 +129,12 @@ const TabItemBase = ({
       onBlur={_onBlur}
       onClick={_onClick}
       spotlightId={spotlightId}
+      role="button"
+      aria-label={
+        patncNm
+          ? "Selected Channel " + patncNm + " button " + label
+          : title.split("-")[0] + " Button " + label
+      }
     >
       <div className={classNames(isSubItem && css.subWrap)}>
         {!path && (

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

@@ -60,6 +60,7 @@ class TabMenuItem {
     title = "",
     spotlightId,
     path,
+    patncNm,
     target,
     id,
     children = []
@@ -70,6 +71,7 @@ class TabMenuItem {
     this.path = path;
     this.target = target;
     this.id = id;
+    this.patncNm = patncNm;
     this.children = children.map(
       (child) =>
         new TabMenuItem(
@@ -77,6 +79,7 @@ class TabMenuItem {
           child.title,
           child.spotlightId,
           child.path,
+          child.patncNm,
           child.target,
           child.id
         )
@@ -190,6 +193,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
             icons: FeaturedBrandIcon,
             id: item.patnrId,
             path: item.patncLogoPath,
+            patncNm: item.patncNm,
             spotlightId: "spotlight_featuredbrand",
             target: [
               {
@@ -300,6 +304,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
               id: item.id,
               title: item.title,
               path: item.path,
+              patncNm: item.patncNm,
               target: item.target,
               spotlightId: `secondDepth-${item.id}`,
             }));
@@ -314,13 +319,13 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
 
   const makeTabmenu = useCallback(() => {
     const t = [];
-
     for (let i = 0; i < menuItems.length; i++) {
       const tabmenu = new TabMenuItem(
         menuItems[i].icons,
         menuItems[i].title,
         menuItems[i].spotlightId,
         menuItems[i].path,
+        menuItems[i].patncNm,
         menuItems[i].target,
         menuItems[i].id,
         menuItems[i].children
@@ -673,6 +678,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
                     opened={mainSelectedIndex === index}
                     tabActivated={tabActivated}
                     setSubTabLastFocusId={setSubTabLastFocusId}
+                    length={tabs.length}
                   />
                 ))}
               </MainContainer>
@@ -711,6 +717,7 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
                             title={item.title + "-sub"}
                             lgCatCd={item.id}
                             path={item.path}
+                            patncNm={item.patncNm}
                             showSubTab={showSubTab}
                             setSelectedTitle={setSelectedTitle}
                             selected={
@@ -718,6 +725,12 @@ export default function TabLayout({ topPanelName, onTabActivated, panelInfo }) {
                               item.target[0]?.panelInfo &&
                               panels[0]?.panelInfo === item.target[0]?.panelInfo
                             }
+                            label={
+                              index * 1 +
+                              1 +
+                              " of " +
+                              tabs[mainSelectedIndex]?.children.length
+                            }
                           />
                         );
                       })}