@douyinfe/semi-ui 2.2.0-beta.1 → 2.3.0-beta.0

package/button/_story/button.stories.js

@@ -30,12 +30,12 @@ export const Warning = () => <Button type="warning">hello button</Button>;
 
 export const WithIcon = () => (
   <>
-    <Button icon={<IconTick />}>hello button</Button>
+    <Button aria-label='Button demo' icon={<IconTick />}>hello button</Button>
     <br />
-    <Button icon={<IconEdit />} noHorizontalPadding={false} ghost={false}>
+    <Button aria-label='Button demo' icon={<IconEdit />} noHorizontalPadding={false} ghost={false}>
       Edit me
     </Button>
-    <Button icon={<IconUser />} />
+    <Button aria-label='Button demo' icon={<IconUser />} />
   </>
 );
 
@@ -57,34 +57,34 @@ export const CombinationShow = withPropsCombinations(
 
 export const ButtonGroupDemo = () => (
   <div>
-    <ButtonGroup disabled>
+    <ButtonGroup aria-label='ButtonGroup demo' disabled>
       <Button>复制</Button>
       <Button type="primary">查找</Button>
       <Button type="danger">粘贴</Button>
     </ButtonGroup>
     <br />
-    <ButtonGroup>
+    <ButtonGroup aria-label='ButtonGroup demo'>
       <Button icon={<IconCopy />} theme={'solid'} />
       <Button icon={<IconSearch />} theme={'solid'} />
       <Button icon={<IconPlay />} theme={'solid'} />
     </ButtonGroup>
     <br />
 
-    <ButtonGroup size={'large'}>
+    <ButtonGroup size={'large'} aria-label='ButtonGroup demo'>
       <Button icon={<IconCopy />} theme={'solid'} />
       <Button icon={<IconSearch />} theme={'solid'} />
       <Button icon={<IconPlay />} theme={'solid'} />
     </ButtonGroup>
     <br />
 
-    <ButtonGroup size={'small'}>
+    <ButtonGroup size={'small'} aria-label='ButtonGroup demo'>
       <Button icon={<IconCopy />} theme={'solid'} />
       <Button icon={<IconSearch />} theme={'solid'} />
       <Button icon={<IconPlay />} theme={'solid'} />
     </ButtonGroup>
     <br />
 
-    <ButtonGroup>
+    <ButtonGroup aria-label='ButtonGroup demo'>
       <Button icon={<IconCopy />} theme={'solid'}>
         拷贝
       </Button>
@@ -97,7 +97,7 @@ export const ButtonGroupDemo = () => (
     </ButtonGroup>
     <br />
 
-    <ButtonGroup size={'large'}>
+    <ButtonGroup size={'large'} aria-label='ButtonGroup demo'>
       <Button icon={<IconCopy />} theme={'solid'}>
         拷贝
       </Button>
@@ -110,7 +110,7 @@ export const ButtonGroupDemo = () => (
     </ButtonGroup>
     <br />
 
-    <ButtonGroup size={'small'}>
+    <ButtonGroup size={'small'} aria-label='ButtonGroup demo'>
       <Button icon={<IconCopy />} theme={'solid'}>
         拷贝
       </Button>

package/button/buttonGroup.tsx

@@ -13,6 +13,7 @@ export interface ButtonGroupProps extends BaseProps {
     type?: Type;
     size?: Size;
     theme?: Theme;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
 const prefixCls = cssClasses.PREFIX;
@@ -25,6 +26,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         type: PropTypes.string,
         size: PropTypes.oneOf(btnSizes),
         theme: PropTypes.oneOf(strings.themes),
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps = {
@@ -34,7 +36,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
     };
 
     render() {
-        const { children, disabled, size, type, ...rest } = this.props;
+        const { children, disabled, size, type, 'aria-label': ariaLabel, ...rest } = this.props;
         let inner;
 
         if (children) {
@@ -44,6 +46,6 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
                     : itm
             ));
         }
-        return <div className={`${prefixCls}-group`}>{inner}</div>;
+        return <div className={`${prefixCls}-group`} role="group" aria-label={ariaLabel}>{inner}</div>;
     }
 }

package/button/splitButtonGroup.tsx

@@ -8,18 +8,21 @@ import BaseComponent, { BaseProps } from '../_base/baseComponent';
 const prefixCls = cssClasses.PREFIX;
 
 // eslint-disable-next-line
-export interface SplitButtonGroupProps extends BaseProps {}
+export interface SplitButtonGroupProps extends BaseProps {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+}
 
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
     static propTypes = {
         style: PropTypes.object,
         className: PropTypes.string,
+        'aria-label': PropTypes.string,
     };
     render() {
         const { children, style, className } = this.props;
         const cls = classNames(`${prefixCls}-split`, className);
         return (
-            <div className={cls} style={style}>
+            <div className={cls} style={style} role="group" aria-label={this.props['aria-label']}>
                 {children}
             </div>
         );

package/card/_story/card.stories.js

@@ -36,6 +36,7 @@ export const Default = () => (
       style={{
         width: 360,
       }}
+      aria-label='basic card'
       headerExtraContent={<Text link={{}}>更多</Text>}
     >
       Semi Design 是由互娱社区前端团队与 UED
@@ -129,6 +130,7 @@ export function Simple() {
           avatar={
             <Avatar
               size="default"
+              alt="Card meta avatar"
               src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg"
             />
           }
@@ -233,6 +235,7 @@ export const MetaDemo = () => (
         description="全面、易用、优质"
         avatar={
           <Avatar
+            alt="Card meta avatar"
             size="default"
             src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg"
           />
@@ -335,12 +338,13 @@ export function Loading() {
   const { Title, Paragraph, Image } = Skeleton;
   return (
     <Space vertical align="start" spacing="medium">
-      <Switch onChange={v => setLoading(!v)} />
+      <Switch onChange={v => setLoading(!v)} aria-label='switch card loading status'/>
       <Card
         style={{
           width: 360,
         }}
         loading={loading}
+        aria-busy={loading}
       >
         <Meta title="Semi Doc" description="全面、易用、优质" />
       </Card>
@@ -451,6 +455,7 @@ export const Actions = () => (
           avatar={
             <Avatar
               size="default"
+              alt="Card meta avatar"
               src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg"
             />
           }
@@ -485,6 +490,7 @@ export const Actions = () => (
           description="全面、易用、优质"
           avatar={
             <Avatar
+              alt="Card meta avatar"
               size="default"
               src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg"
             />
@@ -515,6 +521,7 @@ export const CardGroupDemo = () => (
             description="全面、易用、优质"
             avatar={
               <Avatar
+                alt="Card meta avatar"
                 size="default"
                 src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg"
               />

package/card/_story/card.stories.tsx

@@ -21,6 +21,7 @@ stories.add('default', () => (
             avatar={
               <Avatar 
                 size="default"
+                alt="example"
                 src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
               />
             }
@@ -48,6 +49,7 @@ stories.add('default', () => (
             description="全面、易用、优质" 
             avatar={
               <Avatar 
+                alt="example"
                 size="default"
                 src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
               />
@@ -76,6 +78,7 @@ stories.add('default', () => (
             description="全面、易用、优质" 
             avatar={
               <Avatar 
+                alt='example'
                 size="default"
                 src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
               />

package/card/index.tsx

@@ -50,6 +50,8 @@ export interface CardProps {
     style?: CSSProperties;
     /** Title */
     title?: ReactNode;
+    /** aria label */
+    'aria-label'?: string;
 }
 
 
@@ -73,7 +75,8 @@ class Card extends PureComponent<CardProps> {
         loading: PropTypes.bool,
         shadows: PropTypes.oneOf(strings.SHADOWS),
         style: PropTypes.object,
-        title: PropTypes.node
+        title: PropTypes.node,
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps = {
@@ -230,7 +233,7 @@ class Card extends PureComponent<CardProps> {
         });
 
         return (
-            <div {...others} className={cardCls} style={style}>
+            <div {...others} aria-busy={this.props.loading} className={cardCls} style={style}>
                 {this.renderHeader()}
                 {this.renderCover()}
                 {this.renderBody()}

package/cascader/index.tsx

@@ -49,6 +49,11 @@ export type SimpleValueType = string | number | CascaderData;
 export 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;
@@ -60,7 +65,9 @@ export interface CascaderProps extends BasicCascaderProps {
     value?: Value;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    id?: string;
     insetLabel?: ReactNode;
+    insetLabelId?: string;
     style?: CSSProperties;
     bottomSlot?: ReactNode;
     topSlot?: ReactNode;
@@ -88,6 +95,11 @@ const resetkey = 0;
 class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     static contextType = ConfigContext;
     static propTypes = {
+        'aria-labelledby': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-errormessage': PropTypes.string,
+        'aria-describedby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         arrowIcon: PropTypes.node,
         changeOnSelect: PropTypes.bool,
         defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
@@ -114,6 +126,8 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         suffix: PropTypes.node,
         prefix: PropTypes.node,
         insetLabel: PropTypes.node,
+        insetLabelId: PropTypes.string,
+        id: PropTypes.string,
         displayProp: PropTypes.string,
         displayRender: PropTypes.func,
         onChange: PropTypes.func,
@@ -610,7 +624,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`);
         const renderData = this.foundation.getRenderData();
         const content = (
-            <div className={popoverCls} role="list-box" style={dropdownStyle}>
+            <div className={popoverCls} role="listbox" style={dropdownStyle}>
                 {topSlot}
                 <Item
                     activeKeys={activeKeys}
@@ -726,7 +740,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     };
 
     renderPrefix = () => {
-        const { prefix, insetLabel } = this.props;
+        const { prefix, insetLabel, insetLabelId } = this.props;
         const labelNode: any = prefix || insetLabel;
 
         const prefixWrapperCls = cls({
@@ -737,7 +751,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        return <div className={prefixWrapperCls}>{labelNode}</div>;
+        return <div className={prefixWrapperCls} id={insetLabelId}>{labelNode}</div>;
     };
 
     renderCustomTrigger = () => {
@@ -794,7 +808,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const allowClear = this.showClearBtn();
         if (allowClear) {
             return (
-                <div className={clearCls} onClick={this.handleClear}>
+                <div className={clearCls} onClick={this.handleClear} role='button' tabIndex={0}>
                     <IconClear />
                 </div>
             );
@@ -825,6 +839,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             insetLabel,
             triggerRender,
             showClear,
+            id,
         } = this.props;
         const { isOpen, isFocus, isInput, checkedKeys } = this.state;
         const filterable = Boolean(filterTreeNode);
@@ -863,14 +878,27 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 <Fragment key={'suffix'}>{suffix ? this.renderSuffix() : null}</Fragment>,
                 <Fragment key={'arrow'}>{this.renderArrow()}</Fragment>,
             ];
-
+        /**
+         * 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 (
             <div
                 className={classNames}
                 style={style}
                 ref={this.triggerRef}
                 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}
             </div>

package/checkbox/_story/checkbox.stories.js

@@ -7,6 +7,7 @@ import Checkbox from '../index';
 import CheckboxGroup from '../checkboxGroup';
 import { Col, Input, Row } from '../../index';
 import { IconClose } from '@douyinfe/semi-icons';
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 
 export default {
   title: 'Checkbox',
@@ -37,7 +38,7 @@ export const CheckboxDefault = () => {
 export const CheckboxWithoutText = () => {
   return (
     <div>
-      <Checkbox onChange={e => console.log(e)} />
+      <Checkbox aria-label='选择框示例' onChange={e => console.log(e)} />
     </div>
   );
 };
@@ -412,6 +413,7 @@ export const CheckboxRenderInDiv = () => (
       }}
     >
       <Checkbox
+        aria-label='checkbox demo'
         onChange={(...args) => {
           console.log('clicked checkbox: ', ...args);
         }}
@@ -499,6 +501,7 @@ const TransformSelect = props => {
       <div>
         <div>
           <Input
+            aria-label='input'
             value={inputValue}
             prefix="search"
             clearable
@@ -514,6 +517,7 @@ const TransformSelect = props => {
         </div>
         <div>
           <CheckboxGroup
+            aria-label='checkbox group box'
             options={viewsOptions}
             value={currentValue}
             onChange={onSelectChange}
@@ -561,7 +565,7 @@ export const BugDemo = () => <TransformSelect />;
 export const CheckboxGroupCardStyle = () => (
   <>
     <div>常见情况</div>
-    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+    <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' type="card" direction="horizontal" defaultValue={['1']}>
       <Checkbox value="1" extra="Semi Design" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
@@ -574,9 +578,9 @@ export const CheckboxGroupCardStyle = () => (
     </CheckboxGroup>
     <br />
     <br />
-    <div>Checkbox disabled</div>
-    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
-      <Checkbox value="1" disabled extra="disabled+checked" style={{ width: 280 }}>
+    <div>radio disabled</div>
+    <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' type="card" direction="horizontal" defaultValue={['1']}>
+      <Checkbox value="1" disabled extra="Semi Design" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
       <Checkbox value="2" disabled extra="disabled+unchecked" style={{ width: 280 }}>
@@ -589,7 +593,7 @@ export const CheckboxGroupCardStyle = () => (
     <br />
     <br />
     <div>checkboxGroup disabled</div>
-    <CheckboxGroup type="card" direction="horizontal" disabled defaultValue={['1']}>
+    <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' type="card" direction="horizontal" disabled defaultValue={['1']}>
       <Checkbox value="1" extra="Semi Design" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
@@ -603,7 +607,7 @@ export const CheckboxGroupCardStyle = () => (
     <br />
     <br />
     <div>文字很长，并且没有设置宽度，因此换行显示</div>
-    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+    <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' type="card" direction="horizontal" defaultValue={['1']}>
       <Checkbox
         value="1"
         extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
@@ -626,7 +630,7 @@ export const CheckboxGroupCardStyle = () => (
     <br />
     <br />
     <div>设置了width=180</div>
-    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+    <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' type="card" direction="horizontal" defaultValue={['1']}>
       <Checkbox
         value="1"
         extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
@@ -652,7 +656,7 @@ export const CheckboxGroupCardStyle = () => (
     <br />
     <br />
     <div>没有extra，width=180</div>
-    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+    <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' type="card" direction="horizontal" defaultValue={['1']}>
       <Checkbox value="1" style={{ width: 180 }}>
         多选框标题
       </Checkbox>
@@ -666,19 +670,22 @@ export const CheckboxGroupCardStyle = () => (
     <br />
     <br />
     <div>没有标题，width=380</div>
-    <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
+    <CheckboxGroup key={getUuidShort({ prefix: 'test' })} aria-label='group demo' type="card" direction="horizontal" defaultValue={['1']}>
       <Checkbox
         value="1"
+        aria-label='checkbox demo'
         extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
         style={{ width: 380 }}
       ></Checkbox>
       <Checkbox
         value="2"
+        aria-label='checkbox demo'
         extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
         style={{ width: 380 }}
       ></Checkbox>
       <Checkbox
         value="3"
+        aria-label='checkbox demo'
         extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
         style={{ width: 380 }}
       ></Checkbox>
@@ -688,7 +695,7 @@ export const CheckboxGroupCardStyle = () => (
     <hr />
     <div>下面是垂直的情况：</div>
     <div>常见情况</div>
-    <CheckboxGroup direction="vertical" type="card" defaultValue={['1']}>
+    <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' direction="vertical" type="card" defaultValue={['1']}>
       <Checkbox value="1" extra="Semi Design" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
@@ -702,7 +709,7 @@ export const CheckboxGroupCardStyle = () => (
     <br />
     <br />
     <div>没有设置宽度</div>
-    <CheckboxGroup direction="vertical" type="card" defaultValue={['1']}>
+    <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' direction="vertical" type="card" defaultValue={['1']}>
       <Checkbox
         value="1"
         extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
@@ -725,7 +732,7 @@ export const CheckboxGroupCardStyle = () => (
     <br />
     <br />
     <div>设置了width=380</div>
-    <CheckboxGroup direction="vertical" type="card" defaultValue={['1']}>
+    <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' direction="vertical" type="card" defaultValue={['1']}>
       <Checkbox
         value="1"
         extra="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统"
@@ -747,7 +754,7 @@ export const CheckboxGroupCardStyle = () => (
       >
         多选框标题
       </Checkbox>
-    </CheckboxGroup>
+    </CheckboxGroup> */}
   </>
 );
 

package/checkbox/checkbox.tsx

@@ -9,16 +9,25 @@ import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/checkbox/checkbox.scss';
 import { Context } from './context';
 import { isUndefined, isBoolean, noop } from 'lodash';
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 export type CheckboxEvent = BasicCheckboxEvent;
 export 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;
     // TODO, docs
     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']; // a11y: wrapper role
+    tabIndex?: number; // a11y: wrapper tabIndex
 }
 interface CheckboxState {
     checked: boolean;
@@ -27,6 +36,11 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     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,
         // Specifies whether it is currently selected
         checked: PropTypes.bool,
         // Initial check
@@ -44,6 +58,9 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onMouseEnter: PropTypes.func,
         onMouseLeave: PropTypes.func,
         extra: PropTypes.node,
+        index: PropTypes.number,
+        'aria-label': PropTypes.string,
+        tabIndex: PropTypes.number,
     };
 
     static defaultProps = {
@@ -74,6 +91,9 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         };
     }
 
+    foundation: CheckboxFoundation;
+    addonId: string;
+    extraId: string;
     constructor(props: CheckboxProps) {
         super(props);
 
@@ -84,6 +104,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         };
 
         this.checkboxEntity = null;
+        this.addonId = getUuidShort({ prefix: 'addon' });
+        this.extraId = getUuidShort({ prefix: 'extra' });
         this.foundation = new CheckboxFoundation(this.adapter);
     }
 
@@ -111,6 +133,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
 
     handleChange: React.MouseEventHandler<HTMLSpanElement> = e => this.foundation.handleChange(e);
 
+    handleEnterPress = (e: React.KeyboardEvent<HTMLSpanElement>) => this.foundation.handleEnterPress(e);
+
     render() {
         const {
             disabled,
@@ -123,7 +147,9 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             onMouseLeave,
             extra,
             value,
-            id,
+            role,
+            tabIndex,
+            id
         } = this.props;
         const { checked } = this.state;
         const props: Record<string, any> = {
@@ -131,7 +157,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             disabled,
         };
 
-        if (this.isInGroup()) {
+        const inGroup = this.isInGroup();
+        if (inGroup) {
             if (this.context.checkboxGroup.value) {
                 const realChecked = (this.context.checkboxGroup.value || []).includes(value);
                 props.checked = realChecked;
@@ -163,26 +190,34 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children,
         });
 
-        const name = this.isInGroup() && this.context.checkboxGroup.name;
+        const name = inGroup && this.context.checkboxGroup.name;
 
         const renderContent = () => (
             <>
-                {children ? <span className={`${prefix}-addon`}>{children}</span> : null}
-                {extra ? <div className={extraCls}>{extra}</div> : null}
+                {children ? <span id={this.addonId} className={`${prefix}-addon`}>{children}</span> : null}
+                {extra ? <div id={this.extraId} className={extraCls}>{extra}</div> : null}
             </>
         );
         return (
+            // 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
             <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']}
             >
                 <CheckboxInner
                     {...this.props}
                     {...props}
+                    addonId={children && this.addonId}
+                    extraId={extra && this.extraId}
                     name={name}
                     isPureCardType={props.isPureCardType}
                     ref={ref => {