Repository: ant-design/ant-design-mobile
Pull request #6072 (2023-03-27 08:03:35)

feat(Popover): support custom arrow size
@zombieJ just move [this pr](https://github.com/ant-design/ant-design-mobile/pull/6046) to feature branch.

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6072.surge.sh
zombieJ: Strange, why CI failed...
cbbfcd:  `error  Unknown property 'aria-lable' found  react/no-unknown-property` Lint Error, @zombieJ 
miracles1919: > `error Unknown property 'aria-lable' found react/no-unknown-property`

This error is caused by #6070, I will fix it



Patch:
diff --git a/src/components/action-sheet/action-sheet.tsx b/src/components/action-sheet/action-sheet.tsx
index 38eb71caf..f48febef8 100644
--- a/src/components/action-sheet/action-sheet.tsx
+++ b/src/components/action-sheet/action-sheet.tsx
@@ -99,17 +99,11 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
                   role='option'
                   aria-disabled={action.disabled}
                 >
-                  <div
-                    className={`${classPrefix}-button-item-name`}
-                    aria-lable={action.text}
-                  >
+                  <div className={`${classPrefix}-button-item-name`}>
                     {action.text}
                   </div>
                   {action.description && (
-                    <div
-                      className={`${classPrefix}-button-item-description`}
-                      aria-lable={action.description}
-                    >
+                    <div className={`${classPrefix}-button-item-description`}>
                       {action.description}
                     </div>
                   )}
@@ -122,7 +116,7 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
             <div
               className={`${classPrefix}-cancel`}
               role='option'
-              aria-lable={props.cancelText}
+              aria-label={props.cancelText}
             >
               <div className={`${classPrefix}-button-item-wrapper`}>
                 <a
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
index f08f641f7..daaf10b0d 100644
--- a/src/components/avatar/avatar.tsx
+++ b/src/components/avatar/avatar.tsx
@@ -11,7 +11,7 @@ export type AvatarProps = {
   src: string
   fallback?: ReactNode
   fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
-} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError'> &
+} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError' | 'onLoad'> &
   NativeProps<'--size' | '--border-radius'>
 
 const defaultProps = {
@@ -33,6 +33,7 @@ export const Avatar: FC<AvatarProps> = p => {
       fit={props.fit}
       onClick={props.onClick}
       onError={props.onError}
+      onLoad={props.onLoad}
     />
   )
 }
diff --git a/src/components/avatar/index.en.md b/src/components/avatar/index.en.md
index b3b5393d6..5751e7292 100644
--- a/src/components/avatar/index.en.md
+++ b/src/components/avatar/index.en.md
@@ -20,7 +20,7 @@ It is necessary to show the characteristics of people or things more intuitively
 | fit | The fill mode of the image | `'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'` | `'cover'` |
 | src | The address of avatar. | `string` | - |
 
-In addition, the following props of [Image](/components/image) are also supported: `alt` `lazy` `onClick` `onError`.
+In addition, the following props of [Image](/components/image) are also supported: `alt` `lazy` `onClick` `onError` `onLoad`.
 
 ### CSS Variables
 
diff --git a/src/components/avatar/index.zh.md b/src/components/avatar/index.zh.md
index 07a9d5657..0f58584eb 100644
--- a/src/components/avatar/index.zh.md
+++ b/src/components/avatar/index.zh.md
@@ -20,7 +20,7 @@
 | fit | 图片填充模式 | `'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'` | `'cover'` |
 | src | 头像的图片地址 | `string` | - |
 
-此外，还支持 [Image](/zh/components/image) 组件的 `alt` `lazy` `onClick` `onError` 属性。
+此外，还支持 [Image](/zh/components/image) 组件的 `alt` `lazy` `onClick` `onError` `onLoad` 属性。
 
 ### CSS 变量
 
diff --git a/src/components/check-list/check-list-item.tsx b/src/components/check-list/check-list-item.tsx
index 4ed5d93e6..27a7600e6 100644
--- a/src/components/check-list/check-list-item.tsx
+++ b/src/components/check-list/check-list-item.tsx
@@ -32,12 +32,9 @@ export const CheckListItem: FC<CheckListItemProps> = props => {
   }
   const active = context.value.includes(props.value)
   const readOnly = props.readOnly || context.readOnly
-
-  const extra = (
-    <div className={`${classPrefix}-extra`}>
-      {active ? context.activeIcon : null}
-    </div>
-  )
+  const defaultExtra = active ? context.activeIcon : null
+  const renderExtra = context.extra ? context.extra(active) : defaultExtra
+  const extra = <div className={`${classPrefix}-extra`}>{renderExtra}</div>
 
   return withNativeProps(
     props,
diff --git a/src/components/check-list/check-list.tsx b/src/components/check-list/check-list.tsx
index 0ed5652ce..2ed6db1fe 100644
--- a/src/components/check-list/check-list.tsx
+++ b/src/components/check-list/check-list.tsx
@@ -14,6 +14,7 @@ export type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
   onChange?: (val: string[]) => void
   multiple?: boolean
   activeIcon?: ReactNode
+  extra?: (active: boolean) => ReactNode
   disabled?: boolean
   readOnly?: boolean
   children?: React.ReactNode
@@ -42,7 +43,7 @@ export const CheckList: FC<CheckListProps> = p => {
     setValue(value.filter(item => item !== val))
   }
 
-  const { activeIcon, disabled, readOnly } = props
+  const { activeIcon, extra, disabled, readOnly } = props
 
   return (
     <CheckListContext.Provider
@@ -51,6 +52,7 @@ export const CheckList: FC<CheckListProps> = p => {
         check,
         uncheck,
         activeIcon,
+        extra,
         disabled,
         readOnly,
       }}
diff --git a/src/components/check-list/context.tsx b/src/components/check-list/context.tsx
index 04a9eb772..2dd2e8909 100644
--- a/src/components/check-list/context.tsx
+++ b/src/components/check-list/context.tsx
@@ -5,6 +5,7 @@ export const CheckListContext = createContext<{
   check: (val: string) => void
   uncheck: (val: string) => void
   activeIcon?: ReactNode
+  extra?: (active: boolean) => ReactNode
   disabled?: boolean
   readOnly?: boolean
 } | null>(null)
diff --git a/src/components/check-list/demos/demo1.tsx b/src/components/check-list/demos/demo1.tsx
index bb132ddb8..1313d637b 100644
--- a/src/components/check-list/demos/demo1.tsx
+++ b/src/components/check-list/demos/demo1.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
 import { CheckList } from 'antd-mobile'
 import { DemoBlock } from 'demos'
-import { SmileOutline } from 'antd-mobile-icons'
+import {
+  CheckCircleFill,
+  CheckCircleOutline,
+  SmileOutline,
+} from 'antd-mobile-icons'
 
 export default () => {
   return (
@@ -35,6 +39,19 @@ export default () => {
         </CheckList>
       </DemoBlock>
 
+      <DemoBlock title='自定义列表右侧区域' padding='0'>
+        <CheckList
+          extra={active =>
+            active ? <CheckCircleFill /> : <CheckCircleOutline />
+          }
+          defaultValue={['B']}
+        >
+          <CheckList.Item value='A'>A</CheckList.Item>
+          <CheckList.Item value='B'>B</CheckList.Item>
+          <CheckList.Item value='C'>C</CheckList.Item>
+        </CheckList>
+      </DemoBlock>
+
       <DemoBlock title='整组只读' padding='0'>
         <CheckList defaultValue={['B']} readOnly>
           <CheckList.Item value='A'>A</CheckList.Item>
diff --git a/src/components/check-list/index.en.md b/src/components/check-list/index.en.md
index cd17abdd1..a1a414da4 100644
--- a/src/components/check-list/index.en.md
+++ b/src/components/check-list/index.en.md
@@ -21,6 +21,7 @@ The bottom layer of `CheckList` is implemented based on `List`, which is a list
 | Name | Description | Type | Default |
 | --- | --- | --- | --- |
 | activeIcon | The icon displayed when selected | `ReactNode` | `<CheckOutline />` |
+| extra | The right area of the list item | `(active: boolean) => ReactNode` | - |
 | defaultValue | The default items | `string[]` | `[]` |
 | disabled | Is the check list disabled | `boolean` | `false` |
 | multiple | Whether to allow multiple selection or not | `boolean` | `false` |
diff --git a/src/components/check-list/index.zh.md b/src/components/check-list/index.zh.md
index 86f668b42..a842d0e6a 100644
--- a/src/components/check-list/index.zh.md
+++ b/src/components/check-list/index.zh.md
@@ -21,6 +21,7 @@
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | activeIcon | 选中图标 | `ReactNode` | `<CheckOutline />` |
+| extra | 列表右侧区域 | `(active: boolean) => ReactNode` | - |
 | defaultValue | 默认项 | `string[]` | `[]` |
 | disabled | 是否禁用 | `boolean` | `false` |
 | multiple | 是否允许多选 | `boolean` | `false` |
diff --git a/src/components/number-keyboard/number-keyboard.tsx b/src/components/number-keyboard/number-keyboard.tsx
index 9168b4f08..13ab5e976 100644
--- a/src/components/number-keyboard/number-keyboard.tsx
+++ b/src/components/number-keyboard/number-keyboard.tsx
@@ -127,7 +127,9 @@ export const NumberKeyboard: React.FC<NumberKeyboardProps> = p => {
         })}
       >
         {'title' && (
-          <div className={`${classPrefix}-title`} aria-label={title}></div>
+          <div className={`${classPrefix}-title`} aria-label={title}>
+            {title}
+          </div>
         )}
         {showCloseButton && (
           <span
@@ -159,7 +161,7 @@ export const NumberKeyboard: React.FC<NumberKeyboardProps> = p => {
       ? {
           role: 'grid',
           title: key,
-          tabindex: -1,
+          tabIndex: -1,
         }
       : undefined
 
diff --git a/src/components/popover/index.en.md b/src/components/popover/index.en.md
index 47ad2f4f3..b9cb1c3e4 100644
--- a/src/components/popover/index.en.md
+++ b/src/components/popover/index.en.md
@@ -49,6 +49,7 @@ In order to maintain compatibility, we still support the use of the old version
 | Name | Description | Default | Global |
 | --- | --- | --- | --- |
 | --z-index | `z-index` of the popover element | `1030` | `--adm-popover-z-index` |
+| --arrow-size | the arrow size of the popover element | `8px` | - |
 
 ### Ref
 
diff --git a/src/components/popover/index.zh.md b/src/components/popover/index.zh.md
index 9f3ed3b14..d28aa5e41 100644
--- a/src/components/popover/index.zh.md
+++ b/src/components/popover/index.zh.md
@@ -46,9 +46,10 @@
 
 ### CSS 变量
 
-| 属性      | 说明             | 默认值 | 全局变量                |
-| --------- | ---------------- | ------ | ----------------------- |
-| --z-index | 元素的 `z-index` | `1030` | `--adm-popover-z-index` |
+| 属性         | 说明             | 默认值 | 全局变量                |
+| ------------ | ---------------- | ------ | ----------------------- |
+| --z-index    | 元素的 `z-index` | `1030` | `--adm-popover-z-index` |
+| --arrow-size | 元素的箭头尺寸   | `8px`  | -                       |
 
 ### Ref
 
diff --git a/src/components/popover/popover.less b/src/components/popover/popover.less
index 84aabf096..67bd4b934 100644
--- a/src/components/popover/popover.less
+++ b/src/components/popover/popover.less
@@ -63,7 +63,7 @@
   &-arrow-icon {
     display: block;
     height: var(--arrow-size);
-    width: 15px;
+    width: calc(var(--arrow-size) / 8 * 15);
     position: absolute;
     top: 50%;
     left: 50%;
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 968818665..036a17b86 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -49,7 +49,7 @@ export type PopoverProps = {
   placement?: Placement | DeprecatedPlacement
   stopPropagation?: PropagationEvent[]
   content: React.ReactNode
-} & NativeProps<'--z-index'>
+} & NativeProps<'--z-index' | '--arrow-size'>
 
 export type PopoverRef = {
   show: () => void
@@ -160,7 +160,7 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
       top: arrowY != null ? `${arrowY}px` : '',
       right: '',
       bottom: '',
-      [arrowSide]: `-${convertPx(8)}px`,
+      [arrowSide]: 'calc(var(--arrow-size) * -1)',
     })
     const arrowRotate = {
       top: '0deg',
diff --git a/src/components/selector/selector.tsx b/src/components/selector/selector.tsx
index f44963e2a..3065a5ed4 100644
--- a/src/components/selector/selector.tsx
+++ b/src/components/selector/selector.tsx
@@ -6,6 +6,7 @@ import Space from '../space'
 import Grid, { GridProps } from '../grid'
 import { usePropsValue } from '../../utils/use-props-value'
 import { CheckMark } from './check-mark'
+import { useConfig } from '../config-provider'
 
 const classPrefix = `adm-selector`
 
@@ -61,6 +62,7 @@ export const Selector = <V extends SelectorValue>(p: SelectorProps<V>) => {
       props.onChange?.(val, extend)
     },
   })
+  const { locale } = useConfig()
 
   const items = props.options.map(option => {
     const active = (value || []).includes(option.value)
@@ -90,7 +92,6 @@ export const Selector = <V extends SelectorValue>(p: SelectorProps<V>) => {
           }
         }}
         role='option'
-        aria-lable={option.description}
         aria-selected={
           (active && !props.multiple) || (active && props.multiple)
         }
@@ -112,7 +113,11 @@ export const Selector = <V extends SelectorValue>(p: SelectorProps<V>) => {
 
   return withNativeProps(
     props,
-    <div className={classPrefix}>
+    <div
+      className={classPrefix}
+      role='listbox'
+      aria-label={locale.Selector.name}
+    >
       {!props.columns && <Space wrap>{items}</Space>}
       {props.columns && <Grid columns={props.columns}>{items}</Grid>}
     </div>
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index 82b102817..9beab2cd1 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -249,6 +249,7 @@ export const Tabs: FC<TabsProps> = p => {
           ref={tabListContainerRef}
           scrollLeft={scrollLeft}
           onScroll={updateMask}
+          role='tablist'
         >
           <animated.div
             ref={activeLineRef}
@@ -284,7 +285,6 @@ export const Tabs: FC<TabsProps> = p => {
                     [`${classPrefix}-tab-disabled`]: pane.props.disabled,
                   })}
                   role='tab'
-                  aria-lable={pane.props.title}
                   aria-selected={pane.key === activeKey}
                 >
                   {pane.props.title}
diff --git a/src/components/virtual-input/virtual-input.tsx b/src/components/virtual-input/virtual-input.tsx
index 3af5552e0..9d493d7cc 100644
--- a/src/components/virtual-input/virtual-input.tsx
+++ b/src/components/virtual-input/virtual-input.tsx
@@ -120,6 +120,7 @@ export const VirtualInput = forwardRef<VirtualInputRef, VirtualInputProps>(
         className={classNames(classPrefix, {
           [`${classPrefix}-disabled`]: props.disabled,
         })}
+        tabIndex={props.disabled ? undefined : 0}
         onFocus={onFocus}
         onBlur={onBlur}
         onClick={props.onClick}
diff --git a/src/locales/base.ts b/src/locales/base.ts
index b659a3cf1..dc22f84b2 100644
--- a/src/locales/base.ts
+++ b/src/locales/base.ts
@@ -129,6 +129,9 @@ export const base = {
   Switch: {
     name: 'Switch',
   },
+  Selector: {
+    name: 'Selector',
+  },
 }
 
 export type Locale = typeof base
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 48247cacd..2721cffb4 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -132,6 +132,9 @@ const zhCN = mergeLocale(base, {
   Switch: {
     name: '开关',
   },
+  Selector: {
+    name: '选择组',
+  },
 })
 
 export default zhCN


Test patch:
diff --git a/src/components/action-sheet/tests/__snapshots__/action-sheet.test.tsx.snap b/src/components/action-sheet/tests/__snapshots__/action-sheet.test.tsx.snap
index f6300ce8f..98507c3d0 100644
--- a/src/components/action-sheet/tests/__snapshots__/action-sheet.test.tsx.snap
+++ b/src/components/action-sheet/tests/__snapshots__/action-sheet.test.tsx.snap
@@ -50,6 +50,7 @@ exports[`ActionSheet basic usage 1`] = `
           >
             <a
               class="adm-plain-anchor adm-action-sheet-button-item"
+              role="option"
             >
               <div
                 class="adm-action-sheet-button-item-name"
@@ -63,6 +64,7 @@ exports[`ActionSheet basic usage 1`] = `
           >
             <a
               class="adm-plain-anchor adm-action-sheet-button-item"
+              role="option"
             >
               <div
                 class="adm-action-sheet-button-item-name"
@@ -76,6 +78,7 @@ exports[`ActionSheet basic usage 1`] = `
           >
             <a
               class="adm-plain-anchor adm-action-sheet-button-item"
+              role="option"
             >
               <div
                 class="adm-action-sheet-button-item-name"
@@ -86,7 +89,9 @@ exports[`ActionSheet basic usage 1`] = `
           </div>
         </div>
         <div
+          aria-label="取消"
           class="adm-action-sheet-cancel"
+          role="option"
         >
           <div
             class="adm-action-sheet-button-item-wrapper"
diff --git a/src/components/cascader-view/tests/__snapshots__/cascader-view.test.tsx.snap b/src/components/cascader-view/tests/__snapshots__/cascader-view.test.tsx.snap
index ec4519b07..fc064bb7b 100644
--- a/src/components/cascader-view/tests/__snapshots__/cascader-view.test.tsx.snap
+++ b/src/components/cascader-view/tests/__snapshots__/cascader-view.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`CascaderView basic usage 1`] = `
         />
         <div
           class="adm-tabs-tab-list"
+          role="tablist"
         >
           <div
             class="adm-tabs-tab-line"
@@ -30,7 +31,9 @@ exports[`CascaderView basic usage 1`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -43,7 +46,9 @@ exports[`CascaderView basic usage 1`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="true"
               class="adm-tabs-tab adm-tabs-tab-active"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -280,6 +285,7 @@ exports[`CascaderView basic usage 2`] = `
         />
         <div
           class="adm-tabs-tab-list"
+          role="tablist"
         >
           <div
             class="adm-tabs-tab-line"
@@ -289,7 +295,9 @@ exports[`CascaderView basic usage 2`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -302,7 +310,9 @@ exports[`CascaderView basic usage 2`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -315,7 +325,9 @@ exports[`CascaderView basic usage 2`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="true"
               class="adm-tabs-tab adm-tabs-tab-active"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -671,6 +683,7 @@ exports[`CascaderView basic usage 3`] = `
         />
         <div
           class="adm-tabs-tab-list"
+          role="tablist"
         >
           <div
             class="adm-tabs-tab-line"
@@ -680,7 +693,9 @@ exports[`CascaderView basic usage 3`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -693,7 +708,9 @@ exports[`CascaderView basic usage 3`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -706,7 +723,9 @@ exports[`CascaderView basic usage 3`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="true"
               class="adm-tabs-tab adm-tabs-tab-active"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -1100,6 +1119,7 @@ exports[`CascaderView controlled mode 1`] = `
         />
         <div
           class="adm-tabs-tab-list"
+          role="tablist"
         >
           <div
             class="adm-tabs-tab-line"
@@ -1109,7 +1129,9 @@ exports[`CascaderView controlled mode 1`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -1122,7 +1144,9 @@ exports[`CascaderView controlled mode 1`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -1135,7 +1159,9 @@ exports[`CascaderView controlled mode 1`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="true"
               class="adm-tabs-tab adm-tabs-tab-active"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -1529,6 +1555,7 @@ exports[`CascaderView same value in options 1`] = `
         />
         <div
           class="adm-tabs-tab-list"
+          role="tablist"
         >
           <div
             class="adm-tabs-tab-line"
@@ -1538,7 +1565,9 @@ exports[`CascaderView same value in options 1`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -1551,7 +1580,9 @@ exports[`CascaderView same value in options 1`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="true"
               class="adm-tabs-tab adm-tabs-tab-active"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -1748,6 +1779,7 @@ exports[`CascaderView same value in options 2`] = `
         />
         <div
           class="adm-tabs-tab-list"
+          role="tablist"
         >
           <div
             class="adm-tabs-tab-line"
@@ -1757,7 +1789,9 @@ exports[`CascaderView same value in options 2`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -1770,7 +1804,9 @@ exports[`CascaderView same value in options 2`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -1783,7 +1819,9 @@ exports[`CascaderView same value in options 2`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="true"
               class="adm-tabs-tab adm-tabs-tab-active"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -2079,6 +2117,7 @@ exports[`CascaderView same value in options 3`] = `
         />
         <div
           class="adm-tabs-tab-list"
+          role="tablist"
         >
           <div
             class="adm-tabs-tab-line"
@@ -2088,7 +2127,9 @@ exports[`CascaderView same value in options 3`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -2101,7 +2142,9 @@ exports[`CascaderView same value in options 3`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="false"
               class="adm-tabs-tab"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
@@ -2114,7 +2157,9 @@ exports[`CascaderView same value in options 3`] = `
             class="adm-tabs-tab-wrapper"
           >
             <div
+              aria-selected="true"
               class="adm-tabs-tab adm-tabs-tab-active"
+              role="tab"
             >
               <div
                 class="adm-cascader-view-header-title"
diff --git a/src/components/check-list/tests/check-list.test.tsx b/src/components/check-list/tests/check-list.test.tsx
index 2f1b669c0..bbdd9bb5e 100644
--- a/src/components/check-list/tests/check-list.test.tsx
+++ b/src/components/check-list/tests/check-list.test.tsx
@@ -63,4 +63,15 @@ describe('CheckList', () => {
 
     expect(container).toMatchSnapshot()
   })
+
+  test('`extra` props', () => {
+    const { getByText } = render(
+      <CheckList extra={active => (active ? 'YES' : 'NO')} defaultValue={['A']}>
+        <CheckList.Item value='A'>A</CheckList.Item>
+        <CheckList.Item value='B'>B</CheckList.Item>
+      </CheckList>
+    )
+    expect(getByText('YES')).toBeVisible()
+    expect(getByText('NO')).toBeVisible()
+  })
 })
diff --git a/src/components/tabs/tests/__snapshots__/tabs.test.tsx.snap b/src/components/tabs/tests/__snapshots__/tabs.test.tsx.snap
index 1891c0e32..e2c2130ce 100644
--- a/src/components/tabs/tests/__snapshots__/tabs.test.tsx.snap
+++ b/src/components/tabs/tests/__snapshots__/tabs.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`Tabs \`activeLineMode\` prop 1`] = `
       />
       <div
         class="adm-tabs-tab-list"
+        role="tablist"
       >
         <div
           class="adm-tabs-tab-line"
@@ -27,7 +28,9 @@ exports[`Tabs \`activeLineMode\` prop 1`] = `
           class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
         >
           <div
+            aria-selected="true"
             class="adm-tabs-tab adm-tabs-tab-active"
+            role="tab"
           >
             fruits
           </div>
@@ -36,7 +39,9 @@ exports[`Tabs \`activeLineMode\` prop 1`] = `
           class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
         >
           <div
+            aria-selected="false"
             class="adm-tabs-tab"
+            role="tab"
           >
             vegetables
           </div>
@@ -45,7 +50,9 @@ exports[`Tabs \`activeLineMode\` prop 1`] = `
           class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
         >
           <div
+            aria-selected="false"
             class="adm-tabs-tab"
+            role="tab"
           >
             animals
           </div>
@@ -80,6 +87,7 @@ exports[`Tabs \`activeLineMode\` prop 2`] = `
       />
       <div
         class="adm-tabs-tab-list"
+        role="tablist"
       >
         <div
           class="adm-tabs-tab-line"
@@ -89,7 +97,9 @@ exports[`Tabs \`activeLineMode\` prop 2`] = `
           class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
         >
           <div
+            aria-selected="true"
             class="adm-tabs-tab adm-tabs-tab-active"
+            role="tab"
           >
             fruits
           </div>
@@ -98,7 +108,9 @@ exports[`Tabs \`activeLineMode\` prop 2`] = `
           class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
         >
           <div
+            aria-selected="false"
             class="adm-tabs-tab"
+            role="tab"
           >
             vegetables
           </div>
@@ -107,7 +119,9 @@ exports[`Tabs \`activeLineMode\` prop 2`] = `
           class="adm-tabs-tab-wrapper adm-tabs-tab-wrapper-stretch"
         >
           <div
+            aria-selected="false"
             class="adm-tabs-tab"
+            role="tab"
           >
             animals
           </div>