탭 레이아웃 접근성 작업

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 && (