@teamturing/react-kit 2.74.0 → 2.76.0

package/esm/core/Datagrid/DatagridBody.js

@@ -4,8 +4,10 @@ import { sx } from '../../utils/styled-system/index.js';
 import { jsx } from 'react/jsx-runtime';
 
 const DatagridBody = ({
+  role,
   ...props
 }) => /*#__PURE__*/jsx(BaseDatagridBody, {
+  role: role ?? 'rowgroup',
   ...props
 });
 const BaseDatagridBody = /*#__PURE__*/styled.div.withConfig({

package/esm/core/Datagrid/DatagridCell.js

@@ -3,8 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 
 const DatagridCell = ({
   children,
+  columnHeader = false,
+  role,
   ...props
 }) => /*#__PURE__*/jsx(BaseDatagridCell, {
+  role: role ?? (columnHeader ? 'columnheader' : 'cell'),
   ...props,
   children: children
 });

package/esm/core/Datagrid/DatagridRow.js

@@ -1,3 +1,4 @@
+import { Children, isValidElement, cloneElement } from 'react';
 import Grid from '../Grid/index.js';
 import Space from '../Space/index.js';
 import { jsx } from 'react/jsx-runtime';
@@ -6,16 +7,26 @@ const DatagridRow = ({
   gapX = 2,
   alignItems,
   justifyContent,
+  columnHeader = false,
+  role,
   children,
   ...props
-}) => /*#__PURE__*/jsx(DatagridRowWrapper, {
+}) =>
+/*#__PURE__*/
+// 외부 wrapper가 `rowgroup`의 직접 자식이 되도록 여기에 role="row"를 부여하고,
+// 셀을 직접 감싸는 내부 Grid는 presentation 처리하여 row가 cell을 직접 소유하도록 한다.
+jsx(DatagridRowWrapper, {
+  role: role ?? 'row',
   ...props,
   children: /*#__PURE__*/jsx(BaseDatagridRow, {
+    role: 'presentation',
     wrap: false,
     gapX: gapX,
     alignItems: alignItems,
     justifyContent: justifyContent,
-    children: children
+    children: columnHeader ? Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+      columnHeader: child.props.columnHeader ?? true
+    }) : child) : children
   })
 });
 const BaseDatagridRow = Grid;

package/esm/core/Datagrid/DatagridRowList.js

@@ -0,0 +1,33 @@
+import { isNullable } from '@teamturing/utils';
+import ItemList from '../ItemList/index.js';
+import DatagridCell from './DatagridCell.js';
+import DatagridRow from './DatagridRow.js';
+import { jsx } from 'react/jsx-runtime';
+
+const DatagridRowList = ({
+  rows,
+  columns,
+  rowProps = {
+    alignItems: 'center'
+  },
+  renderItemWrapper,
+  emptyState,
+  columnsTransformer = columns => columns
+}) => /*#__PURE__*/jsx(ItemList, {
+  items: rows,
+  renderItem: (row, i) => /*#__PURE__*/jsx(DatagridRow, {
+    ...rowProps,
+    children: columnsTransformer(columns).filter(column => !isNullable(column)).map(({
+      field,
+      renderValue,
+      size
+    }) => /*#__PURE__*/jsx(DatagridCell, {
+      size: size,
+      children: renderValue(row, i)
+    }, field))
+  }, row.id),
+  renderItemWrapper: renderItemWrapper,
+  emptyState: emptyState
+});
+
+export { DatagridRowList as default };

package/esm/core/Datagrid/index.js

@@ -1,4 +1,5 @@
 import { forcePixelValue } from '@teamturing/utils';
+import { useId, isValidElement, cloneElement } from 'react';
 import styled from 'styled-components';
 import useRelocation from '../../hook/useRelocation.js';
 import { sx } from '../../utils/styled-system/index.js';
@@ -6,12 +7,16 @@ import DatagridBody from './DatagridBody.js';
 import DatagridCell from './DatagridCell.js';
 import DatagridHeader from './DatagridHeader.js';
 import DatagridRow from './DatagridRow.js';
+import DatagridRowList from './DatagridRowList.js';
 import DatagridSubheader from './DatagridSubheader.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const Datagrid = ({
   children,
   sx,
+  role = 'table',
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   ...props
 }) => {
   const [relocatableComponentsObject, restConmponents] = useRelocation({
@@ -21,9 +26,28 @@ const Datagrid = ({
       subHeader: DatagridSubheader
     }
   });
+
+  // Header가 있고 별도 라벨이 지정되지 않은 경우, Header를 표의 접근 가능한 이름으로 연결한다.
+  const generatedHeaderId = useId();
+  const {
+    header: rawHeader,
+    subHeader
+  } = relocatableComponentsObject;
+  let headerNode = rawHeader;
+  let resolvedLabelledby = ariaLabelledby;
+  if (!ariaLabel && !ariaLabelledby && /*#__PURE__*/isValidElement(rawHeader)) {
+    const headerId = rawHeader.props.id ?? generatedHeaderId;
+    headerNode = /*#__PURE__*/cloneElement(rawHeader, {
+      id: headerId
+    });
+    resolvedLabelledby = headerId;
+  }
   return /*#__PURE__*/jsxs(DatagridWrapper, {
     sx: sx,
-    children: [relocatableComponentsObject.header, relocatableComponentsObject.subHeader, /*#__PURE__*/jsx(BaseDatagrid, {
+    children: [headerNode, subHeader, /*#__PURE__*/jsx(BaseDatagrid, {
+      role: role,
+      "aria-label": ariaLabel,
+      "aria-labelledby": resolvedLabelledby,
       ...props,
       children: restConmponents
     })]
@@ -46,6 +70,7 @@ var index = Object.assign(Datagrid, {
   Subheader: DatagridSubheader,
   Body: DatagridBody,
   Row: DatagridRow,
+  RowList: DatagridRowList,
   Cell: DatagridCell
 });
 

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.74.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": "b096bdb9ffa2f75b160b773e60a1a2130989ff3c"
+  "gitHead": "786f4e6ff9bd2f7324b536c7872cf06eb4b0b3b6"
 }