@douyinfe/semi-ui 2.2.0 → 2.3.0

package/lib/cjs/button/Button.d.ts

@@ -25,6 +25,7 @@ export interface ButtonProps {
     onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class Button extends PureComponent<ButtonProps> {
     static defaultProps: {
@@ -57,6 +58,7 @@ export default class Button extends PureComponent<ButtonProps> {
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/lib/cjs/button/Button.js

@@ -93,7 +93,8 @@ class Button extends _react.PureComponent {
         ["".concat(prefixCls, "-circle")]: circle,
         ["".concat(prefixCls, "-borderless")]: theme === 'borderless'
       }, className),
-      type: htmlType
+      type: htmlType,
+      'aria-disabled': disabled
     });
     return (
       /*#__PURE__*/
@@ -141,5 +142,6 @@ Button.propTypes = {
   theme: _propTypes.default.oneOf(_constants.strings.themes),
   className: _propTypes.default.string,
   onMouseEnter: _propTypes.default.func,
-  onMouseLeave: _propTypes.default.func
+  onMouseLeave: _propTypes.default.func,
+  'aria-label': _propTypes.default.string
 };

package/lib/cjs/button/buttonGroup.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { Type, Size } from './Button';
@@ -8,6 +9,7 @@ export interface ButtonGroupProps extends BaseProps {
     type?: Type;
     size?: Size;
     theme?: Theme;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
     static propTypes: {
@@ -16,6 +18,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         type: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<unknown>;
         theme: PropTypes.Requireable<unknown>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         size: string;

package/lib/cjs/button/buttonGroup.js

@@ -59,9 +59,10 @@ class ButtonGroup extends _baseComponent.default {
       children,
       disabled,
       size,
-      type
+      type,
+      'aria-label': ariaLabel
     } = _a,
-          rest = __rest(_a, ["children", "disabled", "size", "type"]);
+          rest = __rest(_a, ["children", "disabled", "size", "type", 'aria-label']);
 
     let inner;
 
@@ -78,7 +79,9 @@ class ButtonGroup extends _baseComponent.default {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-group")
+      className: "".concat(prefixCls, "-group"),
+      role: "group",
+      "aria-label": ariaLabel
     }, inner);
   }
 
@@ -90,7 +93,8 @@ ButtonGroup.propTypes = {
   disabled: _propTypes.default.bool,
   type: _propTypes.default.string,
   size: _propTypes.default.oneOf(btnSizes),
-  theme: _propTypes.default.oneOf(_constants.strings.themes)
+  theme: _propTypes.default.oneOf(_constants.strings.themes),
+  'aria-label': _propTypes.default.string
 };
 ButtonGroup.defaultProps = {
   size: 'default',

package/lib/cjs/button/index.d.ts

@@ -30,6 +30,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;
         circle: import("prop-types").Requireable<boolean>;
         htmlType: import("prop-types").Requireable<unknown>;
+        'aria-label': import("prop-types").Requireable<string>;
     };
     constructor(props?: {});
     render(): JSX.Element;

package/lib/cjs/button/splitButtonGroup.d.ts

@@ -1,12 +1,15 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/cjs/button/button.css';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export interface SplitButtonGroupProps extends BaseProps {
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
     static propTypes: {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/lib/cjs/button/splitButtonGroup.js

@@ -34,7 +34,9 @@ class SplitButtonGroup extends _baseComponent.default {
     const cls = (0, _classnames.default)("".concat(prefixCls, "-split"), className);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: cls,
-      style: style
+      style: style,
+      role: "group",
+      "aria-label": this.props['aria-label']
     }, children);
   }
 
@@ -43,5 +45,6 @@ class SplitButtonGroup extends _baseComponent.default {
 exports.default = SplitButtonGroup;
 SplitButtonGroup.propTypes = {
   style: _propTypes.default.object,
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  'aria-label': _propTypes.default.string
 };

package/lib/cjs/card/index.d.ts

@@ -38,6 +38,8 @@ export interface CardProps {
     style?: CSSProperties;
     /** Title */
     title?: ReactNode;
+    /** aria label */
+    'aria-label'?: string;
 }
 declare class Card extends PureComponent<CardProps> {
     static Meta: typeof Meta;
@@ -59,6 +61,7 @@ declare class Card extends PureComponent<CardProps> {
         shadows: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         bordered: boolean;

package/lib/cjs/card/index.js

@@ -187,6 +187,7 @@ class Card extends _react.PureComponent {
       [(0, _concat.default)(_context = "".concat(prefixcls, "-shadows-")).call(_context, shadows)]: shadows
     });
     return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, others, {
+      "aria-busy": this.props.loading,
       className: cardCls,
       style: style
     }), this.renderHeader(), this.renderCover(), this.renderBody(), this.renderFooter());
@@ -212,7 +213,8 @@ Card.propTypes = {
   loading: _propTypes.default.bool,
   shadows: _propTypes.default.oneOf(_constants.strings.SHADOWS),
   style: _propTypes.default.object,
-  title: _propTypes.default.node
+  title: _propTypes.default.node,
+  'aria-label': _propTypes.default.string
 };
 Card.defaultProps = {
   bordered: true,

package/lib/cjs/cascader/index.d.ts

@@ -19,6 +19,11 @@ export interface TriggerRenderProps extends BasicTriggerRenderProps {
 export declare type SimpleValueType = string | number | CascaderData;
 export declare type Value = SimpleValueType | Array<SimpleValueType> | Array<Array<SimpleValueType>>;
 export interface CascaderProps extends BasicCascaderProps {
+    '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'];
     arrowIcon?: ReactNode;
     defaultValue?: Value;
     dropdownStyle?: CSSProperties;
@@ -30,7 +35,9 @@ export interface CascaderProps extends BasicCascaderProps {
     value?: Value;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    id?: string;
     insetLabel?: ReactNode;
+    insetLabelId?: string;
     style?: CSSProperties;
     bottomSlot?: ReactNode;
     topSlot?: ReactNode;
@@ -53,6 +60,11 @@ export interface CascaderState extends BasicCascaderInnerData {
 declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
     static propTypes: {
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         changeOnSelect: PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<string | any[]>;
@@ -76,6 +88,8 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
+        id: PropTypes.Requireable<string>;
         displayProp: PropTypes.Requireable<string>;
         displayRender: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/cascader/index.js

@@ -189,7 +189,7 @@ class Cascader extends _baseComponent.default {
 
       const content = /*#__PURE__*/_react.default.createElement("div", {
         className: popoverCls,
-        role: "list-box",
+        role: "listbox",
         style: dropdownStyle
       }, topSlot, /*#__PURE__*/_react.default.createElement(_item.default, {
         activeKeys: activeKeys,
@@ -318,7 +318,8 @@ class Cascader extends _baseComponent.default {
     this.renderPrefix = () => {
       const {
         prefix,
-        insetLabel
+        insetLabel,
+        insetLabelId
       } = this.props;
       const labelNode = prefix || insetLabel;
       const prefixWrapperCls = (0, _classnames.default)({
@@ -329,7 +330,8 @@ class Cascader extends _baseComponent.default {
         ["".concat(prefixcls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefixWrapperCls
+        className: prefixWrapperCls,
+        id: insetLabelId
       }, labelNode);
     };
 
@@ -408,7 +410,9 @@ class Cascader extends _baseComponent.default {
       if (allowClear) {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: clearCls,
-          onClick: this.handleClear
+          onClick: this.handleClear,
+          role: 'button',
+          tabIndex: 0
         }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
       }
 
@@ -443,7 +447,8 @@ class Cascader extends _baseComponent.default {
         suffix,
         insetLabel,
         triggerRender,
-        showClear
+        showClear,
+        id
       } = this.props;
       const {
         isOpen,
@@ -485,12 +490,28 @@ class Cascader extends _baseComponent.default {
       }, suffix ? this.renderSuffix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: 'arrow'
       }, this.renderArrow())];
+      /**
+       * Reasons for disabling the a11y eslint rule:
+       * The following attributes(aria-controls,aria-expanded) will be automatically added by Tooltip, no need to declare here
+       */
+
       return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
         className: classNames,
         style: style,
         ref: this.triggerRef,
-        onClick: e => this.foundation.handleClick(e)
-      }, mouseEvent), inner);
+        onClick: e => this.foundation.handleClick(e),
+        "aria-invalid": this.props['aria-invalid'],
+        "aria-errormessage": this.props['aria-errormessage'],
+        "aria-label": this.props['aria-label'],
+        "aria-labelledby": this.props['aria-labelledby'],
+        "aria-describedby": this.props["aria-describedby"],
+        "aria-required": this.props['aria-required'],
+        id: id
+      }, mouseEvent, {
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+        role: 'combobox',
+        tabIndex: 0
+      }), inner);
     };
 
     this.state = {
@@ -909,6 +930,11 @@ class Cascader extends _baseComponent.default {
 
 Cascader.contextType = _context4.default;
 Cascader.propTypes = {
+  'aria-labelledby': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   arrowIcon: _propTypes.default.node,
   changeOnSelect: _propTypes.default.bool,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
@@ -934,6 +960,8 @@ Cascader.propTypes = {
   suffix: _propTypes.default.node,
   prefix: _propTypes.default.node,
   insetLabel: _propTypes.default.node,
+  insetLabelId: _propTypes.default.string,
+  id: _propTypes.default.string,
   displayProp: _propTypes.default.string,
   displayRender: _propTypes.default.func,
   onChange: _propTypes.default.func,

package/lib/cjs/checkbox/checkbox.d.ts

@@ -1,17 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CheckboxAdapter, BasicCheckboxEvent, BasicTargetObject, BaseCheckboxProps } from '@douyinfe/semi-foundation/lib/cjs/checkbox/checkboxFoundation';
+import CheckboxFoundation, { CheckboxAdapter, BasicCheckboxEvent, BasicTargetObject, BaseCheckboxProps } from '@douyinfe/semi-foundation/lib/cjs/checkbox/checkboxFoundation';
 import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/cjs/checkbox/checkbox.css';
 export declare type CheckboxEvent = BasicCheckboxEvent;
 export declare type TargetObject = BasicTargetObject;
 export interface CheckboxProps extends BaseCheckboxProps {
+    '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'];
     onChange?: (e: CheckboxEvent) => any;
     style?: React.CSSProperties;
     onMouseEnter?: React.MouseEventHandler<HTMLSpanElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
     extra?: React.ReactNode;
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    role?: React.HTMLAttributes<HTMLSpanElement>['role'];
+    tabIndex?: number;
 }
 interface CheckboxState {
     checked: boolean;
@@ -28,6 +36,11 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         };
     }>;
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         checked: PropTypes.Requireable<boolean>;
         defaultChecked: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
@@ -40,6 +53,9 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        index: PropTypes.Requireable<number>;
+        'aria-label': PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         defaultChecked: boolean;
@@ -50,12 +66,16 @@ declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     };
     checkboxEntity: CheckboxInner;
     get adapter(): CheckboxAdapter<CheckboxProps, CheckboxState>;
+    foundation: CheckboxFoundation;
+    addonId: string;
+    extraId: string;
     constructor(props: CheckboxProps);
     componentDidUpdate(prevProps: CheckboxProps): void;
     isInGroup(): any;
     focus(): void;
     blur(): void;
     handleChange: React.MouseEventHandler<HTMLSpanElement>;
+    handleEnterPress: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
     render(): JSX.Element;
 }
 export default Checkbox;

package/lib/cjs/checkbox/checkbox.js

@@ -38,6 +38,8 @@ require("@douyinfe/semi-foundation/lib/cjs/checkbox/checkbox.css");
 
 var _context2 = require("./context");
 
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
 /* eslint-disable max-len */
 class Checkbox extends _baseComponent.default {
   constructor(props) {
@@ -45,11 +47,19 @@ class Checkbox extends _baseComponent.default {
 
     this.handleChange = e => this.foundation.handleChange(e);
 
+    this.handleEnterPress = e => this.foundation.handleEnterPress(e);
+
     const checked = false;
     this.state = {
       checked: props.checked || props.defaultChecked || checked
     };
     this.checkboxEntity = null;
+    this.addonId = (0, _uuid.getUuidShort)({
+      prefix: 'addon'
+    });
+    this.extraId = (0, _uuid.getUuidShort)({
+      prefix: 'extra'
+    });
     this.foundation = new _checkboxFoundation.default(this.adapter);
   }
 
@@ -109,6 +119,8 @@ class Checkbox extends _baseComponent.default {
       onMouseLeave,
       extra,
       value,
+      role,
+      tabIndex,
       id
     } = this.props;
     const {
@@ -118,8 +130,9 @@ class Checkbox extends _baseComponent.default {
       checked,
       disabled
     };
+    const inGroup = this.isInGroup();
 
-    if (this.isInGroup()) {
+    if (inGroup) {
       if (this.context.checkboxGroup.value) {
         var _context;
 
@@ -155,34 +168,52 @@ class Checkbox extends _baseComponent.default {
     const extraCls = (0, _classnames.default)("".concat(prefix, "-extra"), {
       ["".concat(prefix, "-cardType_extra_noChildren")]: props.isCardType && !children
     });
-    const name = this.isInGroup() && this.context.checkboxGroup.name;
+    const name = inGroup && this.context.checkboxGroup.name;
 
     const renderContent = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement("span", {
+      id: this.addonId,
       className: "".concat(prefix, "-addon")
     }, children) : null, extra ? /*#__PURE__*/_react.default.createElement("div", {
+      id: this.extraId,
       className: extraCls
     }, extra) : null);
 
-    return /*#__PURE__*/_react.default.createElement("span", {
-      style: style,
-      className: wrapper,
-      id: id,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onClick: this.handleChange
-    }, /*#__PURE__*/_react.default.createElement(_checkboxInner.default, (0, _assign.default)({}, this.props, props, {
-      name: name,
-      isPureCardType: props.isPureCardType,
-      ref: ref => {
-        this.checkboxEntity = ref;
-      }
-    })), props.isCardType ? /*#__PURE__*/_react.default.createElement("div", null, renderContent()) : renderContent());
+    return (
+      /*#__PURE__*/
+      // label is better than span, however span is here which is to solve gitlab issue #364
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+      _react.default.createElement("span", {
+        role: role,
+        tabIndex: tabIndex,
+        style: style,
+        className: wrapper,
+        id: id,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onClick: this.handleChange,
+        onKeyPress: this.handleEnterPress,
+        "aria-labelledby": this.props['aria-labelledby']
+      }, /*#__PURE__*/_react.default.createElement(_checkboxInner.default, (0, _assign.default)({}, this.props, props, {
+        addonId: children && this.addonId,
+        extraId: extra && this.extraId,
+        name: name,
+        isPureCardType: props.isPureCardType,
+        ref: ref => {
+          this.checkboxEntity = ref;
+        }
+      })), props.isCardType ? /*#__PURE__*/_react.default.createElement("div", null, renderContent()) : renderContent())
+    );
   }
 
 }
 
 Checkbox.contextType = _context2.Context;
 Checkbox.propTypes = {
+  'aria-describedby': _propTypes.default.string,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   // Specifies whether it is currently selected
   checked: _propTypes.default.bool,
   // Initial check
@@ -199,7 +230,10 @@ Checkbox.propTypes = {
   prefixCls: _propTypes.default.string,
   onMouseEnter: _propTypes.default.func,
   onMouseLeave: _propTypes.default.func,
-  extra: _propTypes.default.node
+  extra: _propTypes.default.node,
+  index: _propTypes.default.number,
+  'aria-label': _propTypes.default.string,
+  tabIndex: _propTypes.default.number
 };
 Checkbox.defaultProps = {
   defaultChecked: false,

package/lib/cjs/checkbox/checkboxGroup.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/lib/cjs/checkbox/checkboxGroupFoundation';
+import CheckboxGroupFoundation, { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/lib/cjs/checkbox/checkboxGroupFoundation';
 import BaseComponent from '../_base/baseComponent';
 import { CheckboxEvent } from './checkbox';
 export declare type CheckboxDirection = 'horizontal' | 'vertical';
 export declare type CheckboxType = 'default' | 'card' | 'pureCard';
 export declare 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;
@@ -19,12 +24,18 @@ export declare type CheckboxGroupProps = {
     className?: string;
     type?: CheckboxType;
     id?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 };
 export declare type CheckboxGroupState = {
     value?: any[];
 };
 declare class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState> {
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
@@ -40,6 +51,7 @@ declare class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGr
     };
     static defaultProps: Partial<CheckboxGroupProps>;
     get adapter(): CheckboxGroupAdapter;
+    foundation: CheckboxGroupFoundation;
     constructor(props: CheckboxGroupProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: CheckboxGroupProps): void;

package/lib/cjs/checkbox/checkboxGroup.js

@@ -93,7 +93,8 @@ class CheckboxGroup extends _baseComponent.default {
       className,
       id,
       style,
-      type
+      type,
+      disabled
     } = this.props;
     const isPureCardType = type === _constants.strings.TYPE_PURECARD;
     const isCardType = type === _constants.strings.TYPE_CARD || isPureCardType;
@@ -113,6 +114,7 @@ class CheckboxGroup extends _baseComponent.default {
       inner = (0, _map.default)(_context5 = options || []).call(_context5, (option, index) => {
         if (typeof option === 'string') {
           return /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+            role: "listitem",
             key: index,
             disabled: this.props.disabled,
             value: option,
@@ -120,6 +122,7 @@ class CheckboxGroup extends _baseComponent.default {
           }, option);
         } else {
           return /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+            role: "listitem",
             key: index,
             disabled: option.disabled || this.props.disabled,
             value: option.value,
@@ -135,14 +138,19 @@ class CheckboxGroup extends _baseComponent.default {
       var _context6;
 
       inner = (0, _map.default)(_context6 = _react.default.Children.toArray(children)).call(_context6, (itm, index) => /*#__PURE__*/_react.default.cloneElement(itm, {
-        key: index
+        key: index,
+        role: 'listitem'
       }));
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
+      id: id,
+      role: "list",
+      "aria-label": this.props['aria-label'],
       className: prefixClsDisplay,
       style: style,
-      id: id
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-describedby": this.props['aria-describedby']
     }, /*#__PURE__*/_react.default.createElement(_context7.Context.Provider, {
       value: {
         checkboxGroup: {
@@ -160,6 +168,11 @@ class CheckboxGroup extends _baseComponent.default {
 }
 
 CheckboxGroup.propTypes = {
+  'aria-describedby': _propTypes.default.string,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   defaultValue: _propTypes.default.array,
   disabled: _propTypes.default.bool,
   name: _propTypes.default.string,

package/lib/cjs/checkbox/checkboxInner.d.ts

@@ -1,6 +1,11 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 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;
@@ -8,6 +13,9 @@ export interface CheckboxInnerProps {
     name?: string;
     isPureCardType?: boolean;
     ref?: React.MutableRefObject<CheckboxInner> | ((ref: CheckboxInner) => void);
+    addonId?: string;
+    extraId?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
     static contextType: React.Context<{
@@ -21,6 +29,11 @@ declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         };
     }>;
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         checked: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -28,6 +41,8 @@ declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         grouped: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<any>;
         isPureCardType: PropTypes.Requireable<boolean>;
+        addonId: PropTypes.Requireable<string>;
+        extraId: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;