@teamturing/react-kit 2.75.0 → 2.76.0

package/dist/core/Drawer/index.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, RefObject } from 'react';
+import { HTMLAttributes, PropsWithChildren, RefObject } from 'react';
 import { SxProp } from '../../utils/styled-system';
 import { DrawerBodyProps } from './DrawerBody';
 import { DrawerFooterProps } from './DrawerFooter';
@@ -16,7 +16,7 @@ type Props = {
     size?: DrawerSizeType;
     direction?: DrawerDirectionType;
     initialFocusRef?: RefObject<HTMLElement>;
-} & SxProp;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-labelledby'> & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
     isOpen?: boolean | undefined;
     onDismiss?: (() => void) | undefined;
@@ -24,7 +24,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     size?: DrawerSizeType | undefined;
     direction?: DrawerDirectionType | undefined;
     initialFocusRef?: RefObject<HTMLElement> | undefined;
-} & SxProp & {
+} & Pick<HTMLAttributes<HTMLDivElement>, "aria-label" | "aria-labelledby"> & SxProp & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     UnstyledHeader: import("styled-components").IStyledComponent<"web", {

package/dist/core/FormControl/index.d.ts

@@ -30,8 +30,15 @@ type FormControlFieldProps = {
     label: string;
     caption?: string;
 };
-type FormControlContextValue = {} & Omit<Props, 'additionalInputComponentCandidates'>;
-declare const FormControlContext: import("react").Context<Omit<Props, "additionalInputComponentCandidates">>;
+type FormControlContextValue = {
+    /**
+     * `Caption`, `ErrorMessage`, `SuccessMessage`가 Input과 `aria-describedby`로 연결되기 위한 고유 ID입니다.
+     */
+    captionId?: string;
+    errorId?: string;
+    successId?: string;
+} & Omit<Props, 'additionalInputComponentCandidates'>;
+declare const FormControlContext: import("react").Context<FormControlContextValue>;
 declare const _default: import("react").ForwardRefExoticComponent<{
     /**
      * `FormControl`의 Input 요소를 컨트롤하기 위한 ID입니다. `Label`, `Caption`과 연결짓기 위해 사용합니다.

package/dist/core/Spinner/index.d.ts

@@ -2,9 +2,21 @@ import { SVGProps } from 'react';
 type SpinnerVariantType = 'progress-gradient' | 'progress-line';
 type Props = {
     variant?: SpinnerVariantType;
+    /**
+     * 스크린 리더에 읽힐 로딩 상태 텍스트를 정의합니다.
+     * 빈 문자열(`''`)을 전달하면 장식용으로 간주되어 보조 기술에서 숨겨집니다.
+     * @default '로딩 중'
+     */
+    label?: string;
 } & Omit<SVGProps<SVGSVGElement>, 'ref'>;
 declare const Spinner: import("react").ForwardRefExoticComponent<{
     variant?: SpinnerVariantType | undefined;
+    /**
+     * 스크린 리더에 읽힐 로딩 상태 텍스트를 정의합니다.
+     * 빈 문자열(`''`)을 전달하면 장식용으로 간주되어 보조 기술에서 숨겨집니다.
+     * @default '로딩 중'
+     */
+    label?: string | undefined;
 } & Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default Spinner;
 export type { Props as SpinnerProps };

package/dist/core/StyledIcon/index.d.ts

@@ -5,12 +5,12 @@ type Props = {
      * @teamturing/icons와 함께 사용
      */
     icon: ComponentType<SVGProps<SVGSVGElement>>;
-} & Pick<ViewProps, 'size' | 'color' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className'>;
+} & Pick<ViewProps, 'size' | 'color' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'aria-label' | 'aria-hidden'>;
 declare const StyledIcon: import("react").ForwardRefExoticComponent<{
     /**
      * @teamturing/icons와 함께 사용
      */
     icon: ComponentType<SVGProps<SVGSVGElement>>;
-} & Pick<ViewProps, "color" | "size" | "sx"> & Pick<HTMLAttributes<HTMLDivElement>, "className"> & import("react").RefAttributes<HTMLDivElement>>;
+} & Pick<ViewProps, "color" | "size" | "sx"> & Pick<HTMLAttributes<HTMLDivElement>, "className" | "aria-hidden" | "aria-label"> & import("react").RefAttributes<HTMLDivElement>>;
 export default StyledIcon;
 export type { Props as StyledIconProps };

package/dist/core/Toast/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, PropsWithChildren, SVGProps } from 'react';
+import { ComponentType, HTMLAttributes, PropsWithChildren, SVGProps } from 'react';
 import { ResponsiveValue } from 'styled-system';
 type ToastVariantType = 'success' | 'warning';
 type Props = {
@@ -16,7 +16,7 @@ type Props = {
      * 반응형 디자인이 적용됩니다.
      */
     resizing?: ResponsiveValue<'hug' | 'fill'>;
-};
-declare const Toast: ({ variant, icon: Icon, resizing, children, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Toast: ({ variant, icon: Icon, resizing, children, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
 export default Toast;
 export type { Props as ToastProps };

package/dist/index.js

@@ -1916,10 +1916,10 @@ const Overlay = ({
   }, [isOpen, handleOutsideClick]);
   return isOpen ? /*#__PURE__*/jsxRuntime.jsx(BaseOverlay, {
     ref: overlayRef,
+    role: 'dialog',
     size: size,
     maxHeight: maxHeight,
     ...props,
-    role: 'dialog',
     children: children
   }) : null;
 };
@@ -2602,6 +2602,7 @@ const Spinner = /*#__PURE__*/React.forwardRef(({
   variant: propsVariant,
   width = 32,
   height = 32,
+  label = '로딩 중',
   ...props
 }, ref) => {
   const theme = styled.useTheme();
@@ -2610,10 +2611,18 @@ const Spinner = /*#__PURE__*/React.forwardRef(({
     'progress-gradient': ProgressGradientSpinner,
     'progress-line': ProgressLineSpinner
   }[variant];
+  const a11yProps = label ? {
+    'role': 'status',
+    'aria-label': label,
+    'aria-busy': true
+  } : {
+    'aria-hidden': true
+  };
   return /*#__PURE__*/jsxRuntime.jsx(SpinnerComponent, {
     ref: ref,
     width: width,
     height: height,
+    ...a11yProps,
     ...props
   });
 });
@@ -3277,25 +3286,41 @@ const BaseHorizontalDivider = /*#__PURE__*/styled__default.default.hr.withConfig
 })(["display:block;margin:0;padding:0;border:none;width:100%;", " ", ""], border, sx);
 
 const StyledIcon = /*#__PURE__*/React.forwardRef(({
-  icon: Icon,
+  'icon': Icon,
   sx,
   className,
+  'aria-label': ariaLabel,
+  'aria-hidden': ariaHidden,
   ...props
-}, ref) => /*#__PURE__*/jsxRuntime.jsx(View, {
-  ref: ref,
-  ...props,
-  className: `trk-styled_icon__wrapper ${className}`,
-  color: props.color,
-  sx: {
-    '& svg': {
-      display: 'inline-flex',
-      width: '100%',
-      height: '100%'
+}, ref) => {
+  /**
+   * 기본적으로 장식용 아이콘으로 간주해 `aria-hidden`을 부여합니다.
+   * 의미 있는 아이콘이라면 `aria-label`을 전달하세요. (`role="img"`로 노출됩니다.)
+   */
+  const a11yProps = ariaLabel ? {
+    'role': 'img',
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden
+  } : {
+    'aria-hidden': ariaHidden ?? true
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    ref: ref,
+    ...props,
+    ...a11yProps,
+    className: `trk-styled_icon__wrapper ${className}`,
+    color: props.color,
+    sx: {
+      '& svg': {
+        display: 'inline-flex',
+        width: '100%',
+        height: '100%'
+      },
+      ...sx
     },
-    ...sx
-  },
-  children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
-}));
+    children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
+  });
+});
 
 const TextInputTrailingAction = ({
   icon: Icon,
@@ -3635,7 +3660,9 @@ const SearchSelectInput = ({
         }, overlayHandler)
       })]
     }),
-    children: popperProps => /*#__PURE__*/jsxRuntime.jsxs(TextInputWrapper, {
+    children: (popperProps, {
+      isOpen
+    }) => /*#__PURE__*/jsxRuntime.jsxs(TextInputWrapper, {
       ...(disabled ? {} : {
         ...popperProps,
         onClick: e => {
@@ -3686,6 +3713,9 @@ const SearchSelectInput = ({
         }) : null, /*#__PURE__*/jsxRuntime.jsx(BaseInput, {
           id: id,
           ref: labelInputRef,
+          role: 'combobox',
+          "aria-haspopup": 'listbox',
+          "aria-expanded": isOpen,
           readOnly: true,
           onChange: utils.noop,
           autoComplete: 'off',
@@ -3973,6 +4003,7 @@ const Switch = ({
   const checkboxRef = useProvidedOrCreatedRef(ref);
   return /*#__PURE__*/jsxRuntime.jsx(BaseSwitch, {
     ref: checkboxRef,
+    role: 'switch',
     checked: checked,
     validationStatus: validationStatus,
     ...props
@@ -4140,11 +4171,11 @@ const FormControlCaption = ({
   children
 }) => {
   const {
-    id
+    captionId
   } = React.useContext(FormControlContext);
   return /*#__PURE__*/jsxRuntime.jsx(Text, {
     as: 'span',
-    id: id,
+    id: captionId,
     typography: 'xxs',
     color: 'text/neutral/subtlest',
     children: children
@@ -4155,10 +4186,11 @@ const FormControlErrorMessage = ({
   children
 }) => {
   const {
-    id
+    errorId
   } = React.useContext(FormControlContext);
   return /*#__PURE__*/jsxRuntime.jsx(StyledText$3, {
-    id: id,
+    id: errorId,
+    role: 'alert',
     typography: 'xxs',
     color: 'text/danger',
     children: children
@@ -4252,10 +4284,11 @@ const FormControlSuccessMessage = ({
   children
 }) => {
   const {
-    id
+    successId
   } = React.useContext(FormControlContext);
   return /*#__PURE__*/jsxRuntime.jsx(StyledText$2, {
-    id: id,
+    id: successId,
+    role: 'status',
     typography: 'xxs',
     color: 'text/success',
     children: children
@@ -4318,11 +4351,35 @@ const FormControl = ({
   const inputComponentCandidates = [TextInput$1, Textarea, Select$1, SearchSelectInput$1, Checkbox$1, Radio$1, Switch$1, ...additionalInputComponentCandidates];
   const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/React.isValidElement(component) && component.type === candidate));
   const isHorizontalLayoutNeeded = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Checkbox$1 || InputComponent.type === Radio$1 || InputComponent.type === Switch$1);
+  const reactId = React.useId();
+  const resolvedId = id ?? reactId;
+  const captionId = `${resolvedId}-caption`;
+  const errorId = `${resolvedId}-error`;
+  const successId = `${resolvedId}-success`;
+  const hasCaption = Boolean(relocatableComponentsObject.caption);
+  const hasError = Boolean(relocatableComponentsObject.errorMessage);
+  const hasSuccess = Boolean(relocatableComponentsObject.successMessage);
+
+  /**
+   * 소비자가 Input에 직접 전달한 aria 값을 보존하기 위해 기존 props와 병합합니다.
+   */
+  const inputProps = /*#__PURE__*/React.isValidElement(InputComponent) ? InputComponent.props : {};
+  const describedBy = [inputProps['aria-describedby'], hasCaption && captionId, hasError && errorId, hasSuccess && successId].filter(Boolean).join(' ') || undefined;
+  const inputA11yProps = {
+    'id': resolvedId,
+    disabled,
+    'aria-invalid': hasError ? true : inputProps['aria-invalid'],
+    'aria-required': required ? true : inputProps['aria-required'],
+    'aria-describedby': describedBy
+  };
   return /*#__PURE__*/jsxRuntime.jsx(FormControlContext.Provider, {
     value: {
-      id,
+      id: resolvedId,
       disabled,
-      required
+      required,
+      captionId,
+      errorId,
+      successId
     },
     children: isHorizontalLayoutNeeded ? /*#__PURE__*/jsxRuntime.jsxs(View, {
       ref: ref,
@@ -4334,10 +4391,7 @@ const FormControl = ({
       ...props,
       children: [/*#__PURE__*/jsxRuntime.jsx(View, {
         display: 'inline-flex',
-        children: /*#__PURE__*/React.cloneElement(InputComponent, {
-          id,
-          disabled
-        })
+        children: /*#__PURE__*/React.cloneElement(InputComponent, inputA11yProps)
       }), /*#__PURE__*/jsxRuntime.jsxs(View, {
         sx: {
           '& > span': {
@@ -4376,10 +4430,7 @@ const FormControl = ({
           columnGap: 1
         },
         children: [relocatableComponentsObject.label, relocatableComponentsObject.tooltipIcon]
-      }), /*#__PURE__*/React.cloneElement(InputComponent, {
-        id,
-        disabled
-      }), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
+      }), /*#__PURE__*/React.cloneElement(InputComponent, inputA11yProps), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
     })
   });
 };
@@ -5040,16 +5091,26 @@ const ClickArea = ({
   disabled,
   onClick,
   ...props
-}, ref) => /*#__PURE__*/jsxRuntime.jsx(BaseClickArea, {
-  ref: ref,
-  ...props,
-  role: 'button',
-  "aria-disabled": disabled,
-  disabled: disabled,
-  ...(!disabled ? {
-    onClick
-  } : {})
-});
+}, ref) => {
+  const handleKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      e.currentTarget.click();
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(BaseClickArea, {
+    ref: ref,
+    ...props,
+    role: 'button',
+    tabIndex: disabled ? -1 : 0,
+    "aria-disabled": disabled,
+    disabled: disabled,
+    ...(!disabled ? {
+      onClick,
+      onKeyDown: handleKeyDown
+    } : {})
+  });
+};
 const BaseClickArea = /*#__PURE__*/styled__default.default(View).withConfig({
   displayName: "ClickArea__BaseClickArea",
   componentId: "sc-1pd8ned-0"
@@ -5335,6 +5396,7 @@ const DescriptionList = ({
       children: [/*#__PURE__*/jsxRuntime.jsx(Grid$1.Unit, {
         size: titleUnitSize,
         children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+          role: 'term',
           display: 'flex',
           alignItems: 'center',
           flexWrap: 'nowrap',
@@ -5349,7 +5411,10 @@ const DescriptionList = ({
         })
       }), /*#__PURE__*/jsxRuntime.jsx(Grid$1.Unit, {
         size: descriptionUnitSize,
-        children: renderDescription(!utils.isNullable(description) ? description : '-')
+        children: /*#__PURE__*/jsxRuntime.jsx(View, {
+          role: 'definition',
+          children: renderDescription(!utils.isNullable(description) ? description : '-')
+        })
       })]
     });
   },
@@ -5370,6 +5435,13 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   loading = false,
   ...props
 }, ref) => {
+  const hasAccessibleName = Boolean(props['aria-label'] || props['aria-labelledby'] || props['title']);
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && !hasAccessibleName) {
+      // eslint-disable-next-line no-console
+      console.warn('IconButton: An icon-only button should provide an accessible name via `aria-label`, `aria-labelledby`, or `title` so that assistive technologies can identify it.');
+    }
+  }, [hasAccessibleName]);
   return /*#__PURE__*/jsxRuntime.jsx(BaseIconButton, {
     ref: ref,
     icon: Icon,
@@ -5864,6 +5936,7 @@ const Dialog = ({
                 icon: icons.CloseIcon,
                 variant: 'plain-bold',
                 size: 'm',
+                "aria-label": theme.locales?.Dialog?.closeButtonLabel ?? '닫기',
                 onClick: handleDismiss
               })
             }), /*#__PURE__*/jsxRuntime.jsx(DialogContext.Provider, {
@@ -6009,6 +6082,8 @@ const Drawer = ({
   size = 'm',
   direction = 'right',
   initialFocusRef,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   sx
 }, ref) => {
   const theme = styled.useTheme();
@@ -6033,7 +6108,8 @@ const Drawer = ({
   useFocusTrap({
     containerRef: drawerRef,
     initialFocusRef: initialFocusRef || closeButtonRef,
-    disabled: !isOpen
+    disabled: !isOpen,
+    restoreFocusOnCleanUp: true
   });
   React.useEffect(() => {
     if (isOpen && isOutsideClickDismissable) {
@@ -6116,6 +6192,8 @@ const Drawer = ({
           className: `trk-drawer--${size} trk-drawer--${direction}`,
           ref: drawerRef,
           "aria-modal": 'true',
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
           role: 'dialog',
           tabIndex: -1,
           size: size,
@@ -6134,6 +6212,7 @@ const Drawer = ({
               icon: icons.CloseIcon,
               variant: 'plain-bold',
               size: 'm',
+              "aria-label": theme.locales?.Drawer?.closeButtonLabel ?? '닫기',
               onClick: handleDismiss
             })
           }), children]
@@ -6579,9 +6658,12 @@ const Flash = ({
   return /*#__PURE__*/jsxRuntime.jsxs(BaseFlash, {
     ref: ref,
     variant: variant,
+    role: variant === 'danger' ? 'alert' : 'status',
+    "aria-live": variant === 'danger' ? 'assertive' : 'polite',
     ...props,
     children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
-      className: 'flash__leading_icon'
+      className: 'flash__leading_icon',
+      "aria-hidden": true
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: 'flash__content',
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
@@ -6686,20 +6768,30 @@ const IconToggleButton = ({
   disabled = false,
   sx,
   ...props
-}, ref) => /*#__PURE__*/jsxRuntime.jsx(BaseIconToggleButton, {
-  ref: ref,
-  icon: Icon,
-  size: size,
-  shape: shape,
-  variant: variant,
-  selected: selected,
-  type: 'button',
-  disabled: disabled,
-  $disabled: disabled,
-  sx: sx,
-  ...props,
-  children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
-});
+}, ref) => {
+  const hasAccessibleName = Boolean(props['aria-label'] || props['aria-labelledby'] || props['title']);
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && !hasAccessibleName) {
+      // eslint-disable-next-line no-console
+      console.warn('IconToggleButton: An icon-only button should provide an accessible name via `aria-label`, `aria-labelledby`, or `title` so that assistive technologies can identify it.');
+    }
+  }, [hasAccessibleName]);
+  return /*#__PURE__*/jsxRuntime.jsx(BaseIconToggleButton, {
+    ref: ref,
+    icon: Icon,
+    size: size,
+    shape: shape,
+    variant: variant,
+    selected: selected,
+    "aria-pressed": selected,
+    type: 'button',
+    disabled: disabled,
+    $disabled: disabled,
+    sx: sx,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
+  });
+};
 const BaseIconToggleButton = /*#__PURE__*/styled__default.default(UnstyledButton).withConfig({
   displayName: "IconToggleButton__BaseIconToggleButton",
   componentId: "sc-1y68w0-0"
@@ -7307,6 +7399,7 @@ const TabItem = ({
     className: 'trk-tab_item',
     type: 'button',
     role: 'tab',
+    "aria-selected": selected,
     ref: ref,
     variant: variant,
     size: size,
@@ -7587,6 +7680,7 @@ const Tab = ({
               size: 's',
               variant: 'plain-bold',
               icon: icons.ChevronLeftIcon,
+              "aria-label": theme.locales?.Tab?.scrollLeftLabel ?? '왼쪽으로 스크롤',
               onClick: handleLeftButtonClick
             })
           })]
@@ -7618,6 +7712,7 @@ const Tab = ({
               size: 's',
               variant: 'plain-bold',
               icon: icons.ChevronRightIcon,
+              "aria-label": theme.locales?.Tab?.scrollRightLabel ?? '오른쪽으로 스크롤',
               onClick: handleRightButtonClick
             })
           })]
@@ -7660,6 +7755,16 @@ const theme = {
     UploadInput: {
       placeholder: '파일을 끌어다 놓으세요',
       selectFile: '파일 선택'
+    },
+    Dialog: {
+      closeButtonLabel: '닫기'
+    },
+    Drawer: {
+      closeButtonLabel: '닫기'
+    },
+    Tab: {
+      scrollLeftLabel: '왼쪽으로 스크롤',
+      scrollRightLabel: '오른쪽으로 스크롤'
     }
   }
 };
@@ -7697,13 +7802,18 @@ const Toast = ({
   variant = 'success',
   icon: Icon = variant === 'success' ? icons.CheckInCircleIcon : icons.ExclamationPointInCircleIcon,
   resizing = 'hug',
-  children
+  children,
+  ...props
 }) => {
   return /*#__PURE__*/jsxRuntime.jsxs(BaseToast, {
     variant: variant,
     resizing: resizing,
+    role: variant === 'warning' ? 'alert' : 'status',
+    "aria-live": variant === 'warning' ? 'assertive' : 'polite',
+    ...props,
     children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
-      className: 'toast__leading_icon'
+      className: 'toast__leading_icon',
+      "aria-hidden": true
     }), children]
   });
 };

package/dist/theme/index.d.ts

@@ -330,6 +330,16 @@ declare const theme: {
             placeholder: string;
             selectFile: string;
         };
+        Dialog: {
+            closeButtonLabel: string;
+        };
+        Drawer: {
+            closeButtonLabel: string;
+        };
+        Tab: {
+            scrollLeftLabel: string;
+            scrollRightLabel: string;
+        };
     };
 };
 declare const gpaiLightTheme: {
@@ -664,6 +674,16 @@ declare const gpaiLightTheme: {
             placeholder: string;
             selectFile: string;
         };
+        Dialog: {
+            closeButtonLabel: string;
+        };
+        Drawer: {
+            closeButtonLabel: string;
+        };
+        Tab: {
+            scrollLeftLabel: string;
+            scrollRightLabel: string;
+        };
     };
 };
 declare const gpaiDarkTheme: {
@@ -998,6 +1018,16 @@ declare const gpaiDarkTheme: {
             placeholder: string;
             selectFile: string;
         };
+        Dialog: {
+            closeButtonLabel: string;
+        };
+        Drawer: {
+            closeButtonLabel: string;
+        };
+        Tab: {
+            scrollLeftLabel: string;
+            scrollRightLabel: string;
+        };
     };
 };
 export default theme;

package/esm/core/ClickArea/index.js

@@ -7,16 +7,26 @@ const ClickArea = ({
   disabled,
   onClick,
   ...props
-}, ref) => /*#__PURE__*/jsx(BaseClickArea, {
-  ref: ref,
-  ...props,
-  role: 'button',
-  "aria-disabled": disabled,
-  disabled: disabled,
-  ...(!disabled ? {
-    onClick
-  } : {})
-});
+}, ref) => {
+  const handleKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      e.currentTarget.click();
+    }
+  };
+  return /*#__PURE__*/jsx(BaseClickArea, {
+    ref: ref,
+    ...props,
+    role: 'button',
+    tabIndex: disabled ? -1 : 0,
+    "aria-disabled": disabled,
+    disabled: disabled,
+    ...(!disabled ? {
+      onClick,
+      onKeyDown: handleKeyDown
+    } : {})
+  });
+};
 const BaseClickArea = /*#__PURE__*/styled(View).withConfig({
   displayName: "ClickArea__BaseClickArea",
   componentId: "sc-1pd8ned-0"

package/esm/core/DescriptionList/index.js

@@ -40,6 +40,7 @@ const DescriptionList = ({
       children: [/*#__PURE__*/jsx(Grid.Unit, {
         size: titleUnitSize,
         children: /*#__PURE__*/jsxs(View, {
+          role: 'term',
           display: 'flex',
           alignItems: 'center',
           flexWrap: 'nowrap',
@@ -54,7 +55,10 @@ const DescriptionList = ({
         })
       }), /*#__PURE__*/jsx(Grid.Unit, {
         size: descriptionUnitSize,
-        children: renderDescription(!isNullable(description) ? description : '-')
+        children: /*#__PURE__*/jsx(View, {
+          role: 'definition',
+          children: renderDescription(!isNullable(description) ? description : '-')
+        })
       })]
     });
   },

package/esm/core/Dialog/index.js

@@ -191,6 +191,7 @@ const Dialog = ({
                 icon: CloseIcon,
                 variant: 'plain-bold',
                 size: 'm',
+                "aria-label": theme.locales?.Dialog?.closeButtonLabel ?? '닫기',
                 onClick: handleDismiss
               })
             }), /*#__PURE__*/jsx(DialogContext.Provider, {

package/esm/core/Drawer/index.js

@@ -27,6 +27,8 @@ const Drawer = ({
   size = 'm',
   direction = 'right',
   initialFocusRef,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   sx
 }, ref) => {
   const theme = useTheme();
@@ -51,7 +53,8 @@ const Drawer = ({
   useFocusTrap({
     containerRef: drawerRef,
     initialFocusRef: initialFocusRef || closeButtonRef,
-    disabled: !isOpen
+    disabled: !isOpen,
+    restoreFocusOnCleanUp: true
   });
   useEffect(() => {
     if (isOpen && isOutsideClickDismissable) {
@@ -134,6 +137,8 @@ const Drawer = ({
           className: `trk-drawer--${size} trk-drawer--${direction}`,
           ref: drawerRef,
           "aria-modal": 'true',
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
           role: 'dialog',
           tabIndex: -1,
           size: size,
@@ -152,6 +157,7 @@ const Drawer = ({
               icon: CloseIcon,
               variant: 'plain-bold',
               size: 'm',
+              "aria-label": theme.locales?.Drawer?.closeButtonLabel ?? '닫기',
               onClick: handleDismiss
             })
           }), children]

package/esm/core/Flash/index.js

@@ -20,9 +20,12 @@ const Flash = ({
   return /*#__PURE__*/jsxs(BaseFlash, {
     ref: ref,
     variant: variant,
+    role: variant === 'danger' ? 'alert' : 'status',
+    "aria-live": variant === 'danger' ? 'assertive' : 'polite',
     ...props,
     children: [/*#__PURE__*/jsx(Icon, {
-      className: 'flash__leading_icon'
+      className: 'flash__leading_icon',
+      "aria-hidden": true
     }), /*#__PURE__*/jsxs("div", {
       className: 'flash__content',
       children: [/*#__PURE__*/jsx("span", {

package/esm/core/FormControl/FormControlCaption.js

@@ -7,11 +7,11 @@ const FormControlCaption = ({
   children
 }) => {
   const {
-    id
+    captionId
   } = useContext(FormControlContext);
   return /*#__PURE__*/jsx(Text, {
     as: 'span',
-    id: id,
+    id: captionId,
     typography: 'xxs',
     color: 'text/neutral/subtlest',
     children: children

package/esm/core/FormControl/FormControlErrorMessage.js

@@ -8,10 +8,11 @@ const FormControlErrorMessage = ({
   children
 }) => {
   const {
-    id
+    errorId
   } = useContext(FormControlContext);
   return /*#__PURE__*/jsx(StyledText, {
-    id: id,
+    id: errorId,
+    role: 'alert',
     typography: 'xxs',
     color: 'text/danger',
     children: children

package/esm/core/FormControl/FormControlSuccessMessage.js

@@ -8,10 +8,11 @@ const FormControlSuccessMessage = ({
   children
 }) => {
   const {
-    id
+    successId
   } = useContext(FormControlContext);
   return /*#__PURE__*/jsx(StyledText, {
-    id: id,
+    id: successId,
+    role: 'status',
     typography: 'xxs',
     color: 'text/success',
     children: children

package/esm/core/FormControl/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, createContext, isValidElement, cloneElement } from 'react';
+import { forwardRef, createContext, isValidElement, useId, cloneElement } from 'react';
 import useRelocation from '../../hook/useRelocation.js';
 import Checkbox from '../Checkbox/index.js';
 import Radio from '../Radio/index.js';
@@ -38,11 +38,35 @@ const FormControl = ({
   const inputComponentCandidates = [TextInput, Textarea, Select, SearchSelectInput, Checkbox, Radio, Switch, ...additionalInputComponentCandidates];
   const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/isValidElement(component) && component.type === candidate));
   const isHorizontalLayoutNeeded = /*#__PURE__*/isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio || InputComponent.type === Switch);
+  const reactId = useId();
+  const resolvedId = id ?? reactId;
+  const captionId = `${resolvedId}-caption`;
+  const errorId = `${resolvedId}-error`;
+  const successId = `${resolvedId}-success`;
+  const hasCaption = Boolean(relocatableComponentsObject.caption);
+  const hasError = Boolean(relocatableComponentsObject.errorMessage);
+  const hasSuccess = Boolean(relocatableComponentsObject.successMessage);
+
+  /**
+   * 소비자가 Input에 직접 전달한 aria 값을 보존하기 위해 기존 props와 병합합니다.
+   */
+  const inputProps = /*#__PURE__*/isValidElement(InputComponent) ? InputComponent.props : {};
+  const describedBy = [inputProps['aria-describedby'], hasCaption && captionId, hasError && errorId, hasSuccess && successId].filter(Boolean).join(' ') || undefined;
+  const inputA11yProps = {
+    'id': resolvedId,
+    disabled,
+    'aria-invalid': hasError ? true : inputProps['aria-invalid'],
+    'aria-required': required ? true : inputProps['aria-required'],
+    'aria-describedby': describedBy
+  };
   return /*#__PURE__*/jsx(FormControlContext.Provider, {
     value: {
-      id,
+      id: resolvedId,
       disabled,
-      required
+      required,
+      captionId,
+      errorId,
+      successId
     },
     children: isHorizontalLayoutNeeded ? /*#__PURE__*/jsxs(View, {
       ref: ref,
@@ -54,10 +78,7 @@ const FormControl = ({
       ...props,
       children: [/*#__PURE__*/jsx(View, {
         display: 'inline-flex',
-        children: /*#__PURE__*/cloneElement(InputComponent, {
-          id,
-          disabled
-        })
+        children: /*#__PURE__*/cloneElement(InputComponent, inputA11yProps)
       }), /*#__PURE__*/jsxs(View, {
         sx: {
           '& > span': {
@@ -96,10 +117,7 @@ const FormControl = ({
           columnGap: 1
         },
         children: [relocatableComponentsObject.label, relocatableComponentsObject.tooltipIcon]
-      }), /*#__PURE__*/cloneElement(InputComponent, {
-        id,
-        disabled
-      }), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
+      }), /*#__PURE__*/cloneElement(InputComponent, inputA11yProps), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
     })
   });
 };

package/esm/core/IconButton/index.js

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import Spinner from '../Spinner/index.js';
@@ -14,6 +14,13 @@ const IconButton = /*#__PURE__*/forwardRef(({
   loading = false,
   ...props
 }, ref) => {
+  const hasAccessibleName = Boolean(props['aria-label'] || props['aria-labelledby'] || props['title']);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && !hasAccessibleName) {
+      // eslint-disable-next-line no-console
+      console.warn('IconButton: An icon-only button should provide an accessible name via `aria-label`, `aria-labelledby`, or `title` so that assistive technologies can identify it.');
+    }
+  }, [hasAccessibleName]);
   return /*#__PURE__*/jsx(BaseIconButton, {
     ref: ref,
     icon: Icon,

package/esm/core/IconToggleButton/index.js

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
@@ -15,20 +15,30 @@ const IconToggleButton = ({
   disabled = false,
   sx,
   ...props
-}, ref) => /*#__PURE__*/jsx(BaseIconToggleButton, {
-  ref: ref,
-  icon: Icon,
-  size: size,
-  shape: shape,
-  variant: variant,
-  selected: selected,
-  type: 'button',
-  disabled: disabled,
-  $disabled: disabled,
-  sx: sx,
-  ...props,
-  children: /*#__PURE__*/jsx(Icon, {})
-});
+}, ref) => {
+  const hasAccessibleName = Boolean(props['aria-label'] || props['aria-labelledby'] || props['title']);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && !hasAccessibleName) {
+      // eslint-disable-next-line no-console
+      console.warn('IconToggleButton: An icon-only button should provide an accessible name via `aria-label`, `aria-labelledby`, or `title` so that assistive technologies can identify it.');
+    }
+  }, [hasAccessibleName]);
+  return /*#__PURE__*/jsx(BaseIconToggleButton, {
+    ref: ref,
+    icon: Icon,
+    size: size,
+    shape: shape,
+    variant: variant,
+    selected: selected,
+    "aria-pressed": selected,
+    type: 'button',
+    disabled: disabled,
+    $disabled: disabled,
+    sx: sx,
+    ...props,
+    children: /*#__PURE__*/jsx(Icon, {})
+  });
+};
 const BaseIconToggleButton = /*#__PURE__*/styled(UnstyledButton).withConfig({
   displayName: "IconToggleButton__BaseIconToggleButton",
   componentId: "sc-1y68w0-0"

package/esm/core/Overlay/index.js

@@ -71,10 +71,10 @@ const Overlay = ({
   }, [isOpen, handleOutsideClick]);
   return isOpen ? /*#__PURE__*/jsx(BaseOverlay, {
     ref: overlayRef,
+    role: 'dialog',
     size: size,
     maxHeight: maxHeight,
     ...props,
-    role: 'dialog',
     children: children
   }) : null;
 };

package/esm/core/SearchSelectInput/index.js

@@ -163,7 +163,9 @@ const SearchSelectInput = ({
         }, overlayHandler)
       })]
     }),
-    children: popperProps => /*#__PURE__*/jsxs(TextInputWrapper, {
+    children: (popperProps, {
+      isOpen
+    }) => /*#__PURE__*/jsxs(TextInputWrapper, {
       ...(disabled ? {} : {
         ...popperProps,
         onClick: e => {
@@ -214,6 +216,9 @@ const SearchSelectInput = ({
         }) : null, /*#__PURE__*/jsx(BaseInput, {
           id: id,
           ref: labelInputRef,
+          role: 'combobox',
+          "aria-haspopup": 'listbox',
+          "aria-expanded": isOpen,
           readOnly: true,
           onChange: noop,
           autoComplete: 'off',

package/esm/core/Spinner/index.js

@@ -27,6 +27,7 @@ const Spinner = /*#__PURE__*/forwardRef(({
   variant: propsVariant,
   width = 32,
   height = 32,
+  label = '로딩 중',
   ...props
 }, ref) => {
   const theme = useTheme();
@@ -35,10 +36,18 @@ const Spinner = /*#__PURE__*/forwardRef(({
     'progress-gradient': ProgressGradientSpinner,
     'progress-line': ProgressLineSpinner
   }[variant];
+  const a11yProps = label ? {
+    'role': 'status',
+    'aria-label': label,
+    'aria-busy': true
+  } : {
+    'aria-hidden': true
+  };
   return /*#__PURE__*/jsx(SpinnerComponent, {
     ref: ref,
     width: width,
     height: height,
+    ...a11yProps,
     ...props
   });
 });

package/esm/core/StyledIcon/index.js

@@ -3,24 +3,40 @@ import View from '../View/index.js';
 import { jsx } from 'react/jsx-runtime';
 
 const StyledIcon = /*#__PURE__*/forwardRef(({
-  icon: Icon,
+  'icon': Icon,
   sx,
   className,
+  'aria-label': ariaLabel,
+  'aria-hidden': ariaHidden,
   ...props
-}, ref) => /*#__PURE__*/jsx(View, {
-  ref: ref,
-  ...props,
-  className: `trk-styled_icon__wrapper ${className}`,
-  color: props.color,
-  sx: {
-    '& svg': {
-      display: 'inline-flex',
-      width: '100%',
-      height: '100%'
+}, ref) => {
+  /**
+   * 기본적으로 장식용 아이콘으로 간주해 `aria-hidden`을 부여합니다.
+   * 의미 있는 아이콘이라면 `aria-label`을 전달하세요. (`role="img"`로 노출됩니다.)
+   */
+  const a11yProps = ariaLabel ? {
+    'role': 'img',
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden
+  } : {
+    'aria-hidden': ariaHidden ?? true
+  };
+  return /*#__PURE__*/jsx(View, {
+    ref: ref,
+    ...props,
+    ...a11yProps,
+    className: `trk-styled_icon__wrapper ${className}`,
+    color: props.color,
+    sx: {
+      '& svg': {
+        display: 'inline-flex',
+        width: '100%',
+        height: '100%'
+      },
+      ...sx
     },
-    ...sx
-  },
-  children: /*#__PURE__*/jsx(Icon, {})
-}));
+    children: /*#__PURE__*/jsx(Icon, {})
+  });
+});
 
 export { StyledIcon as default };

package/esm/core/Switch/index.js

@@ -13,6 +13,7 @@ const Switch = ({
   const checkboxRef = useProvidedOrCreatedRef(ref);
   return /*#__PURE__*/jsx(BaseSwitch, {
     ref: checkboxRef,
+    role: 'switch',
     checked: checked,
     validationStatus: validationStatus,
     ...props

package/esm/core/Tab/TabItem.js

@@ -41,6 +41,7 @@ const TabItem = ({
     className: 'trk-tab_item',
     type: 'button',
     role: 'tab',
+    "aria-selected": selected,
     ref: ref,
     variant: variant,
     size: size,

package/esm/core/Tab/index.js

@@ -108,6 +108,7 @@ const Tab = ({
               size: 's',
               variant: 'plain-bold',
               icon: ChevronLeftIcon,
+              "aria-label": theme.locales?.Tab?.scrollLeftLabel ?? '왼쪽으로 스크롤',
               onClick: handleLeftButtonClick
             })
           })]
@@ -139,6 +140,7 @@ const Tab = ({
               size: 's',
               variant: 'plain-bold',
               icon: ChevronRightIcon,
+              "aria-label": theme.locales?.Tab?.scrollRightLabel ?? '오른쪽으로 스크롤',
               onClick: handleRightButtonClick
             })
           })]

package/esm/core/Toast/index.js

@@ -8,13 +8,18 @@ const Toast = ({
   variant = 'success',
   icon: Icon = variant === 'success' ? CheckInCircleIcon : ExclamationPointInCircleIcon,
   resizing = 'hug',
-  children
+  children,
+  ...props
 }) => {
   return /*#__PURE__*/jsxs(BaseToast, {
     variant: variant,
     resizing: resizing,
+    role: variant === 'warning' ? 'alert' : 'status',
+    "aria-live": variant === 'warning' ? 'assertive' : 'polite',
+    ...props,
     children: [/*#__PURE__*/jsx(Icon, {
-      className: 'toast__leading_icon'
+      className: 'toast__leading_icon',
+      "aria-hidden": true
     }), children]
   });
 };

package/esm/theme/index.js

@@ -30,6 +30,16 @@ const theme = {
     UploadInput: {
       placeholder: '파일을 끌어다 놓으세요',
       selectFile: '파일 선택'
+    },
+    Dialog: {
+      closeButtonLabel: '닫기'
+    },
+    Drawer: {
+      closeButtonLabel: '닫기'
+    },
+    Tab: {
+      scrollLeftLabel: '왼쪽으로 스크롤',
+      scrollRightLabel: '오른쪽으로 스크롤'
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.75.0",
+  "version": "2.76.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -65,5 +65,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "dfe41b5bceb6209a01bc7fe08d2cb52ac8447a4e"
+  "gitHead": "786f4e6ff9bd2f7324b536c7872cf06eb4b0b3b6"
 }