@douyinfe/semi-ui 2.2.2 → 2.3.0-beta.0

package/checkbox/checkboxGroup.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { checkboxGroupClasses as css, strings } from '@douyinfe/semi-foundation/checkbox/constants';
-import CheckboxGroupFoudation, { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/checkbox/checkboxGroupFoundation';
+import CheckboxGroupFoundation, { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/checkbox/checkboxGroupFoundation';
 import BaseComponent from '../_base/baseComponent';
 import { Context } from './context';
 import { isEqual } from 'lodash';
@@ -13,6 +13,11 @@ export type CheckboxDirection = 'horizontal' | 'vertical';
 export type CheckboxType = 'default' | 'card' | 'pureCard';
 
 export type CheckboxGroupProps = {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     defaultValue?: any[];
     disabled?: boolean;
     name?: string;
@@ -26,6 +31,7 @@ export type CheckboxGroupProps = {
     className?: string;
     type?: CheckboxType;
     id?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 };
 
 export type CheckboxGroupState = {
@@ -34,6 +40,11 @@ export type CheckboxGroupState = {
 class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState> {
 
     static propTypes = {
+        'aria-describedby': PropTypes.string,
+        'aria-errormessage': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-labelledby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         defaultValue: PropTypes.array,
         disabled: PropTypes.bool,
         name: PropTypes.string,
@@ -69,12 +80,13 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
         };
     }
 
+    foundation: CheckboxGroupFoundation;
     constructor(props: CheckboxGroupProps) {
         super(props);
         this.state = {
             value: props.value || props.defaultValue,
         };
-        this.foundation = new CheckboxGroupFoudation(this.adapter);
+        this.foundation = new CheckboxGroupFoundation(this.adapter);
         this.onChange = this.onChange.bind(this);
     }
 
@@ -97,7 +109,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
     }
 
     render() {
-        const { children, options, prefixCls, direction, className, id, style, type } = this.props;
+        const { children, options, prefixCls, direction, className, id, style, type, disabled } = this.props;
 
         const isPureCardType = type === strings.TYPE_PURECARD;
         const isCardType = type === strings.TYPE_CARD || isPureCardType;
@@ -119,6 +131,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
                 if (typeof option === 'string') {
                     return (
                         <Checkbox
+                            role="listitem"
                             key={index}
                             disabled={this.props.disabled}
                             value={option}
@@ -130,6 +143,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
                 } else {
                     return (
                         <Checkbox
+                            role="listitem"
                             key={index}
                             disabled={option.disabled || this.props.disabled}
                             value={option.value}
@@ -145,11 +159,22 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
                 }
             });
         } else if (children) {
-            inner = (React.Children.toArray(children) as React.ReactElement[]).map((itm, index) => React.cloneElement(itm, { key: index }));
+            inner = (React.Children.toArray(children) as React.ReactElement[]).map((itm, index) => React.cloneElement(itm, { key: index, role: 'listitem' }));
         }
 
         return (
-            <div className={prefixClsDisplay} style={style} id={id}>
+            <div
+                id={id}
+                role="list"
+                aria-label={this.props['aria-label']}
+                className={prefixClsDisplay} 
+                style={style}
+                aria-labelledby={this.props['aria-labelledby']}
+                aria-describedby={this.props['aria-describedby']}
+                // aria-errormessage={this.props['aria-errormessage']}
+                // aria-invalid={this.props['aria-invalid']}
+                // aria-required={this.props['aria-required']}
+            >
                 <Context.Provider
                     value={{
                         checkboxGroup: {

package/checkbox/checkboxInner.tsx

@@ -8,6 +8,11 @@ import { Context } from './context';
 import { IconCheckboxTick, IconCheckboxIndeterminate } from '@douyinfe/semi-icons';
 
 export interface CheckboxInnerProps {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     indeterminate?: boolean;
     checked?: boolean;
     disabled?: boolean;
@@ -15,12 +20,20 @@ export interface CheckboxInnerProps {
     name?: string;
     isPureCardType?: boolean;
     ref?: React.MutableRefObject<CheckboxInner> | ((ref: CheckboxInner) => void);
+    addonId?: string;
+    extraId?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
 class CheckboxInner extends PureComponent<CheckboxInnerProps> {
     static contextType = Context;
 
     static propTypes = {
+        'aria-describedby': PropTypes.string,
+        'aria-errormessage': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-labelledby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         checked: PropTypes.bool,
         disabled: PropTypes.bool,
         onChange: PropTypes.func,
@@ -28,6 +41,8 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         grouped: PropTypes.bool,
         value: PropTypes.any,
         isPureCardType: PropTypes.bool,
+        addonId: PropTypes.string,
+        extraId: PropTypes.string,
     };
 
     static defaultProps = {
@@ -44,7 +59,7 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
     }
 
     render() {
-        const { indeterminate, checked, disabled, prefixCls, name, isPureCardType } = this.props;
+        const { indeterminate, checked, disabled, prefixCls, name, isPureCardType, addonId, extraId } = this.props;
         const prefix = prefixCls || css.PREFIX;
 
         const wrapper = classnames(
@@ -69,10 +84,18 @@ class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         return (
             <span className={wrapper}>
                 <input
+                    type="checkbox"
+                    aria-label={this.props['aria-label']}
+                    aria-disabled={disabled}
+                    aria-checked={checked}
+                    aria-labelledby={addonId}
+                    aria-describedby={extraId || this.props['aria-describedby']}
+                    aria-invalid={this.props['aria-invalid']}
+                    aria-errormessage={this.props['aria-errormessage']}
+                    aria-required={this.props['aria-required']}
                     ref={ref => {
                         this.inputEntity = ref;
                     }}
-                    type="checkbox"
                     className={css.INPUT}
                     onChange={noop}
                     checked={checked}

package/collapse/index.tsx

@@ -97,7 +97,7 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
         const clsPrefix = cls(cssClasses.PREFIX, className);
         const { activeSet } = this.state;
         return (
-            <div className={clsPrefix} style={style}>
+            <div className={clsPrefix} style={style} aria-label={`Collapse`}>
                 <CollapseContext.Provider
                     value={{
                         activeSet,
@@ -116,4 +116,4 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
     }
 }
 
-export default Collapse;
+export default Collapse;

package/collapse/item.tsx

@@ -1,12 +1,13 @@
-import React, { PureComponent, ReactNode, CSSProperties } from 'react';
+import React, { CSSProperties, PureComponent, ReactNode } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/collapse/constants';
 import Collapsible from '../collapsible';
 import CollapseContext, { CollapseContextType } from './collapse-context';
 import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 
-export interface CollapsePanelProps{
+export interface CollapsePanelProps {
     itemKey: string;
     extra?: ReactNode;
     header?: ReactNode;
@@ -32,6 +33,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         ]),
     };
 
+    private ariaID = getUuidShort({});
+
     renderHeader(active: boolean, expandIconEnable = true) {
         const {
             header,
@@ -43,13 +46,13 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         } = this.context;
         const { expandIconPosition } = this.context;
         if (typeof expandIcon === 'undefined') {
-            expandIcon = (<IconChevronDown />);
+            expandIcon = (<IconChevronDown/>);
         }
         if (typeof collapseIcon === 'undefined') {
-            collapseIcon = (<IconChevronUp />);
+            collapseIcon = (<IconChevronUp/>);
         }
         const icon = (
-            <span className={cls([`${cssClasses.PREFIX}-header-icon`,
+            <span aria-hidden='true' className={cls([`${cssClasses.PREFIX}-header-icon`,
                 { [`${cssClasses.PREFIX}-header-iconDisabled`]: !expandIconEnable }])}>
                 {/* eslint-disable-next-line no-nested-ternary */}
                 {expandIconEnable ? (active ? collapseIcon : expandIcon) : expandIcon}
@@ -62,7 +65,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                     {iconPosLeft ? icon : null}
                     <span>{header}</span>
                     <span className={`${cssClasses.PREFIX}-header-right`}>
-                        <span>{extra}</span>
+                        <span aria-label={'Extra of collapse header'}>{extra}</span>
                         {iconPosLeft ? null : icon}
                     </span>
                 </>
@@ -105,7 +108,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         });
         return (
             <div
-                role="Collapse-panel"
+                aria-label={'Collapse panel'}
                 className={itemCls}
                 {...restProps}
             >
@@ -114,6 +117,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                     tabIndex={0}
                     className={headerCls}
                     aria-expanded={active ? 'true' : 'false'}
+                    aria-owns={this.ariaID}
                     onClick={e => onClick(itemKey, e)}
                 >
                     {this.renderHeader(active, children !== undefined)}
@@ -125,6 +129,9 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                             reCalcKey={reCalcKey}>
                             <div
                                 className={contentCls}
+                                aria-label={'Collapse content'}
+                                aria-hidden={!active}
+                                id={this.ariaID}
                             >
                                 <div className={`${cssClasses.PREFIX}-content-wrapper`}>
                                     {children}
@@ -136,4 +143,4 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             </div>
         );
     }
-}
+}

package/collapsible/index.tsx

@@ -19,6 +19,7 @@ export interface CollapsibleProps {
     style?: React.CSSProperties;
     collapseHeight?: number;
     reCalcKey?: number | string;
+    id?:string,
 }
 
 
@@ -32,7 +33,8 @@ const Collapsible = (props: CollapsibleProps) => {
         collapseHeight,
         style,
         className,
-        reCalcKey
+        reCalcKey,
+        id
     } = props;
 
     const ref = useRef(null);
@@ -90,7 +92,7 @@ const Collapsible = (props: CollapsibleProps) => {
         const wrapperCls = cls(`${cssClasses.PREFIX}-wrapper`, className);
         return (
             <div style={wrapperstyle} className={wrapperCls} ref={ref}>
-                <div ref={setHeight} style={{overflow:'hidden'}}>{children}</div>
+                <div ref={setHeight} style={{ overflow: 'hidden' }} id={id}>{children}</div>
             </div>
         );
     };

package/configProvider/_story/configProvider.stories.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { ButtonGroup, Button, ConfigProvider } from '@douyinfe/semi-ui';
+
+export default function RTLWrapper({ children, onDirectionChange }: { children: React.ReactNode; onDirectionChange?: (direction: 'ltr' | 'rtl') => void }) {
+    const [direction, setDirection] = useState();
+    const handleDirectionChange = dir => {
+        setDirection(dir);
+        
+        if (typeof onDirectionChange === 'function') {
+            onDirectionChange(dir);
+        }
+    };
+
+    return (
+        <>
+            <div style={{ marginBottom: 20 }}>
+                <ButtonGroup>
+                    <Button onClick={() => handleDirectionChange('ltr')}>LTR</Button>
+                    <Button onClick={() => handleDirectionChange('rtl')}>RTL</Button>
+                </ButtonGroup>
+            </div>
+            <ConfigProvider direction={direction}>
+                {children}
+            </ConfigProvider>
+        </>
+    );
+}

package/datePicker/datePicker.tsx

@@ -21,9 +21,15 @@ import { RangeType } from '@douyinfe/semi-foundation/datePicker/inputFoundation'
 import { TimePickerProps } from '../timePicker/TimePicker';
 
 export interface DatePickerProps extends DatePickerFoundationProps {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     timePickerOpts?: TimePickerProps;
     bottomSlot?: React.ReactNode;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     prefix?: React.ReactNode;
     topSlot?: React.ReactNode;
     renderDate?: (dayNumber?: number, fullDate?: string) => React.ReactNode;
@@ -42,6 +48,11 @@ export type DatePickerState = DatePickerFoundationState;
 export default class DatePicker extends BaseComponent<DatePickerProps, DatePickerState> {
     static contextType = ConfigContext;
     static propTypes = {
+        'aria-describedby': PropTypes.string,
+        'aria-errormessage': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-labelledby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         type: PropTypes.oneOf(strings.TYPE_SET),
         size: PropTypes.oneOf(strings.SIZE_SET),
         density: PropTypes.oneOf(strings.DENSITY_SET),
@@ -76,6 +87,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         prefixCls: PropTypes.string,
         prefix: PropTypes.node,
         insetLabel: PropTypes.node,
+        insetLabelId: PropTypes.string,
         zIndex: PropTypes.number,
         position: PropTypes.oneOf(popoverStrings.POSITION_SET),
         getPopupContainer: PropTypes.func,
@@ -452,6 +464,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             disabled,
             showClear,
             insetLabel,
+            insetLabelId,
             placeholder,
             validateStatus,
             inputStyle,
@@ -488,6 +501,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             inputStyle,
             showClear,
             insetLabel,
+            insetLabelId,
             type,
             format,
             multiple,
@@ -642,6 +656,11 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             style,
             className: classnames(className, { [prefixCls]: true }),
             ref: this.setTriggerRef,
+            'aria-invalid': this.props['aria-invalid'],
+            'aria-errormessage': this.props['aria-errormessage'],
+            'aria-labelledby': this.props['aria-labelledby'],
+            'aria-describedby': this.props['aria-describedby'],
+            'aria-required': this.props['aria-required'],
         };
 
         const inner = this.renderInner();

package/dist/css/semi.css

@@ -13919,7 +13919,13 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio .semi-radio-inner-buttonRadio,
 .semi-radio .semi-radio-inner-pureCardRadio {
-  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0;
 }
 .semi-radio-disabled, .semi-radio-disabled:hover {
   cursor: not-allowed;
@@ -15059,6 +15065,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-slider-handle-clicked {
   border: solid 1px var(--semi-color-focus-border);
+  cursor: grabbing;
 }
 .semi-slider-track {
   height: 4px;
@@ -18246,8 +18253,6 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: inherit;
 }
 .semi-transfer-item .semi-transfer-item-close-icon {
-  width: 12px;
-  height: 12px;
   font-size: 12px;
   cursor: pointer;
   visibility: hidden;