@teamturing/react-kit 2.74.0 → 2.76.0

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"
@@ -5103,8 +5164,10 @@ const BaseCounterBadge = /*#__PURE__*/styled__default.default.span.withConfig({
 }), sx);
 
 const DatagridBody = ({
+  role,
   ...props
 }) => /*#__PURE__*/jsxRuntime.jsx(BaseDatagridBody, {
+  role: role ?? 'rowgroup',
   ...props
 });
 const BaseDatagridBody = /*#__PURE__*/styled__default.default.div.withConfig({
@@ -5116,8 +5179,11 @@ const BaseDatagridBody = /*#__PURE__*/styled__default.default.div.withConfig({
 
 const DatagridCell = ({
   children,
+  columnHeader = false,
+  role,
   ...props
 }) => /*#__PURE__*/jsxRuntime.jsx(BaseDatagridCell, {
+  role: role ?? (columnHeader ? 'columnheader' : 'cell'),
   ...props,
   children: children
 });
@@ -5154,21 +5220,69 @@ const DatagridRow = ({
   gapX = 2,
   alignItems,
   justifyContent,
+  columnHeader = false,
+  role,
   children,
   ...props
-}) => /*#__PURE__*/jsxRuntime.jsx(DatagridRowWrapper, {
+}) =>
+/*#__PURE__*/
+// 외부 wrapper가 `rowgroup`의 직접 자식이 되도록 여기에 role="row"를 부여하고,
+// 셀을 직접 감싸는 내부 Grid는 presentation 처리하여 row가 cell을 직접 소유하도록 한다.
+jsxRuntime.jsx(DatagridRowWrapper, {
+  role: role ?? 'row',
   ...props,
   children: /*#__PURE__*/jsxRuntime.jsx(BaseDatagridRow, {
+    role: 'presentation',
     wrap: false,
     gapX: gapX,
     alignItems: alignItems,
     justifyContent: justifyContent,
-    children: children
+    children: columnHeader ? React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+      columnHeader: child.props.columnHeader ?? true
+    }) : child) : children
   })
 });
 const BaseDatagridRow = Grid$1;
 const DatagridRowWrapper = Space;
 
+const ItemList = ({
+  items,
+  renderItem,
+  renderItemWrapper = children => children,
+  emptyState = null
+}) => {
+  if (items.length === 0) return emptyState;
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: items.map((item, i) => renderItemWrapper(renderItem(item, i), item, i))
+  });
+};
+
+const DatagridRowList = ({
+  rows,
+  columns,
+  rowProps = {
+    alignItems: 'center'
+  },
+  renderItemWrapper,
+  emptyState,
+  columnsTransformer = columns => columns
+}) => /*#__PURE__*/jsxRuntime.jsx(ItemList, {
+  items: rows,
+  renderItem: (row, i) => /*#__PURE__*/jsxRuntime.jsx(DatagridRow, {
+    ...rowProps,
+    children: columnsTransformer(columns).filter(column => !utils.isNullable(column)).map(({
+      field,
+      renderValue,
+      size
+    }) => /*#__PURE__*/jsxRuntime.jsx(DatagridCell, {
+      size: size,
+      children: renderValue(row, i)
+    }, field))
+  }, row.id),
+  renderItemWrapper: renderItemWrapper,
+  emptyState: emptyState
+});
+
 const DatagridSubheader = ({
   ...props
 }) => /*#__PURE__*/jsxRuntime.jsx(DataGridSubheaderWrapper, {
@@ -5188,6 +5302,9 @@ const DataGridSubheaderWrapper = /*#__PURE__*/styled__default.default.div.withCo
 const Datagrid = ({
   children,
   sx,
+  role = 'table',
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   ...props
 }) => {
   const [relocatableComponentsObject, restConmponents] = useRelocation({
@@ -5197,9 +5314,28 @@ const Datagrid = ({
       subHeader: DatagridSubheader
     }
   });
+
+  // Header가 있고 별도 라벨이 지정되지 않은 경우, Header를 표의 접근 가능한 이름으로 연결한다.
+  const generatedHeaderId = React.useId();
+  const {
+    header: rawHeader,
+    subHeader
+  } = relocatableComponentsObject;
+  let headerNode = rawHeader;
+  let resolvedLabelledby = ariaLabelledby;
+  if (!ariaLabel && !ariaLabelledby && /*#__PURE__*/React.isValidElement(rawHeader)) {
+    const headerId = rawHeader.props.id ?? generatedHeaderId;
+    headerNode = /*#__PURE__*/React.cloneElement(rawHeader, {
+      id: headerId
+    });
+    resolvedLabelledby = headerId;
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(DatagridWrapper, {
     sx: sx,
-    children: [relocatableComponentsObject.header, relocatableComponentsObject.subHeader, /*#__PURE__*/jsxRuntime.jsx(BaseDatagrid, {
+    children: [headerNode, subHeader, /*#__PURE__*/jsxRuntime.jsx(BaseDatagrid, {
+      role: role,
+      "aria-label": ariaLabel,
+      "aria-labelledby": resolvedLabelledby,
       ...props,
       children: restConmponents
     })]
@@ -5222,21 +5358,10 @@ var index$9 = Object.assign(Datagrid, {
   Subheader: DatagridSubheader,
   Body: DatagridBody,
   Row: DatagridRow,
+  RowList: DatagridRowList,
   Cell: DatagridCell
 });
 
-const ItemList = ({
-  items,
-  renderItem,
-  renderItemWrapper = children => children,
-  emptyState = null
-}) => {
-  if (items.length === 0) return emptyState;
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: items.map((item, i) => renderItemWrapper(renderItem(item, i), item, i))
-  });
-};
-
 const DescriptionList = ({
   item,
   itemDescriptions,
@@ -5271,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',
@@ -5285,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 : '-')
+        })
       })]
     });
   },
@@ -5306,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,
@@ -5800,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, {
@@ -5945,6 +6082,8 @@ const Drawer = ({
   size = 'm',
   direction = 'right',
   initialFocusRef,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   sx
 }, ref) => {
   const theme = styled.useTheme();
@@ -5969,7 +6108,8 @@ const Drawer = ({
   useFocusTrap({
     containerRef: drawerRef,
     initialFocusRef: initialFocusRef || closeButtonRef,
-    disabled: !isOpen
+    disabled: !isOpen,
+    restoreFocusOnCleanUp: true
   });
   React.useEffect(() => {
     if (isOpen && isOutsideClickDismissable) {
@@ -6052,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,
@@ -6070,6 +6212,7 @@ const Drawer = ({
               icon: icons.CloseIcon,
               variant: 'plain-bold',
               size: 'm',
+              "aria-label": theme.locales?.Drawer?.closeButtonLabel ?? '닫기',
               onClick: handleDismiss
             })
           }), children]
@@ -6515,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", {
@@ -6622,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"
@@ -7243,6 +7399,7 @@ const TabItem = ({
     className: 'trk-tab_item',
     type: 'button',
     role: 'tab',
+    "aria-selected": selected,
     ref: ref,
     variant: variant,
     size: size,
@@ -7523,6 +7680,7 @@ const Tab = ({
               size: 's',
               variant: 'plain-bold',
               icon: icons.ChevronLeftIcon,
+              "aria-label": theme.locales?.Tab?.scrollLeftLabel ?? '왼쪽으로 스크롤',
               onClick: handleLeftButtonClick
             })
           })]
@@ -7554,6 +7712,7 @@ const Tab = ({
               size: 's',
               variant: 'plain-bold',
               icon: icons.ChevronRightIcon,
+              "aria-label": theme.locales?.Tab?.scrollRightLabel ?? '오른쪽으로 스크롤',
               onClick: handleRightButtonClick
             })
           })]
@@ -7596,6 +7755,16 @@ const theme = {
     UploadInput: {
       placeholder: '파일을 끌어다 놓으세요',
       selectFile: '파일 선택'
+    },
+    Dialog: {
+      closeButtonLabel: '닫기'
+    },
+    Drawer: {
+      closeButtonLabel: '닫기'
+    },
+    Tab: {
+      scrollLeftLabel: '왼쪽으로 스크롤',
+      scrollRightLabel: '오른쪽으로 스크롤'
     }
   }
 };
@@ -7633,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"