From b9b0805d21fe7fc9f027c20bc9868adc78c2b2db Mon Sep 17 00:00:00 2001
From: Rocco <544022268@qq.com>
Date: Fri, 26 Apr 2024 21:00:51 +0800
Subject: [PATCH] feat: improve form control components a11y (#470)

* wip: add aria-labelledby

* wip: date and time

* feat: a11y

* feat: locale
---
 common/config/src/locale/ar-EG.ts          |  56 +++-
 common/config/src/locale/de-DE.ts          |  56 +++-
 common/config/src/locale/en-US.ts          |  56 +++-
 common/config/src/locale/fr-FR.ts          |  56 +++-
 common/config/src/locale/helper.ts         |  60 ++++-
 common/config/src/locale/ta-IN.ts          |  56 +++-
 common/config/src/locale/zh-CN.ts          |  56 +++-
 common/config/src/locale/zh-HK.ts          |  56 +++-
 common/config/src/locale/zh-TW.ts          |  56 +++-
 common/config/src/props.ts                 |  33 ++-
 common/utils/src/date.ts                   |  38 ++-
 common/utils/src/dom.ts                    |  10 +-
 components/auto-complete/auto-complete.vue |   2 +
 components/calendar/calendar-cell.vue      |   2 +-
 components/captcha/captcha-slider.vue      |   4 +-
 components/captcha/captcha.tsx             |  11 +-
 components/cascader/cascader-panel.vue     |   8 +-
 components/cascader/cascader.vue           |  21 +-
 components/checkbox/checkbox-group.vue     |  21 +-
 components/checkbox/checkbox.vue           |  15 +-
 components/color-picker/color-alpha.vue    |   7 +-
 components/color-picker/color-hue.vue      |   7 +-
 components/color-picker/color-palette.vue  |   5 +-
 components/color-picker/color-picker.vue   |  17 +-
 components/date-picker/date-control.vue    | 113 +++++++-
 components/date-picker/date-panel.vue      |   9 +-
 components/date-picker/date-picker.vue     |  30 ++-
 components/date-picker/time-control.vue    |  57 +++-
 components/date-picker/time-picker.vue     |  23 +-
 components/form/form-item.vue              |  14 +-
 components/form/helper.ts                  |   6 +-
 components/form/symbol.ts                  |   1 +
 components/input/input.tsx                 |  12 +-
 components/number-input/number-input.vue   |  25 +-
 components/number-input/props.ts           |   2 +-
 components/option/option-group.vue         |  28 +-
 components/option/option.vue               |  71 +++--
 components/popper/popper.vue               |   8 +-
 components/popper/props.ts                 |   1 +
 components/progress/progress.vue           | 222 +++++++---------
 components/progress/symbol.ts              |   9 +
 components/radio/radio-group.vue           |  21 +-
 components/select/select.vue               |  35 ++-
 components/slider/slider.vue               |   4 +-
 components/switch/switch.vue               | 286 ++++++++++-----------
 components/textarea/textarea.vue           |   3 +-
 components/tooltip/tooltip.tsx             |  41 +--
 components/transfer/transfer.tsx           |  19 +-
 components/upload/upload-file.vue          |   3 +
 components/upload/upload.tsx               | 185 ++++++-------
 components/wheel/wheel-item.vue            | 143 +++++------
 components/wheel/wheel.vue                 |   8 +-
 style/cascader.scss                        |   4 +
 style/color-picker.scss                    |   4 +
 style/date-picker.scss                     |   4 +
 style/input.scss                           |   4 +
 style/number-input.scss                    |   4 +
 style/select.scss                          |   8 +-
 style/shared/mixins.scss                   |   9 +
 style/time-picker.scss                     |   4 +
 style/upload.scss                          |  20 +-
 61 files changed, 1458 insertions(+), 691 deletions(-)

diff --git a/common/config/src/locale/ar-EG.ts b/common/config/src/locale/ar-EG.ts
index 121ba4c93..c6ebd4c25 100644
--- a/common/config/src/locale/ar-EG.ts
+++ b/common/config/src/locale/ar-EG.ts
@@ -31,7 +31,9 @@ export function arEGLocale() {
       week6: 'Sa',
       week7: 'Su',
 
-      label: {
+      ariaLabel: {
+        year: 'سنة',
+        month: 'شهر',
         month1: 'يناير',
         month2: 'فبراير',
         month3: 'مارس',
@@ -71,7 +73,11 @@ export function arEGLocale() {
 
     colorPicker: {
       confirm: 'موافق',
-      cancel: 'الغاء'
+      cancel: 'الغاء',
+
+      ariaLabel: {
+        clear: 'مسح اللون'
+      }
     },
 
     confirm: {
@@ -92,7 +98,17 @@ export function arEGLocale() {
         select: 'اختر'
       },
       startTime: 'وقت البدء',
-      endTime: 'وقت الانتهاء'
+      endTime: 'وقت الانتهاء',
+
+      ariaLabel: {
+        clear: 'مسح التاريخ',
+        quarter: 'ربع',
+        week: 'أسبوع',
+        date: 'يوم',
+        hour: 'ساعة',
+        minute: 'دقيقة',
+        second: 'ثانية'
+      }
     },
 
     drawer: {
@@ -113,7 +129,11 @@ export function arEGLocale() {
     },
 
     input: {
-      placeholder: 'ادخل بيانات'
+      placeholder: 'ادخل بيانات',
+
+      ariaLabel: {
+        clear: 'مسح البيانات'
+      }
     },
 
     layout: {
@@ -130,7 +150,13 @@ export function arEGLocale() {
 
     numberInput: {
       placeholder: 'ادخل قيم رقمية',
-      outOfRange: 'خارج النطاق'
+      outOfRange: 'خارج النطاق',
+
+      ariaLabel: {
+        clear: 'مسح الرقم',
+        increase: 'زيادة',
+        decrease: 'نقص'
+      }
     },
 
     pagination: {
@@ -147,7 +173,11 @@ export function arEGLocale() {
 
     select: {
       placeholder: 'اختر',
-      empty: 'لا توجد بيانات'
+      empty: 'لا توجد بيانات',
+
+      ariaLabel: {
+        clear: 'مسح الاختيار'
+      }
     },
 
     table: {
@@ -180,6 +210,13 @@ export function arEGLocale() {
         start: 'يبدأ بـ',
         end: 'ينتهى بـ',
         select: 'اختر'
+      },
+
+      ariaLabel: {
+        clear: 'مسح الوقت',
+        hour: 'ساعة',
+        minute: 'دقيقة',
+        second: 'ثانية'
       }
     },
 
@@ -205,7 +242,12 @@ export function arEGLocale() {
     upload: {
       upload: 'تحميل ملفات',
       uploading: 'جار التحميل',
-      dragOrClick: 'اسحب وضع الملقات هنا, او اضغط تحميل ملفات'
+      dragOrClick: 'اسحب وضع الملقات هنا, او اضغط تحميل ملفات',
+
+      ariaLabel: {
+        preview: 'معاينة الملفات',
+        delete: 'حذف الملفات'
+      }
     },
 
     video: {
diff --git a/common/config/src/locale/de-DE.ts b/common/config/src/locale/de-DE.ts
index 4f008a6a4..0bf66bbac 100644
--- a/common/config/src/locale/de-DE.ts
+++ b/common/config/src/locale/de-DE.ts
@@ -31,7 +31,9 @@ export function deDELocale() {
       week6: 'Sa',
       week7: 'So',
 
-      label: {
+      ariaLabel: {
+        year: 'Jahr',
+        month: 'Monat',
         month1: 'Januar',
         month2: 'Februar',
         month3: 'März',
@@ -71,7 +73,11 @@ export function deDELocale() {
 
     colorPicker: {
       confirm: 'Bestätigen',
-      cancel: 'Abbrechen'
+      cancel: 'Abbrechen',
+
+      ariaLabel: {
+        clear: 'Farbe löschen'
+      }
     },
 
     confirm: {
@@ -92,7 +98,17 @@ export function deDELocale() {
         select: 'Bitte auswählen'
       },
       startTime: 'Start Zeit',
-      endTime: 'Ende Zeit'
+      endTime: 'Ende Zeit',
+
+      ariaLabel: {
+        clear: 'Datum löschen',
+        quarter: 'Quartal',
+        week: 'Woche',
+        date: 'Tag',
+        hour: 'Stunde',
+        minute: 'Minute',
+        second: 'Sekunde'
+      }
     },
 
     drawer: {
@@ -113,7 +129,11 @@ export function deDELocale() {
     },
 
     input: {
-      placeholder: 'Platzhalter'
+      placeholder: 'Platzhalter',
+
+      ariaLabel: {
+        clear: 'Löschen'
+      }
     },
 
     layout: {
@@ -130,7 +150,13 @@ export function deDELocale() {
 
     numberInput: {
       placeholder: 'Bitte Nummer eingeben',
-      outOfRange: 'Außerhalb des definierten Bereichs'
+      outOfRange: 'Außerhalb des definierten Bereichs',
+
+      ariaLabel: {
+        clear: 'Löschen',
+        increase: 'Erhöhen',
+        decrease: 'Verringern'
+      }
     },
 
     pagination: {
@@ -147,7 +173,11 @@ export function deDELocale() {
 
     select: {
       placeholder: 'Bitte auswählen',
-      empty: 'Keine Daten'
+      empty: 'Keine Daten',
+
+      ariaLabel: {
+        clear: 'Löschen'
+      }
     },
 
     table: {
@@ -180,6 +210,13 @@ export function deDELocale() {
         start: 'Start',
         end: 'Ende',
         select: 'Bitte auswählen'
+      },
+
+      ariaLabel: {
+        clear: 'Zeit löschen',
+        hour: 'Stunde',
+        minute: 'Minute',
+        second: 'Sekunde'
       }
     },
 
@@ -205,7 +242,12 @@ export function deDELocale() {
     upload: {
       upload: 'Dateiupload',
       uploading: 'Hochladen',
-      dragOrClick: 'Ziehen Sie Dateien hierher oder klicken Sie zum Hochladen'
+      dragOrClick: 'Ziehen Sie Dateien hierher oder klicken Sie zum Hochladen',
+
+      ariaLabel: {
+        preview: 'Dateivorschau',
+        delete: 'Datei löschen'
+      }
     },
 
     video: {
diff --git a/common/config/src/locale/en-US.ts b/common/config/src/locale/en-US.ts
index 5ba08799c..0b181f103 100644
--- a/common/config/src/locale/en-US.ts
+++ b/common/config/src/locale/en-US.ts
@@ -31,7 +31,9 @@ export function enUSLocale() {
       week6: 'Sa',
       week7: 'Su',
 
-      label: {
+      ariaLabel: {
+        year: 'Year',
+        month: 'Month',
         month1: 'January',
         month2: 'February',
         month3: 'March',
@@ -71,7 +73,11 @@ export function enUSLocale() {
 
     colorPicker: {
       confirm: 'Confirm',
-      cancel: 'Cancel'
+      cancel: 'Cancel',
+
+      ariaLabel: {
+        clear: 'Clear color'
+      }
     },
 
     confirm: {
@@ -92,7 +98,17 @@ export function enUSLocale() {
         select: 'Please select'
       },
       startTime: 'Start Time',
-      endTime: 'End Time'
+      endTime: 'End Time',
+
+      ariaLabel: {
+        clear: 'Clear date',
+        quarter: 'Quarter',
+        week: 'Week',
+        date: 'Date',
+        hour: 'Hour',
+        minute: 'Minute',
+        second: 'Second'
+      }
     },
 
     drawer: {
@@ -113,7 +129,11 @@ export function enUSLocale() {
     },
 
     input: {
-      placeholder: 'Please input'
+      placeholder: 'Please input',
+
+      ariaLabel: {
+        clear: 'Clear input'
+      }
     },
 
     layout: {
@@ -130,7 +150,13 @@ export function enUSLocale() {
 
     numberInput: {
       placeholder: 'Please input number',
-      outOfRange: 'Out of range'
+      outOfRange: 'Out of range',
+
+      ariaLabel: {
+        clear: 'Clear number',
+        increase: 'Increase',
+        decrease: 'Decrease'
+      }
     },
 
     pagination: {
@@ -147,7 +173,11 @@ export function enUSLocale() {
 
     select: {
       placeholder: 'Please select',
-      empty: 'No data'
+      empty: 'No data',
+
+      ariaLabel: {
+        clear: 'Clear select'
+      }
     },
 
     table: {
@@ -180,6 +210,13 @@ export function enUSLocale() {
         start: 'Start',
         end: 'End',
         select: 'Please select'
+      },
+
+      ariaLabel: {
+        clear: 'Clear time',
+        hour: 'Hour',
+        minute: 'Minute',
+        second: 'Second'
       }
     },
 
@@ -205,7 +242,12 @@ export function enUSLocale() {
     upload: {
       upload: 'Upload files',
       uploading: 'Uploading',
-      dragOrClick: 'Drag files here, or click to upload'
+      dragOrClick: 'Drag files here, or click to upload',
+
+      ariaLabel: {
+        preview: 'Preview file',
+        delete: 'Delete file'
+      }
     },
 
     video: {
diff --git a/common/config/src/locale/fr-FR.ts b/common/config/src/locale/fr-FR.ts
index 01a21eb70..17dc5f1ef 100644
--- a/common/config/src/locale/fr-FR.ts
+++ b/common/config/src/locale/fr-FR.ts
@@ -31,7 +31,9 @@ export function frFRLocale() {
       week6: 'Sa',
       week7: 'Di',
 
-      label: {
+      ariaLabel: {
+        year: 'Année',
+        month: 'Mois',
         month1: 'Janvier',
         month2: 'Février',
         month3: 'Mars',
@@ -71,7 +73,11 @@ export function frFRLocale() {
 
     colorPicker: {
       confirm: 'Confirmer',
-      cancel: 'Annuler'
+      cancel: 'Annuler',
+
+      ariaLabel: {
+        clear: 'Effacer la couleur'
+      }
     },
 
     confirm: {
@@ -92,7 +98,17 @@ export function frFRLocale() {
         select: 'Sélectionner une'
       },
       startTime: 'Heure de début',
-      endTime: 'Heure de fin'
+      endTime: 'Heure de fin',
+
+      ariaLabel: {
+        clear: 'Effacer la date',
+        quarter: 'Trimestre',
+        week: 'Semaine',
+        date: 'Jour',
+        hour: 'Heure',
+        minute: 'Minute',
+        second: 'Seconde'
+      }
     },
 
     drawer: {
@@ -113,7 +129,11 @@ export function frFRLocale() {
     },
 
     input: {
-      placeholder: 'Veuillez saisir'
+      placeholder: 'Veuillez saisir',
+
+      ariaLabel: {
+        clear: 'Effacer le texte'
+      }
     },
 
     layout: {
@@ -130,7 +150,13 @@ export function frFRLocale() {
 
     numberInput: {
       placeholder: 'Veuillez saisir le numéro',
-      outOfRange: 'En dehors de la zone définie'
+      outOfRange: 'En dehors de la zone définie',
+
+      ariaLabel: {
+        clear: 'Effacer le numéro',
+        increase: 'Augmenter',
+        decrease: 'Diminuer'
+      }
     },
 
     pagination: {
@@ -147,7 +173,11 @@ export function frFRLocale() {
 
     select: {
       placeholder: 'Veuillez sélectionner',
-      empty: 'Pas de données'
+      empty: 'Pas de données',
+
+      ariaLabel: {
+        clear: 'Effacer la sélection'
+      }
     },
 
     table: {
@@ -180,6 +210,13 @@ export function frFRLocale() {
         start: 'Début',
         end: 'Fin',
         select: 'Veuillez sélectionner'
+      },
+
+      ariaLabel: {
+        clear: "Effacer l'heure",
+        hour: 'Heure',
+        minute: 'Minute',
+        second: 'Seconde'
       }
     },
 
@@ -205,7 +242,12 @@ export function frFRLocale() {
     upload: {
       upload: 'Télécharger des fichiers',
       uploading: 'Téléchargement',
-      dragOrClick: 'Faites glisser les fichiers ici, ou cliquez pour les télécharger'
+      dragOrClick: 'Faites glisser les fichiers ici, ou cliquez pour les télécharger',
+
+      ariaLabel: {
+        preview: 'Aperçu du fichier',
+        delete: 'Supprimer le fichier'
+      }
     },
 
     video: {
diff --git a/common/config/src/locale/helper.ts b/common/config/src/locale/helper.ts
index 82c47118b..17aef7764 100644
--- a/common/config/src/locale/helper.ts
+++ b/common/config/src/locale/helper.ts
@@ -3,7 +3,9 @@ import type { DeepPartial } from '../types'
 export interface LocaleConfig {
   locale: string,
 
-  // if false, the spaces will be removed when make sentence
+  /**
+   * if false, the spaces will be removed when make sentence
+   */
   wordSpace: boolean,
 
   calendar: {
@@ -29,7 +31,9 @@ export interface LocaleConfig {
     week6: string,
     week7: string,
 
-    label: {
+    ariaLabel: {
+      year: string,
+      month: string,
       month1: string,
       month2: string,
       month3: string,
@@ -69,7 +73,11 @@ export interface LocaleConfig {
 
   colorPicker: {
     confirm: string,
-    cancel: string
+    cancel: string,
+
+    ariaLabel: {
+      clear: string
+    }
   },
 
   confirm: {
@@ -90,7 +98,17 @@ export interface LocaleConfig {
       select: string
     },
     startTime: string,
-    endTime: string
+    endTime: string,
+
+    ariaLabel: {
+      clear: string,
+      quarter: string,
+      week: string,
+      date: string,
+      hour: string,
+      minute: string,
+      second: string
+    }
   },
 
   drawer: {
@@ -111,7 +129,11 @@ export interface LocaleConfig {
   },
 
   input: {
-    placeholder: string
+    placeholder: string,
+
+    ariaLabel: {
+      clear: string
+    }
   },
 
   layout: {
@@ -128,7 +150,13 @@ export interface LocaleConfig {
 
   numberInput: {
     placeholder: string,
-    outOfRange: string
+    outOfRange: string,
+
+    ariaLabel: {
+      clear: string,
+      increase: string,
+      decrease: string
+    }
   },
 
   pagination: {
@@ -145,7 +173,11 @@ export interface LocaleConfig {
 
   select: {
     placeholder: string,
-    empty: string
+    empty: string,
+
+    ariaLabel: {
+      clear: string
+    }
   },
 
   table: {
@@ -178,6 +210,13 @@ export interface LocaleConfig {
       start: string,
       end: string,
       select: string
+    },
+
+    ariaLabel: {
+      clear: string,
+      hour: string,
+      minute: string,
+      second: string
     }
   },
 
@@ -203,7 +242,12 @@ export interface LocaleConfig {
   upload: {
     upload: string,
     uploading: string,
-    dragOrClick: string
+    dragOrClick: string,
+
+    ariaLabel: {
+      preview: string,
+      delete: string
+    }
   },
 
   video: {
diff --git a/common/config/src/locale/ta-IN.ts b/common/config/src/locale/ta-IN.ts
index 65d234f98..676adcdab 100644
--- a/common/config/src/locale/ta-IN.ts
+++ b/common/config/src/locale/ta-IN.ts
@@ -31,7 +31,9 @@ export function taINLocale() {
       week6: 'Sa',
       week7: 'Su',
 
-      label: {
+      ariaLabel: {
+        year: 'ஆண்டு',
+        month: 'மாதம்',
         month1: 'ஜனவரி',
         month2: 'பிப்ரவரி',
         month3: 'மார்ச்',
@@ -71,7 +73,11 @@ export function taINLocale() {
 
     colorPicker: {
       confirm: 'உறுதிபடுத்து',
-      cancel: 'நிராகரி'
+      cancel: 'நிராகரி',
+
+      ariaLabel: {
+        clear: 'தெளிவாக்கு'
+      }
     },
 
     confirm: {
@@ -92,7 +98,17 @@ export function taINLocale() {
         select: 'தயவுசெய்து தேர்ந்தெடுக்கவும்'
       },
       startTime: 'தொடக்கம் நேரம்',
-      endTime: 'முடிவு நேரம்'
+      endTime: 'முடிவு நேரம்',
+
+      ariaLabel: {
+        clear: 'தெளிவாக்கு',
+        quarter: 'பருவம்',
+        week: 'வாரம்',
+        date: 'தேதி',
+        hour: 'மணி',
+        minute: 'நிமிடம்',
+        second: 'வினாடி'
+      }
     },
 
     drawer: {
@@ -113,7 +129,11 @@ export function taINLocale() {
     },
 
     input: {
-      placeholder: 'தயவுசெய்து உள்ளிடவும்'
+      placeholder: 'தயவுசெய்து உள்ளிடவும்',
+
+      ariaLabel: {
+        clear: 'தெளிவாக்கு'
+      }
     },
 
     layout: {
@@ -130,7 +150,13 @@ export function taINLocale() {
 
     numberInput: {
       placeholder: 'தயவுசெய்து எண் உள்ளிடவும்',
-      outOfRange: 'வரம்புக்கு வெளியே'
+      outOfRange: 'வரம்புக்கு வெளியே',
+
+      ariaLabel: {
+        clear: 'தெளிவாக்கு',
+        increase: 'அதிகரிக்க',
+        decrease: 'குறைக்க'
+      }
     },
 
     pagination: {
@@ -147,7 +173,11 @@ export function taINLocale() {
 
     select: {
       placeholder: 'தயவுசெய்து தேர்ந்தெடுகக்கவும்',
-      empty: 'தரவு இல்லை'
+      empty: 'தரவு இல்லை',
+
+      ariaLabel: {
+        clear: 'தெளிவாக்கு'
+      }
     },
 
     table: {
@@ -180,6 +210,13 @@ export function taINLocale() {
         start: 'தொடக்கம்',
         end: 'முடிவு',
         select: 'தயவுசெய்து தேர்ந்தெடுக்கவும்'
+      },
+
+      ariaLabel: {
+        clear: 'தெளிவாக்கு',
+        hour: 'மணி',
+        minute: 'நிமிடம்',
+        second: 'வினாடி'
       }
     },
 
@@ -205,7 +242,12 @@ export function taINLocale() {
     upload: {
       upload: 'கோப்புகளை பதிவேற்று',
       uploading: 'பதிவேற்றுகிறது...',
-      dragOrClick: 'கோப்புகளை இங்கே விடவும் அல்லது பதிவேற்ற அழுத்தவும்'
+      dragOrClick: 'கோப்புகளை இங்கே விடவும் அல்லது பதிவேற்ற அழுத்தவும்',
+
+      ariaLabel: {
+        preview: 'முன்னோட்டம்',
+        delete: 'கோப்பை நீக்கு'
+      }
     },
 
     video: {
diff --git a/common/config/src/locale/zh-CN.ts b/common/config/src/locale/zh-CN.ts
index a91b7ec81..1e1a8c224 100644
--- a/common/config/src/locale/zh-CN.ts
+++ b/common/config/src/locale/zh-CN.ts
@@ -31,7 +31,9 @@ export function zhCNLocale() {
       week6: '六',
       week7: '日',
 
-      label: {
+      ariaLabel: {
+        year: '年',
+        month: '月',
         month1: '一月',
         month2: '二月',
         month3: '三月',
@@ -71,7 +73,11 @@ export function zhCNLocale() {
 
     colorPicker: {
       confirm: '确定',
-      cancel: '重置'
+      cancel: '重置',
+
+      ariaLabel: {
+        clear: '清空颜色'
+      }
     },
 
     confirm: {
@@ -92,7 +98,17 @@ export function zhCNLocale() {
         select: '请选择'
       },
       startTime: '开始时间',
-      endTime: '结束时间'
+      endTime: '结束时间',
+
+      ariaLabel: {
+        clear: '清空日期',
+        quarter: '季度',
+        week: '周',
+        date: '日',
+        hour: '时',
+        minute: '分',
+        second: '秒'
+      }
     },
 
     drawer: {
@@ -113,7 +129,11 @@ export function zhCNLocale() {
     },
 
     input: {
-      placeholder: '请输入'
+      placeholder: '请输入',
+
+      ariaLabel: {
+        clear: '清空文本'
+      }
     },
 
     layout: {
@@ -130,7 +150,13 @@ export function zhCNLocale() {
 
     numberInput: {
       placeholder: '请输入数字',
-      outOfRange: '超出范围'
+      outOfRange: '超出范围',
+
+      ariaLabel: {
+        clear: '清空数字',
+        increase: '增加',
+        decrease: '减少'
+      }
     },
 
     pagination: {
@@ -147,7 +173,11 @@ export function zhCNLocale() {
 
     select: {
       placeholder: '请选择',
-      empty: '暂无数据'
+      empty: '暂无数据',
+
+      ariaLabel: {
+        clear: '清空选项'
+      }
     },
 
     table: {
@@ -180,6 +210,13 @@ export function zhCNLocale() {
         start: '开始',
         end: '结束',
         select: '请选择'
+      },
+
+      ariaLabel: {
+        clear: '清空时间',
+        hour: '时',
+        minute: '分',
+        second: '秒'
       }
     },
 
@@ -205,7 +242,12 @@ export function zhCNLocale() {
     upload: {
       upload: '上传文件',
       uploading: '上传中',
-      dragOrClick: '将文件拖到此处, 或点击上传'
+      dragOrClick: '将文件拖到此处, 或点击上传',
+
+      ariaLabel: {
+        preview: '预览文件',
+        delete: '删除文件'
+      }
     },
 
     video: {
diff --git a/common/config/src/locale/zh-HK.ts b/common/config/src/locale/zh-HK.ts
index 64de35345..2827c354a 100644
--- a/common/config/src/locale/zh-HK.ts
+++ b/common/config/src/locale/zh-HK.ts
@@ -31,7 +31,9 @@ export function zhHKLocale() {
       week6: '六',
       week7: '日',
 
-      label: {
+      ariaLabel: {
+        year: '年',
+        month: '月',
         month1: '一月',
         month2: '二月',
         month3: '三月',
@@ -71,7 +73,11 @@ export function zhHKLocale() {
 
     colorPicker: {
       confirm: '確定',
-      cancel: '重置'
+      cancel: '重置',
+
+      ariaLabel: {
+        clear: '清空顏色'
+      }
     },
 
     confirm: {
@@ -92,7 +98,17 @@ export function zhHKLocale() {
         select: '請選擇'
       },
       startTime: '開始時間',
-      endTime: '結束時間'
+      endTime: '結束時間',
+
+      ariaLabel: {
+        clear: '清空日期',
+        quarter: '季度',
+        week: '周',
+        date: '日',
+        hour: '時',
+        minute: '分',
+        second: '秒'
+      }
     },
 
     drawer: {
@@ -113,7 +129,11 @@ export function zhHKLocale() {
     },
 
     input: {
-      placeholder: '請輸入'
+      placeholder: '請輸入',
+
+      ariaLabel: {
+        clear: '清空文本'
+      }
     },
 
     layout: {
@@ -130,7 +150,13 @@ export function zhHKLocale() {
 
     numberInput: {
       placeholder: '請輸入數字',
-      outOfRange: '超出範圍'
+      outOfRange: '超出範圍',
+
+      ariaLabel: {
+        clear: '清空數字',
+        increase: '增加',
+        decrease: '減少'
+      }
     },
 
     pagination: {
@@ -147,7 +173,11 @@ export function zhHKLocale() {
 
     select: {
       placeholder: '請選擇',
-      empty: '暫無數據'
+      empty: '暫無數據',
+
+      ariaLabel: {
+        clear: '清空選項'
+      }
     },
 
     table: {
@@ -180,6 +210,13 @@ export function zhHKLocale() {
         start: '開始',
         end: '結束',
         select: '請選擇'
+      },
+
+      ariaLabel: {
+        clear: '清空時間',
+        hour: '時',
+        minute: '分',
+        second: '秒'
       }
     },
 
@@ -205,7 +242,12 @@ export function zhHKLocale() {
     upload: {
       upload: '上傳文件',
       uploading: '上傳中',
-      dragOrClick: '將文件拖到此處, 或點擊上傳'
+      dragOrClick: '將文件拖到此處, 或點擊上傳',
+
+      ariaLabel: {
+        preview: '預覽文件',
+        delete: '刪除文件'
+      }
     },
 
     video: {
diff --git a/common/config/src/locale/zh-TW.ts b/common/config/src/locale/zh-TW.ts
index f89bd6df2..7d0d49cbd 100644
--- a/common/config/src/locale/zh-TW.ts
+++ b/common/config/src/locale/zh-TW.ts
@@ -31,7 +31,9 @@ export function zhTWLocale() {
       week6: '六',
       week7: '日',
 
-      label: {
+      ariaLabel: {
+        year: '年',
+        month: '月',
         month1: '一月',
         month2: '二月',
         month3: '三月',
@@ -71,7 +73,11 @@ export function zhTWLocale() {
 
     colorPicker: {
       confirm: '確定',
-      cancel: '重置'
+      cancel: '重置',
+
+      ariaLabel: {
+        clear: '清除顏色'
+      }
     },
 
     confirm: {
@@ -92,7 +98,17 @@ export function zhTWLocale() {
         select: '請選擇'
       },
       startTime: '開始時間',
-      endTime: '結束時間'
+      endTime: '結束時間',
+
+      ariaLabel: {
+        clear: '清除日期',
+        quarter: '季度',
+        week: '周',
+        date: '日',
+        hour: '時',
+        minute: '分',
+        second: '秒'
+      }
     },
 
     drawer: {
@@ -113,7 +129,11 @@ export function zhTWLocale() {
     },
 
     input: {
-      placeholder: '請輸入'
+      placeholder: '請輸入',
+
+      ariaLabel: {
+        clear: '清空內容'
+      }
     },
 
     layout: {
@@ -130,7 +150,13 @@ export function zhTWLocale() {
 
     numberInput: {
       placeholder: '請輸入數字',
-      outOfRange: '超出範圍'
+      outOfRange: '超出範圍',
+
+      ariaLabel: {
+        clear: '清空數字',
+        increase: '增加',
+        decrease: '減少'
+      }
     },
 
     pagination: {
@@ -147,7 +173,11 @@ export function zhTWLocale() {
 
     select: {
       placeholder: '請選擇',
-      empty: '暫無資料'
+      empty: '暫無資料',
+
+      ariaLabel: {
+        clear: '清空選項'
+      }
     },
 
     table: {
@@ -180,6 +210,13 @@ export function zhTWLocale() {
         start: '開始',
         end: '結束',
         select: '請選擇'
+      },
+
+      ariaLabel: {
+        clear: '清除時間',
+        hour: '時',
+        minute: '分',
+        second: '秒'
       }
     },
 
@@ -205,7 +242,12 @@ export function zhTWLocale() {
     upload: {
       upload: '上傳檔案',
       uploading: '上傳中',
-      dragOrClick: '將檔案拖到此處, 或點選上傳'
+      dragOrClick: '將檔案拖到此處, 或點選上傳',
+
+      ariaLabel: {
+        preview: '預覽檔案',
+        delete: '刪除檔案'
+      }
     },
 
     video: {
diff --git a/common/config/src/props.ts b/common/config/src/props.ts
index 893cb48af..5d3c0130f 100644
--- a/common/config/src/props.ts
+++ b/common/config/src/props.ts
@@ -166,6 +166,21 @@ export function useProps<T extends Record<string, any>>(
   }
 }
 
+export function useHookProps<T extends Record<any, any>>(
+  props: T,
+  defaults: { [K in keyof T]: T[K] | null }
+) {
+  const propsWithDefault: { [P in keyof T]?: ComputedRef<T[P]> } = {}
+
+  for (const key of Object.keys(props) as (keyof T)[]) {
+    propsWithDefault[key] = computed(() => props[key] ?? defaults[key]!)
+  }
+
+  return reactive(propsWithDefault) as {
+    [P in keyof T]-?: Exclude<T[P], undefined>
+  }
+}
+
 function toWarnPrefix(name: string) {
   return `[vexip-ui:${name.charAt(0).toLocaleUpperCase() + name.substring(1)}]`
 }
@@ -343,13 +358,12 @@ type GenerateEvent<T extends any[], Others extends any[], R = any> = T extends u
  *  | ((value: boolean) => void)
  * ```
  */
-export type EventListener<T extends AnyFunction> = Expand<
-  ForceBooleanDeep<SplitAndCombo<Parameters<T>[0]>>
-> extends infer F extends any[]
-  ? Parameters<T> extends [unknown, ...infer Others]
-    ? GenerateEvent<F, Others, ReturnType<T>>
-    : GenerateEvent<F, never, ReturnType<T>>
-  : never
+export type EventListener<T extends AnyFunction> =
+  Expand<ForceBooleanDeep<SplitAndCombo<Parameters<T>[0]>>> extends infer F extends any[]
+    ? Parameters<T> extends [unknown, ...infer Others]
+      ? GenerateEvent<F, Others, ReturnType<T>>
+      : GenerateEvent<F, never, ReturnType<T>>
+    : never
 
 const eventTypes = [Function, Array]
 
@@ -357,7 +371,10 @@ export function eventProp<F extends AnyFunction = VoidFunction>() {
   return eventTypes as PropType<MaybeArray<F>>
 }
 
-export function emitEvent<A extends any[]>(handlers: MaybeArray<(...args: A) => void>, ...args: A) {
+export function emitEvent<A extends any[]>(
+  handlers: MaybeArray<(...args: A) => void> | undefined,
+  ...args: A
+) {
   if (Array.isArray(handlers)) {
     for (let i = 0, len = handlers.length; i < len; ++i) {
       const handler = handlers[i]
diff --git a/common/utils/src/date.ts b/common/utils/src/date.ts
index c28fc06a2..2e12f83aa 100644
--- a/common/utils/src/date.ts
+++ b/common/utils/src/date.ts
@@ -507,21 +507,15 @@ export function isLeapYear(year: number) {
 }
 
 /**
- * 获取给定的日期所在月份的第一天的开始日期
+ * 获取给定年份和月份的最后一天
  *
- * @param date 原始日期
- * @param startOn 设定一个月的第一天，默认为 1 号
+ * @param year 原始年份
+ * @param month 原始月份
  *
- * @returns 新的开始日期
+ * @returns 最后一天
  */
-export function startOfMonth(date: Dateable, startOn = 1) {
-  date = toDate(date)
-
-  const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
-
-  let lastDay
+export function getLastDayOfMonth(year: number, month: number) {
+  let lastDay: number
 
   if (month < 7) {
     if (month !== 2) {
@@ -537,6 +531,26 @@ export function startOfMonth(date: Dateable, startOn = 1) {
     lastDay = 31 - (month % 2)
   }
 
+  return lastDay
+}
+
+/**
+ * 获取给定的日期所在月份的第一天的开始日期
+ *
+ * @param date 原始日期
+ * @param startOn 设定一个月的第一天，默认为 1 号
+ *
+ * @returns 新的开始日期
+ */
+export function startOfMonth(date: Dateable, startOn = 1) {
+  date = toDate(date)
+
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+
+  const lastDay = getLastDayOfMonth(year, month)
+
   startOn = startOn % lastDay
 
   if (startOn < 0) {
diff --git a/common/utils/src/dom.ts b/common/utils/src/dom.ts
index b2e596fde..2d668ff69 100644
--- a/common/utils/src/dom.ts
+++ b/common/utils/src/dom.ts
@@ -1,4 +1,4 @@
-import { isClient } from './common'
+import { isClient, isDefined } from './common'
 import { isValidNumber, toNumber } from './number'
 
 import type { TransferNode } from './dom-event'
@@ -270,8 +270,8 @@ export function toCssSize(value: number | string) {
  *
  * @returns 转换后的 HTML 属性值
  */
-export function toAttrValue(value: boolean): 'true' | undefined
-export function toAttrValue(value: string | number): string | undefined
-export function toAttrValue(value: string | number | boolean) {
-  return value !== false ? String(value) : undefined
+export function toAttrValue(value?: boolean | null): 'true' | undefined
+export function toAttrValue(value?: string | number | null): string | undefined
+export function toAttrValue(value?: string | number | boolean | null) {
+  return isDefined(value) && value !== false ? String(value) : undefined
 }
diff --git a/components/auto-complete/auto-complete.vue b/components/auto-complete/auto-complete.vue
index 59241fe6c..28d51c380 100644
--- a/components/auto-complete/auto-complete.vue
+++ b/components/auto-complete/auto-complete.vue
@@ -32,6 +32,7 @@ const control = ref<HTMLInputElement>()
 
 const {
   idFor,
+  labelId,
   state,
   disabled,
   loading,
@@ -452,6 +453,7 @@ function handleCompositionEnd() {
     v-model:visible="currentVisible"
     :class="[nh.b(), props.inherit && nh.bm('inherit')]"
     :inherit="props.inherit"
+    :label-id="labelId"
     :list-class="nh.be('list')"
     :value="currentValue"
     :size="props.size"
diff --git a/components/calendar/calendar-cell.vue b/components/calendar/calendar-cell.vue
index 253c0224a..da61c7794 100644
--- a/components/calendar/calendar-cell.vue
+++ b/components/calendar/calendar-cell.vue
@@ -66,7 +66,7 @@ defineSlots<{
 const nh = useNameHelper('calendar')
 
 const label = computed(() => {
-  const label = props.locale.label
+  const label = props.locale.ariaLabel
   const year = props.date.getFullYear()
   const month = (props.date.getMonth() + 1) as MonthIndex
   const day = props.date.getDate()
diff --git a/components/captcha/captcha-slider.vue b/components/captcha/captcha-slider.vue
index a8548ca07..5fbe0bb58 100644
--- a/components/captcha/captcha-slider.vue
+++ b/components/captcha/captcha-slider.vue
@@ -19,7 +19,7 @@ import { captchaSliderProps } from './props'
 
 defineOptions({ name: 'CaptchaSlider' })
 
-const { idFor, disabled, loading, size, validateField, getFieldValue, setFieldValue } =
+const { idFor, labelId, disabled, loading, size, validateField, getFieldValue, setFieldValue } =
   useFieldStore<boolean>(focus)
 
 const _props = defineProps(captchaSliderProps)
@@ -230,6 +230,8 @@ function focus(options?: FocusOptions) {
     ref="wrapper"
     :class="className"
     tabindex="-1"
+    role="group"
+    :aria-labelledby="labelId"
   >
     <div
       :class="{
diff --git a/components/captcha/captcha.tsx b/components/captcha/captcha.tsx
index d299043bc..edb2fe29d 100644
--- a/components/captcha/captcha.tsx
+++ b/components/captcha/captcha.tsx
@@ -49,7 +49,7 @@ export default defineComponent({
   props: captchaProps,
   emits: ['update:visible'],
   setup(_props, { slots, expose }) {
-    const { idFor, disabled, loading, validateField, setFieldValue } = useFieldStore<
+    const { idFor, labelId, disabled, loading, validateField, setFieldValue } = useFieldStore<
       number | number[]
     >(focus)
 
@@ -730,7 +730,14 @@ export default defineComponent({
 
     function renderPanel() {
       return (
-        <div ref={wrapper} id={idFor.value} class={className.value} tabindex={-1}>
+        <div
+          ref={wrapper}
+          id={idFor.value}
+          class={className.value}
+          tabindex={-1}
+          role={'application'}
+          aria-labelledby={labelId.value}
+        >
           <div class={nh.be('header')}>
             <div class={nh.be('title')}>
               {renderSlot(slots, 'title', { success: isSuccess.value }, () => [
diff --git a/components/cascader/cascader-panel.vue b/components/cascader/cascader-panel.vue
index afad4b47b..8ca86dd54 100644
--- a/components/cascader/cascader-panel.vue
+++ b/components/cascader/cascader-panel.vue
@@ -3,6 +3,7 @@
     ref="wrapper"
     :class="nh.be('panel')"
     tabindex="-1"
+    :aria-labelledby="labeledBy"
     @mouseleave="handleMouseLeave"
   >
     <VirtualList
@@ -18,7 +19,8 @@
           multiple ? nh.bem('options', 'multiple') : null,
           noCascaded ? nh.bem('options', 'no-cascaded') : null
         ],
-        role: 'listbox'
+        role: 'listbox',
+        ariaMultiselectable: multiple
       }"
       @resize="computeListHeight"
     >
@@ -150,6 +152,10 @@ export default defineComponent({
     visible: {
       type: Boolean,
       default: false
+    },
+    labeledBy: {
+      type: String,
+      default: undefined
     }
   },
   emits: ['select', 'check', 'hover', 'open', 'back', 'close'],
diff --git a/components/cascader/cascader.vue b/components/cascader/cascader.vue
index b04c10e83..1c6dee917 100644
--- a/components/cascader/cascader.vue
+++ b/components/cascader/cascader.vue
@@ -3,6 +3,11 @@
     :id="idFor"
     ref="wrapper"
     :class="className"
+    role="group"
+    :aria-disabled="toAttrValue(props.disabled)"
+    :aria-expanded="toAttrValue(currentVisible)"
+    aria-haspopup="dialog"
+    :aria-labelledby="labelId"
     @click="toggleVisible()"
   >
     <div
@@ -128,9 +133,15 @@
         :class="[nh.be('icon'), nh.bem('icon', 'placeholder'), nh.be('suffix')]"
       ></div>
       <Transition :name="nh.ns('fade')" appear>
-        <div v-if="showClear" :class="[nh.be('icon'), nh.be('clear')]" @click.stop="handleClear">
+        <button
+          v-if="showClear"
+          :class="[nh.be('icon'), nh.be('clear')]"
+          tabindex="-1"
+          :aria-label="locale.ariaLabel.clear"
+          @click.stop="handleClear"
+        >
           <Icon v-bind="icons.clear"></Icon>
-        </div>
+        </button>
         <div v-else-if="props.loading" :class="[nh.be('icon'), nh.be('loading')]">
           <Icon
             v-bind="icons.loading"
@@ -169,6 +180,7 @@
             :is-async="isAsyncLoad"
             :merged="usingMerged"
             :no-cascaded="props.noCascaded"
+            :labeled-by="labelId"
             @select="handleOptionSelect($event, index)"
             @hover="usingHover && handlePanelOpen($event, index)"
             @check="handleOptionCheck($event)"
@@ -227,7 +239,7 @@ import {
   useProps
 } from '@vexip-ui/config'
 import { placementWhileList, useClickOutside, useHover, usePopper } from '@vexip-ui/hooks'
-import { flatTree, getLast, isNull, isPromise, transformTree } from '@vexip-ui/utils'
+import { flatTree, getLast, isNull, isPromise, toAttrValue, transformTree } from '@vexip-ui/utils'
 import { cascaderProps } from './props'
 
 import type { PopperExposed } from '@/components/popper'
@@ -262,6 +274,7 @@ export default defineComponent({
   setup(_props, { emit, slots }) {
     const {
       idFor,
+      labelId,
       state,
       disabled,
       loading,
@@ -1185,6 +1198,7 @@ export default defineComponent({
       icons,
       locale,
       idFor,
+      labelId,
       currentVisible,
       isPopperShow,
       currentValues,
@@ -1213,6 +1227,7 @@ export default defineComponent({
       popper,
       panelElList,
 
+      toAttrValue,
       handlePanelOpen,
       handleOptionSelect,
       handleOptionCheck,
diff --git a/components/checkbox/checkbox-group.vue b/components/checkbox/checkbox-group.vue
index 6ffaa4844..71e35c389 100644
--- a/components/checkbox/checkbox-group.vue
+++ b/components/checkbox/checkbox-group.vue
@@ -1,5 +1,10 @@
 <template>
-  <div :id="idFor" :class="className" role="group">
+  <div
+    :id="idFor"
+    :class="className"
+    role="group"
+    :aria-labelledby="labelId"
+  >
     <slot>
       <Checkbox v-if="props.control" inherit control>
         {{ controlLabel }}
@@ -58,8 +63,17 @@ export default defineComponent({
   props: checkboxGroupProps,
   emits: ['update:value'],
   setup(_props, { emit }) {
-    const { idFor, state, disabled, loading, size, validateField, getFieldValue, setFieldValue } =
-      useFieldStore<(string | number)[]>(focus)
+    const {
+      idFor,
+      labelId,
+      state,
+      disabled,
+      loading,
+      size,
+      validateField,
+      getFieldValue,
+      setFieldValue
+    } = useFieldStore<(string | number)[]>(focus)
 
     const props = useProps('checkboxGroup', _props, {
       size: createSizeProp(size),
@@ -259,6 +273,7 @@ export default defineComponent({
     return {
       props,
       idFor,
+      labelId,
       className,
       controlLabel,
 
diff --git a/components/checkbox/checkbox.vue b/components/checkbox/checkbox.vue
index ec681f006..cee76b797 100644
--- a/components/checkbox/checkbox.vue
+++ b/components/checkbox/checkbox.vue
@@ -4,6 +4,7 @@
     :class="className"
     :style="style"
     :aria-disabled="isDisabled"
+    :aria-labelledby="labelId"
     @click="handleClick"
   >
     <input
@@ -55,8 +56,17 @@ export default defineComponent({
   props: checkboxProps,
   emits: ['update:checked'],
   setup(_props, { slots, emit }) {
-    const { idFor, state, disabled, loading, size, validateField, getFieldValue, setFieldValue } =
-      useFieldStore<boolean>(() => input.value?.focus())
+    const {
+      idFor,
+      labelId,
+      state,
+      disabled,
+      loading,
+      size,
+      validateField,
+      getFieldValue,
+      setFieldValue
+    } = useFieldStore<boolean>(() => input.value?.focus())
 
     const props = useProps('checkbox', _props, {
       size: createSizeProp(size),
@@ -262,6 +272,7 @@ export default defineComponent({
       props,
       nh,
       idFor,
+      labelId,
       currentChecked,
 
       readonly,
diff --git a/components/color-picker/color-alpha.vue b/components/color-picker/color-alpha.vue
index d4f8c0e44..2ff5e60b1 100644
--- a/components/color-picker/color-alpha.vue
+++ b/components/color-picker/color-alpha.vue
@@ -1,5 +1,10 @@
 <template>
-  <div ref="wrapper" :class="nh.be('alpha')" tabindex="-1">
+  <div
+    ref="wrapper"
+    :class="nh.be('alpha')"
+    tabindex="-1"
+    role="group"
+  >
     <div
       :class="nh.be('opacity')"
       :style="{
diff --git a/components/color-picker/color-hue.vue b/components/color-picker/color-hue.vue
index 33bb28996..62d180796 100644
--- a/components/color-picker/color-hue.vue
+++ b/components/color-picker/color-hue.vue
@@ -1,5 +1,10 @@
 <template>
-  <div ref="wrapper" :class="nh.be('hue')" tabindex="-1">
+  <div
+    ref="wrapper"
+    :class="nh.be('hue')"
+    tabindex="-1"
+    role="group"
+  >
     <div :class="nh.be('hue-handler')" :style="{ left: `${currentLeft}%` }"></div>
   </div>
 </template>
diff --git a/components/color-picker/color-palette.vue b/components/color-picker/color-palette.vue
index 7d7b01f9c..f22ad2d02 100644
--- a/components/color-picker/color-palette.vue
+++ b/components/color-picker/color-palette.vue
@@ -3,12 +3,13 @@
     ref="wrapper"
     :class="nh.be('palette')"
     tabindex="-1"
+    role="group"
     :style="{
       backgroundColor: `hsl(${hue}, 100%, 50%)`
     }"
   >
-    <div :class="nh.be('saturation')"></div>
-    <div :class="nh.be('value')"></div>
+    <div :class="nh.be('saturation')" role="none"></div>
+    <div :class="nh.be('value')" role="none"></div>
     <div
       :class="nh.be('palette-handler')"
       :style="{
diff --git a/components/color-picker/color-picker.vue b/components/color-picker/color-picker.vue
index 70153a735..7c0117bad 100644
--- a/components/color-picker/color-picker.vue
+++ b/components/color-picker/color-picker.vue
@@ -31,6 +31,7 @@ import {
   rgbToHex,
   rgbToHsv,
   rgbaToHex,
+  toAttrValue,
   toFixed
 } from '@vexip-ui/utils'
 import { colorPickerProps } from './props'
@@ -44,6 +45,7 @@ defineOptions({ name: 'ColorPicker' })
 
 const {
   idFor,
+  labelId,
   state,
   disabled,
   loading,
@@ -528,6 +530,11 @@ function blur() {
     :id="idFor"
     ref="wrapper"
     :class="className"
+    role="group"
+    :aria-disabled="toAttrValue(props.disabled)"
+    :aria-expanded="toAttrValue(currentVisible)"
+    aria-haspopup="listbox"
+    :aria-labelledby="labelId"
     @click="toggleVisible"
     @keydown.tab.stop="handleTabDown"
     @keydown.space="handleSpaceDown"
@@ -599,9 +606,15 @@ function blur() {
           :class="[nh.be('icon'), nh.bem('icon', 'placeholder'), nh.be('suffix')]"
         ></div>
         <Transition :name="nh.ns('fade')" appear>
-          <div v-if="showClear" :class="[nh.be('icon'), nh.be('clear')]" @click.stop="handleClear">
+          <button
+            v-if="showClear"
+            :class="[nh.be('icon'), nh.be('clear')]"
+            tabindex="-1"
+            :aria-label="locale.ariaLabel.clear"
+            @click.stop="handleClear"
+          >
             <Icon v-bind="icons.clear"></Icon>
-          </div>
+          </button>
           <div v-else-if="props.loading" :class="[nh.be('icon'), nh.be('loading')]">
             <Icon
               v-bind="icons.loading"
diff --git a/components/date-picker/date-control.vue b/components/date-picker/date-control.vue
index faa05ce5e..c28dbde25 100644
--- a/components/date-picker/date-control.vue
+++ b/components/date-picker/date-control.vue
@@ -2,10 +2,11 @@
 import { computed, ref } from 'vue'
 
 import { useNameHelper } from '@vexip-ui/config'
-import { doubleDigits } from '@vexip-ui/utils'
+import { doubleDigits, getLastDayOfMonth } from '@vexip-ui/utils'
 import { handleKeyEnter } from './helper'
 
 import type { PropType } from 'vue'
+import type { LocaleConfig } from '@vexip-ui/config'
 import type { DateTimeType } from './symbol'
 
 defineOptions({ name: 'DateControl' })
@@ -73,6 +74,14 @@ const props = defineProps({
   readonly: {
     type: Boolean,
     default: false
+  },
+  labeledBy: {
+    type: String,
+    default: undefined
+  },
+  locale: {
+    type: Object as PropType<LocaleConfig['calendar'] & LocaleConfig['datePicker']>,
+    default: () => ({})
   }
 })
 
@@ -92,6 +101,7 @@ const nh = useNameHelper('date-picker')
 
 const wrapper = ref<HTMLElement>()
 
+const label = computed(() => props.locale.ariaLabel ?? {})
 const isActivated = computed(() => {
   return (Object.keys(props.enabled) as DateTimeType[]).every(type => {
     return !props.enabled[type] || props.activated[type]
@@ -125,6 +135,9 @@ const formattedMinute = computed(() => {
 const formattedSecond = computed(() => {
   return formatValue('second')
 })
+const maxDateCount = computed(() => {
+  return getLastDayOfMonth(props.dateValue.year, props.dateValue.month)
+})
 
 defineExpose({
   isActivated,
@@ -220,6 +233,7 @@ function handleBlur() {
   <div
     ref="wrapper"
     :class="className"
+    role="none"
     tabindex="-1"
     @keydown="handleInput"
     @blur="handleBlur"
@@ -231,35 +245,74 @@ function handleBlur() {
       <div
         v-if="enabled.year"
         :class="[nh.be('unit'), getUnitFocusClass('year')]"
+        role="spinbutton"
+        :aria-label="label.year"
+        :aria-valuenow="props.dateValue.year"
+        :aria-valuetext="formattedYear"
+        :aria-valuemin="1"
+        :aria-valuemax="9999"
+        :aria-labelledby="labeledBy"
         @click="handleInputFocus('year')"
       >
         {{ formattedYear }}
       </div>
-      <div v-if="labels.year" :class="nh.be('label')" @click="handleInputFocus('year')">
+      <div
+        v-if="labels.year"
+        :class="nh.be('label')"
+        aria-hidden
+        @click="handleInputFocus('year')"
+      >
         {{ labels.year }}
       </div>
       <template v-if="enabled.month">
-        <div v-if="enabled.year" :class="nh.be('separator')">
+        <div v-if="enabled.year" :class="nh.be('separator')" aria-hidden>
           {{ dateSeparator }}
         </div>
         <div
           :class="[nh.be('unit'), getUnitFocusClass('month')]"
+          role="spinbutton"
+          :aria-label="label.month"
+          :aria-valuenow="props.dateValue.month"
+          :aria-valuetext="formattedMonth"
+          :aria-valuemin="1"
+          :aria-valuemax="12"
+          :aria-labelledby="labeledBy"
           @click="handleInputFocus('month')"
         >
           {{ formattedMonth }}
         </div>
-        <div v-if="labels.month" :class="nh.be('label')" @click="handleInputFocus('month')">
+        <div
+          v-if="labels.month"
+          :class="nh.be('label')"
+          aria-hidden
+          @click="handleInputFocus('month')"
+        >
           {{ labels.month }}
         </div>
       </template>
       <template v-if="enabled.date">
-        <div v-if="enabled.month || enabled.year" :class="nh.be('separator')">
+        <div v-if="enabled.month || enabled.year" :class="nh.be('separator')" aria-hidden>
           {{ dateSeparator }}
         </div>
-        <div :class="[nh.be('unit'), getUnitFocusClass('date')]" @click="handleInputFocus('date')">
+        <div
+          :class="[nh.be('unit'), getUnitFocusClass('date')]"
+          role="spinbutton"
+          :aria-label="label.date"
+          :aria-valuenow="props.dateValue.date"
+          :aria-valuetext="formattedDate"
+          :aria-valuemin="1"
+          :aria-valuemax="maxDateCount || 31"
+          :aria-labelledby="labeledBy"
+          @click="handleInputFocus('date')"
+        >
           {{ formattedDate }}
         </div>
-        <div v-if="labels.date" :class="nh.be('label')" @click="handleInputFocus('date')">
+        <div
+          v-if="labels.date"
+          :class="nh.be('label')"
+          aria-hidden
+          @click="handleInputFocus('date')"
+        >
           {{ labels.date }}
         </div>
       </template>
@@ -269,38 +322,74 @@ function handleBlur() {
         <div
           v-if="enabled.hour"
           :class="[nh.be('unit'), getUnitFocusClass('hour')]"
+          role="spinbutton"
+          :aria-label="label.hour"
+          :aria-valuenow="props.dateValue.hour"
+          :aria-valuetext="formattedHour"
+          :aria-valuemin="0"
+          :aria-valuemax="23"
+          :aria-labelledby="labeledBy"
           @click="handleInputFocus('hour')"
         >
           {{ formattedHour }}
         </div>
-        <div v-if="labels.hour" :class="nh.be('label')" @click="handleInputFocus('hour')">
+        <div
+          v-if="labels.hour"
+          :class="nh.be('label')"
+          aria-hidden
+          @click="handleInputFocus('hour')"
+        >
           {{ labels.hour }}
         </div>
         <template v-if="enabled.minute">
-          <div v-if="enabled.hour" :class="nh.be('separator')">
+          <div v-if="enabled.hour" :class="nh.be('separator')" aria-hidden>
             {{ timeSeparator }}
           </div>
           <div
             :class="[nh.be('unit'), getUnitFocusClass('minute')]"
+            role="spinbutton"
+            :aria-label="label.minute"
+            :aria-valuenow="props.dateValue.minute"
+            :aria-valuetext="formattedMinute"
+            :aria-valuemin="0"
+            :aria-valuemax="59"
+            :aria-labelledby="labeledBy"
             @click="handleInputFocus('minute')"
           >
             {{ formattedMinute }}
           </div>
-          <div v-if="labels.minute" :class="nh.be('label')" @click="handleInputFocus('minute')">
+          <div
+            v-if="labels.minute"
+            :class="nh.be('label')"
+            aria-hidden
+            @click="handleInputFocus('minute')"
+          >
             {{ labels.minute }}
           </div>
         </template>
         <template v-if="enabled.second">
-          <div v-if="enabled.minute || enabled.hour" :class="nh.be('separator')">
+          <div v-if="enabled.minute || enabled.hour" :class="nh.be('separator')" aria-hidden>
             {{ timeSeparator }}
           </div>
           <div
             :class="[nh.be('unit'), getUnitFocusClass('second')]"
+            role="spinbutton"
+            :aria-label="label.second"
+            :aria-valuenow="props.dateValue.second"
+            :aria-valuetext="formattedSecond"
+            :aria-valuemin="0"
+            :aria-valuemax="59"
+            :aria-labelledby="labeledBy"
             @click="handleInputFocus('second')"
           >
             {{ formattedSecond }}
           </div>
-          <div v-if="labels.second" :class="nh.be('label')" @click="handleInputFocus('second')">
+          <div
+            v-if="labels.second"
+            :class="nh.be('label')"
+            aria-hidden
+            @click="handleInputFocus('second')"
+          >
             {{ labels.second }}
           </div>
         </template>
diff --git a/components/date-picker/date-panel.vue b/components/date-picker/date-panel.vue
index afb8dd9ee..1c1a28217 100644
--- a/components/date-picker/date-panel.vue
+++ b/components/date-picker/date-panel.vue
@@ -102,7 +102,7 @@ const props = defineProps({
   },
   locale: {
     type: Object as PropType<LocaleConfig['calendar'] & LocaleConfig['datePicker']>,
-    default: null
+    default: () => ({})
   },
   selectingType: {
     type: String as PropType<'start' | 'end'>,
@@ -119,6 +119,10 @@ const props = defineProps({
   shortcutsPlacement: {
     type: String as PropType<DateShortcutsPlacement>,
     default: 'left'
+  },
+  labeledBy: {
+    type: String,
+    default: undefined
   }
 })
 
@@ -486,6 +490,7 @@ function refreshCalendar(valueType: 'start' | 'end') {
       [nh.bem('panel', 'vertical')]:
         shortcuts.length && (shortcutsPlacement === 'top' || shortcutsPlacement === 'bottom')
     }"
+    :aria-labelledby="labeledBy"
     @click="handleClick"
   >
     <div
@@ -507,7 +512,7 @@ function refreshCalendar(valueType: 'start' | 'end') {
         {{ item.name }}
       </div>
     </div>
-    <div :class="nh.be('list')">
+    <div :class="nh.be('list')" role="application">
       <div :class="nh.be('panel-body')">
         <div :class="nh.be('date-panel')">
           <div :class="nh.be('header')">
diff --git a/components/date-picker/date-picker.vue b/components/date-picker/date-picker.vue
index c01341a89..0635131ed 100644
--- a/components/date-picker/date-picker.vue
+++ b/components/date-picker/date-picker.vue
@@ -33,7 +33,10 @@ import {
   format,
   getTime,
   isLeapYear,
+  isObject,
+  mergeObjects,
   startOfMonth,
+  toAttrValue,
   toDate,
   toFalse
 } from '@vexip-ui/utils'
@@ -49,6 +52,7 @@ defineOptions({ name: 'DatePicker' })
 
 const {
   idFor,
+  labelId,
   state,
   disabled,
   loading,
@@ -170,11 +174,9 @@ const endInput = ref<InstanceType<typeof DateControl>>()
 const datePanel = ref<InstanceType<typeof DatePanel>>()
 
 const mergedLocale = computed(() => {
-  return {
-    ...calendarLocale.value,
-    ...datePickerLocale.value,
-    ...(props.locale ?? {})
-  }
+  const locale = mergeObjects(calendarLocale.value, datePickerLocale.value, true)
+
+  return isObject(props.locale) ? mergeObjects(locale, props.locale) : locale
 })
 const startPlaceholder = computed(() => {
   if (props.placeholder) {
@@ -1206,6 +1208,11 @@ function handleClickOutside() {
     :id="idFor"
     ref="wrapper"
     :class="className"
+    role="group"
+    :aria-disabled="toAttrValue(props.disabled)"
+    :aria-expanded="toAttrValue(currentVisible)"
+    aria-haspopup="dialog"
+    :aria-labelledby="labelId"
     @click="showPanel"
   >
     <div
@@ -1242,6 +1249,7 @@ function handleClickOutside() {
           :has-error="startError"
           :placeholder="startPlaceholder"
           :readonly="props.unitReadonly"
+          :labeled-by="labelId"
           @input="handleInput"
           @plus="handlePlus"
           @minus="handleMinus"
@@ -1275,6 +1283,7 @@ function handleClickOutside() {
             :has-error="endError"
             :placeholder="endPlaceholder"
             :readonly="props.unitReadonly"
+            :labeled-by="labelId"
             @input="handleInput"
             @plus="handlePlus"
             @minus="handleMinus"
@@ -1304,9 +1313,15 @@ function handleClickOutside() {
         :class="[nh.be('icon'), nh.bem('icon', 'placeholder'), nh.be('suffix')]"
       ></div>
       <Transition :name="nh.ns('fade')" appear>
-        <div v-if="showClear" :class="[nh.be('icon'), nh.be('clear')]" @click.stop="handleClear()">
+        <button
+          v-if="showClear"
+          :class="[nh.be('icon'), nh.be('clear')]"
+          tabindex="-1"
+          :aria-label="mergedLocale.ariaLabel.clear"
+          @click.stop="handleClear()"
+        >
           <Icon v-bind="icons.clear" label="clear"></Icon>
-        </div>
+        </button>
         <div v-else-if="props.loading" :class="[nh.be('icon'), nh.be('loading')]">
           <Icon
             v-bind="icons.loading"
@@ -1355,6 +1370,7 @@ function handleClickOutside() {
         :week-start="props.weekStart"
         :static-wheel="staticWheel"
         :shortcuts-placement="props.shortcutsPlacement"
+        :labeled-by="labelId"
         @shortcut="handleShortcut"
         @change="handlePanelChange"
         @confirm="handleEnter"
diff --git a/components/date-picker/time-control.vue b/components/date-picker/time-control.vue
index c916a09b1..dafc61885 100644
--- a/components/date-picker/time-control.vue
+++ b/components/date-picker/time-control.vue
@@ -6,6 +6,7 @@ import { doubleDigits } from '@vexip-ui/utils'
 import { handleKeyEnter } from './helper'
 
 import type { PropType } from 'vue'
+import type { LocaleConfig } from '@vexip-ui/config'
 import type { TimeType } from './symbol'
 
 defineOptions({ name: 'TimeControl' })
@@ -67,6 +68,14 @@ const props = defineProps({
   readonly: {
     type: Boolean,
     default: false
+  },
+  labeledBy: {
+    type: String,
+    default: undefined
+  },
+  locale: {
+    type: Object as PropType<LocaleConfig['timePicker']>,
+    default: () => ({})
   }
 })
 
@@ -87,6 +96,7 @@ const nh = useNameHelper('time-picker')
 
 const wrapper = ref<HTMLElement>()
 
+const label = computed(() => props.locale.ariaLabel ?? {})
 const isActivated = computed(() => {
   return (Object.keys(props.enabled) as TimeType[]).every(type => {
     return !props.enabled[type] || props.activated[type]
@@ -199,6 +209,7 @@ function handleBlur() {
   <div
     ref="wrapper"
     :class="[nh.be('input'), hasError && nh.bem('input', 'error')]"
+    role="none"
     tabindex="-1"
     @keydown="handleInput"
     @blur="handleBlur"
@@ -210,38 +221,74 @@ function handleBlur() {
       <div
         v-if="enabled.hour"
         :class="[nh.be('unit'), getUnitFocusClass('hour')]"
+        role="spinbutton"
+        :aria-label="label.hour"
+        :aria-valuenow="props.timeValue.hour"
+        :aria-valuetext="formattedHour"
+        :aria-valuemin="0"
+        :aria-valuemax="23"
+        :aria-labelledby="labeledBy"
         @click="handleInputFocus('hour')"
       >
         {{ formattedHour }}
       </div>
-      <div v-if="labels.hour" :class="nh.be('label')" @click="handleInputFocus('hour')">
+      <div
+        v-if="labels.hour"
+        :class="nh.be('label')"
+        aria-hidden
+        @click="handleInputFocus('hour')"
+      >
         {{ labels.hour }}
       </div>
       <template v-if="enabled.minute">
-        <div v-if="enabled.hour" :class="nh.be('separator')">
+        <div v-if="enabled.hour" :class="nh.be('separator')" aria-hidden>
           {{ separator }}
         </div>
         <div
           :class="[nh.be('unit'), getUnitFocusClass('minute')]"
+          role="spinbutton"
+          :aria-label="label.minute"
+          :aria-valuenow="props.timeValue.minute"
+          :aria-valuetext="formattedMinute"
+          :aria-valuemin="0"
+          :aria-valuemax="59"
+          :aria-labelledby="labeledBy"
           @click="handleInputFocus('minute')"
         >
           {{ formattedMinute }}
         </div>
-        <div v-if="labels.minute" :class="nh.be('label')" @click="handleInputFocus('minute')">
+        <div
+          v-if="labels.minute"
+          :class="nh.be('label')"
+          aria-hidden
+          @click="handleInputFocus('minute')"
+        >
           {{ labels.minute }}
         </div>
       </template>
       <template v-if="enabled.second">
-        <div v-if="enabled.minute || enabled.hour" :class="nh.be('separator')">
+        <div v-if="enabled.minute || enabled.hour" :class="nh.be('separator')" aria-hidden>
           {{ separator }}
         </div>
         <div
           :class="[nh.be('unit'), getUnitFocusClass('second')]"
+          role="spinbutton"
+          :aria-label="label.second"
+          :aria-valuenow="props.timeValue.second"
+          :aria-valuetext="formattedSecond"
+          :aria-valuemin="0"
+          :aria-valuemax="59"
+          :aria-labelledby="labeledBy"
           @click="handleInputFocus('second')"
         >
           {{ formattedSecond }}
         </div>
-        <div v-if="labels.second" :class="nh.be('label')" @click="handleInputFocus('second')">
+        <div
+          v-if="labels.second"
+          :class="nh.be('label')"
+          aria-hidden
+          @click="handleInputFocus('second')"
+        >
           {{ labels.second }}
         </div>
       </template>
diff --git a/components/date-picker/time-picker.vue b/components/date-picker/time-picker.vue
index af69e6ee1..43e91607f 100644
--- a/components/date-picker/time-picker.vue
+++ b/components/date-picker/time-picker.vue
@@ -27,7 +27,7 @@ import {
   usePopper,
   useSetTimeout
 } from '@vexip-ui/hooks'
-import { USE_TOUCH, boundRange, callIfFunc, doubleDigits } from '@vexip-ui/utils'
+import { USE_TOUCH, boundRange, callIfFunc, doubleDigits, toAttrValue } from '@vexip-ui/utils'
 import { timePickerProps } from './props'
 import { useColumn, useTimeBound } from './helper'
 import { TIME_REG } from './symbol'
@@ -39,6 +39,7 @@ defineOptions({ name: 'TimePicker' })
 
 const {
   idFor,
+  labelId,
   state,
   disabled,
   loading,
@@ -695,6 +696,11 @@ function handleClickOutside() {
     :id="idFor"
     ref="wrapper"
     :class="className"
+    role="group"
+    :aria-disabled="toAttrValue(props.disabled)"
+    :aria-expanded="toAttrValue(currentVisible)"
+    aria-haspopup="dialog"
+    :aria-labelledby="labelId"
     @click="showPanel"
   >
     <div
@@ -730,6 +736,8 @@ function handleClickOutside() {
           :has-error="startError"
           :placeholder="startPlaceholder"
           :readonly="props.unitReadonly"
+          :labeled-by="labelId"
+          :locale="locale"
           @input="handleInput"
           @plus="handlePlus"
           @minus="handleMinus"
@@ -765,6 +773,8 @@ function handleClickOutside() {
             :has-error="endError"
             :placeholder="endPlaceholder"
             :readonly="props.unitReadonly"
+            :labeled-by="labelId"
+            :locale="locale"
             @input="handleInput"
             @plus="handlePlus"
             @minus="handleMinus"
@@ -794,9 +804,15 @@ function handleClickOutside() {
         :class="[nh.be('icon'), nh.bem('icon', 'placeholder'), nh.be('suffix')]"
       ></div>
       <Transition :name="nh.ns('fade')" appear>
-        <div v-if="showClear" :class="[nh.be('icon'), nh.be('clear')]" @click.stop="handleClear()">
+        <button
+          v-if="showClear"
+          :class="[nh.be('icon'), nh.be('clear')]"
+          tabindex="-1"
+          :aria-label="locale.ariaLabel.clear"
+          @click.stop="handleClear()"
+        >
           <Icon v-bind="icons.clear"></Icon>
-        </div>
+        </button>
         <div v-else-if="props.loading" :class="[nh.be('icon'), nh.be('loading')]">
           <Icon
             v-bind="icons.loading"
@@ -826,6 +842,7 @@ function handleClickOutside() {
             props.shortcuts.length &&
             (props.shortcutsPlacement === 'top' || props.shortcutsPlacement === 'bottom')
         }"
+        :aria-labelledby="labelId"
       >
         <div
           v-if="props.shortcuts.length"
diff --git a/components/form/form-item.vue b/components/form/form-item.vue
index a381f7a57..2778d6f59 100644
--- a/components/form/form-item.vue
+++ b/components/form/form-item.vue
@@ -13,7 +13,14 @@ import {
   useProps,
   useWordSpace
 } from '@vexip-ui/config'
-import { createEventEmitter, getRangeWidth, isFunction, isNull, isObject } from '@vexip-ui/utils'
+import {
+  createEventEmitter,
+  getGlobalCount,
+  getRangeWidth,
+  isFunction,
+  isNull,
+  isObject
+} from '@vexip-ui/utils'
 import { formItemProps } from './props'
 import { validate as asyncValidate } from './validator'
 import { getValueByPath, setValueByPath } from './helper'
@@ -89,6 +96,8 @@ const locale = useLocale('form', toRef(props, 'locale'))
 const icons = useIcons()
 const wordSpace = useWordSpace()
 
+const idIndex = `${getGlobalCount()}`
+
 const initValue = ref(props.defaultValue)
 const isError = ref(false)
 const errorTip = ref('')
@@ -98,6 +107,7 @@ const labelWidth = ref(0)
 
 const labelEl = ref<HTMLInputElement>()
 
+const labelId = computed(() => nh.bs(`${idIndex}__label`))
 const isRequired = computed(() => formProps.allRequired || props.required)
 const requiredTip = computed(() => {
   return makeSentence(`${props.label || props.prop} ${locale.value.notNullable}`, wordSpace.value)
@@ -187,6 +197,7 @@ const instances = new Set<any>()
 const fieldObject = Object.freeze({
   prop: computed(() => props.prop),
   idFor: computed(() => props.prop),
+  labelId,
   state: computed<ComponentState>(() => (isError.value ? 'error' : 'default')),
   disabled: computed(() => !!formProps.disabled),
   loading: computed(() => !!formProps.loading),
@@ -384,6 +395,7 @@ const isNative = computed(() => !!(formProps.action && formProps.method))
     />
     <label
       v-if="hasLabel"
+      :id="labelId"
       ref="labelEl"
       :class="nh.be('label')"
       :style="{ width: labelAlign !== 'top' ? `${computedLabelWidth}px` : undefined }"
diff --git a/components/form/helper.ts b/components/form/helper.ts
index 98dcb5ac9..da33d6ef0 100644
--- a/components/form/helper.ts
+++ b/components/form/helper.ts
@@ -118,7 +118,7 @@ export function setValueByPath(
   return false
 }
 
-const defaultProp = computed(() => '')
+const defaultId = computed(() => undefined as string | undefined)
 const defaultState = computed(() => 'default' as ComponentState)
 const defaultFalse = computed(() => false)
 const defaultSize = computed(() => 'default' as ComponentSize)
@@ -126,7 +126,8 @@ const defaultSize = computed(() => 'default' as ComponentSize)
 function getEmptyActions<V = unknown>() {
   return {
     isField: false,
-    idFor: defaultProp,
+    idFor: defaultId,
+    labelId: defaultId,
     state: defaultState,
     disabled: defaultFalse,
     loading: defaultFalse,
@@ -176,6 +177,7 @@ export function useFieldStore<V = unknown>(onFocus?: () => void) {
   return {
     isField: true,
     idFor: fieldOptions.idFor,
+    labelId: fieldOptions.labelId,
     state: fieldOptions.state,
     disabled: fieldOptions.disabled,
     loading: fieldOptions.loading,
diff --git a/components/form/symbol.ts b/components/form/symbol.ts
index c4d160d89..41956f120 100644
--- a/components/form/symbol.ts
+++ b/components/form/symbol.ts
@@ -41,6 +41,7 @@ export interface FormItemProps {
 export interface FieldOptions {
   prop: ComputedRef<string>,
   idFor: ComputedRef<string>,
+  labelId: ComputedRef<string>,
   state: ComputedRef<ComponentState>,
   disabled: ComputedRef<boolean>,
   loading: ComputedRef<boolean>,
diff --git a/components/input/input.tsx b/components/input/input.tsx
index 6df0c52b8..758eb4d64 100644
--- a/components/input/input.tsx
+++ b/components/input/input.tsx
@@ -34,6 +34,7 @@ export default defineComponent({
   setup(_props, { slots, emit, expose }) {
     const {
       idFor,
+      labelId,
       state,
       disabled,
       loading,
@@ -449,9 +450,15 @@ export default defineComponent({
     function renderSuffixAction() {
       if (showClear.value) {
         return (
-          <div key={'clear'} class={[nh.be('icon'), nh.be('clear')]} onClick={handleClear}>
+          <button
+            key={'clear'}
+            class={[nh.be('icon'), nh.be('clear')]}
+            tabindex={-1}
+            aria-label={locale.value.ariaLabel.clear}
+            onClick={handleClear}
+          >
             <Icon {...icons.value.clear} label={'clear'}></Icon>
-          </div>
+          </button>
         )
       }
 
@@ -537,6 +544,7 @@ export default defineComponent({
             placeholder={props.placeholder ?? locale.value.placeholder}
             maxlength={props.maxLength > 0 ? props.maxLength : undefined}
             name={props.name || props.controlAttrs?.name}
+            aria-labelledby={labelId.value}
             onBlur={handleBlur}
             onFocus={handleFocus}
             onInput={handleInput}
diff --git a/components/number-input/number-input.vue b/components/number-input/number-input.vue
index 221679590..3e0cfe669 100644
--- a/components/number-input/number-input.vue
+++ b/components/number-input/number-input.vue
@@ -18,6 +18,7 @@ import {
 import {
   boundRange,
   debounce,
+  getGlobalCount,
   isNull,
   isValidNumber,
   minus,
@@ -37,6 +38,7 @@ defineOptions({ name: 'NumberInput' })
 
 const {
   idFor,
+  labelId,
   state,
   disabled,
   loading,
@@ -154,8 +156,11 @@ useModifier({
   }
 })
 
+const idIndex = `${getGlobalCount()}`
+
 let lastValue: number
 
+const controlId = computed(() => `${nh.bs(idIndex)}__control`)
 const outOfRange = computed(() => {
   return (
     !isNullOrNaN(currentValue.value) &&
@@ -528,6 +533,7 @@ function handleKeyPress(event: KeyboardEvent) {
     :id="idFor"
     ref="wrapper"
     :class="className"
+    role="group"
     @click="control?.focus()"
   >
     <div
@@ -542,6 +548,7 @@ function handleKeyPress(event: KeyboardEvent) {
     </div>
     <input
       v-bind="props.controlAttrs"
+      :id="controlId"
       ref="control"
       :class="[nh.be('control'), props.controlAttrs?.class, props.controlClass]"
       type="text"
@@ -557,6 +564,7 @@ function handleKeyPress(event: KeyboardEvent) {
       :aria-valuenow="preciseNumber"
       :aria-valuemin="props.min !== -Infinity ? props.min : undefined"
       :aria-valuemax="props.max !== Infinity ? props.max : undefined"
+      :aria-labelledby="labelId"
       @submit.prevent
       @blur="handleBlur"
       @focus="handleFocus"
@@ -582,9 +590,15 @@ function handleKeyPress(event: KeyboardEvent) {
       :class="[nh.be('icon'), nh.bem('icon', 'placeholder'), nh.be('suffix')]"
     ></div>
     <Transition :name="nh.ns('fade')" appear>
-      <div v-if="showClear" :class="[nh.be('icon'), nh.be('clear')]" @click.stop="handleClear">
+      <button
+        v-if="showClear"
+        :class="[nh.be('icon'), nh.be('clear')]"
+        tabindex="-1"
+        :aria-label="locale.ariaLabel.clear"
+        @click.stop="handleClear"
+      >
         <Icon v-bind="icons.clear" label="clear"></Icon>
-      </div>
+      </button>
       <div v-else-if="props.loading" :class="[nh.be('icon'), nh.be('loading')]">
         <Icon
           v-bind="icons.loading"
@@ -601,6 +615,10 @@ function handleKeyPress(event: KeyboardEvent) {
           [nh.bem('plus', 'disabled')]: plusDisabled,
           [nh.bem('plus', 'holding')]: plusHolding
         }"
+        role="button"
+        :aria-label="locale.ariaLabel.increase"
+        :aria-labelledby="labelId"
+        :aria-controls="controlId"
         @pointerdown.prevent="handleHold('plus', $event)"
         @mousedown.prevent
         @touchstart.prevent
@@ -613,6 +631,9 @@ function handleKeyPress(event: KeyboardEvent) {
           [nh.bem('minus', 'disabled')]: minusDisabled,
           [nh.bem('minus', 'holding')]: minusHolding
         }"
+        :aria-label="locale.ariaLabel.decrease"
+        :aria-labelledby="labelId"
+        :aria-controls="controlId"
         @pointerdown.prevent="handleHold('minus', $event)"
         @mousedown.prevent
         @touchstart.prevent
diff --git a/components/number-input/props.ts b/components/number-input/props.ts
index c06c90acd..2ac2bb2fe 100644
--- a/components/number-input/props.ts
+++ b/components/number-input/props.ts
@@ -17,7 +17,7 @@ import type { NumberInputControlType, NumberInputEmptyType } from './symbol'
 export const numberInputProps = buildProps({
   size: sizeProp,
   state: stateProp,
-  locale: localeProp('input'),
+  locale: localeProp('numberInput'),
   prefix: iconProp,
   prefixColor: String,
   suffix: iconProp,
diff --git a/components/option/option-group.vue b/components/option/option-group.vue
index 3af585b1d..e2622b7fd 100644
--- a/components/option/option-group.vue
+++ b/components/option/option-group.vue
@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { useNameHelper } from '@vexip-ui/config'
+import { optionGroupProps } from './props'
+
+defineOptions({ name: 'OptionGroup' })
+
+defineProps(optionGroupProps)
+
+const nh = useNameHelper('option-group')
+</script>
+
 <template>
   <li
     :class="{
@@ -16,20 +27,3 @@
     </ul>
   </li>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import { useNameHelper } from '@vexip-ui/config'
-import { optionGroupProps } from './props'
-
-export default defineComponent({
-  name: 'OptionGroup',
-  props: optionGroupProps,
-  setup() {
-    return {
-      nh: useNameHelper('option-group')
-    }
-  }
-})
-</script>
diff --git a/components/option/option.vue b/components/option/option.vue
index fd08a436c..43abf7330 100644
--- a/components/option/option.vue
+++ b/components/option/option.vue
@@ -1,51 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { emitEvent, useNameHelper } from '@vexip-ui/config'
+import { toAttrValue } from '@vexip-ui/utils'
+import { optionProps } from './props'
+
+defineOptions({ name: 'Option' })
+
+const props = defineProps(optionProps)
+
+const nh = useNameHelper('option')
+const className = computed(() => {
+  return {
+    [nh.b()]: true,
+    [nh.bs('vars')]: true,
+    [nh.bm('disabled')]: props.disabled,
+    [nh.bm('selected')]: !props.disabled && props.selected,
+    [nh.bm('divided')]: props.divided,
+    [nh.bm('hitting')]: props.hitting,
+    [nh.bm('no-hover')]: props.noHover
+  }
+})
+
+function handleSelect() {
+  if (props.disabled) return
+
+  emitEvent(props.onSelect!)
+}
+</script>
+
 <template>
   <li
     ref="wrapper"
     :class="className"
     :title="title || undefined"
     role="option"
-    :aria-disabled="disabled ? 'true' : undefined"
+    :aria-disabled="toAttrValue(disabled)"
     :aria-selected="selected"
     @click="handleSelect"
   >
     <slot>{{ label || value }}</slot>
   </li>
 </template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
-
-import { emitEvent, useNameHelper } from '@vexip-ui/config'
-import { optionProps } from './props'
-
-export default defineComponent({
-  name: 'Option',
-  props: optionProps,
-  emits: [],
-  setup(props) {
-    const nh = useNameHelper('option')
-    const className = computed(() => {
-      return {
-        [nh.b()]: true,
-        [nh.bs('vars')]: true,
-        [nh.bm('disabled')]: props.disabled,
-        [nh.bm('selected')]: !props.disabled && props.selected,
-        [nh.bm('divided')]: props.divided,
-        [nh.bm('hitting')]: props.hitting,
-        [nh.bm('no-hover')]: props.noHover
-      }
-    })
-
-    function handleSelect() {
-      if (props.disabled) return
-
-      emitEvent(props.onSelect!)
-    }
-
-    return {
-      className,
-      handleSelect
-    }
-  }
-})
-</script>
diff --git a/components/popper/popper.vue b/components/popper/popper.vue
index 739199a39..72d26041b 100644
--- a/components/popper/popper.vue
+++ b/components/popper/popper.vue
@@ -15,9 +15,10 @@
       <div
         v-if="props.alive || props.visible"
         v-show="!props.alive || props.visible"
-        v-bind="$attrs"
         ref="wrapper"
+        v-bind="$attrs"
         :class="[nh.b(), props.to !== 'body' && nh.bm('inherit')]"
+        :role="props.role"
         :style="{ zIndex: props.to && props.visible ? zIndex : undefined }"
       >
         <slot></slot>
@@ -44,12 +45,13 @@ export default defineComponent({
   emits: [],
   setup(_props) {
     const nh = useNameHelper('popper')
-    const props = useProps('collapseTransition', _props, {
+    const props = useProps('popper', _props, {
       visible: false,
       alive: false,
       to: '',
       transition: () => nh.ns('drop'),
-      appear: false
+      appear: false,
+      role: 'dialog'
     })
     const getIndex = useZIndex()
 
diff --git a/components/popper/props.ts b/components/popper/props.ts
index cf77cdf8a..68d1e20e8 100644
--- a/components/popper/props.ts
+++ b/components/popper/props.ts
@@ -9,6 +9,7 @@ export const popperProps = buildProps({
   to: String,
   transition: String,
   appear: booleanProp,
+  role: String,
   onBeforeEnter: eventProp<(el: Element) => void>(),
   onEnter: eventProp<(el: Element) => void>(),
   onAfterEnter: eventProp<(el: Element) => void>(),
diff --git a/components/progress/progress.vue b/components/progress/progress.vue
index b51df280f..2c5bec380 100644
--- a/components/progress/progress.vue
+++ b/components/progress/progress.vue
@@ -1,9 +1,107 @@
+<script setup lang="ts">
+import { Bubble } from '@/components/bubble'
+
+import { computed } from 'vue'
+
+import { createStateProp, useNameHelper, useProps } from '@vexip-ui/config'
+import { callIfFunc, toFixed } from '@vexip-ui/utils'
+import { progressProps } from './props'
+import { infoTypes } from './symbol'
+
+import type { CSSProperties } from 'vue'
+
+defineOptions({ name: 'Progress' })
+
+const _props = defineProps(progressProps)
+const props = useProps('progress', _props, {
+  percentage: {
+    default: 0,
+    validator: value => value >= 0 && value <= 100,
+    static: true
+  },
+  state: createStateProp(),
+  strokeWidth: 8,
+  infoType: {
+    default: 'outside',
+    validator: value => infoTypes.includes(value)
+  },
+  precision: 2,
+  activated: false,
+  strokeColor: {
+    default: null,
+    validator: value => !(Array.isArray(value) && (!value[0] || !value[1]))
+  }
+})
+
+const nh = useNameHelper('progress')
+
+const className = computed(() => {
+  return [
+    nh.b(),
+    nh.bs('vars'),
+    nh.bm(`info-${props.infoType}`),
+    {
+      [nh.bm('inherit')]: props.inherit,
+      [nh.bm(props.state)]: props.state !== 'default',
+      [nh.bm('activated')]: props.activated
+    }
+  ]
+})
+const style = computed(() => {
+  return { [nh.cv('percentage')]: props.percentage }
+})
+const trackStyle = computed(() => {
+  return {
+    height: `${props.strokeWidth}px`,
+    borderRadius: `${props.strokeWidth}px`
+  }
+})
+const fillerStyle = computed(() => {
+  const style: CSSProperties = {
+    borderRadius: `${props.strokeWidth}px`
+  }
+
+  const strokeColor = callIfFunc(props.strokeColor, props.percentage)
+
+  if (typeof strokeColor === 'string') {
+    style.backgroundColor = strokeColor
+  } else if (Array.isArray(strokeColor)) {
+    style.backgroundImage = `linear-gradient(to right, ${strokeColor[0]} 0%, ${strokeColor[1]} 100%)`
+  }
+
+  return style
+})
+const useBubble = computed(() => {
+  return props.infoType.includes('bubble')
+})
+const bubbleType = computed(() => {
+  if (useBubble.value) {
+    return props.infoType.split('-').pop() === 'bottom' ? 'bottom' : 'top'
+  }
+
+  return 'top'
+})
+const bubbleStyle = computed(() => {
+  if (!useBubble.value) return {}
+
+  const type = bubbleType.value === 'top' ? 'bottom' : 'top'
+
+  return {
+    [type]: `${props.strokeWidth}px`
+  }
+})
+const percentValue = computed(() => toFixed(props.percentage, props.precision))
+
+defineExpose({ percentValue })
+</script>
+
 <template>
   <div
     :class="className"
     :style="style"
     role="progressbar"
     :aria-valuenow="percentValue"
+    :aria-valuetext="`${percentValue}%`"
     aria-valuemin="0"
     aria-valuemax="100"
   >
@@ -41,127 +139,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Bubble } from '@/components/bubble'
-
-import { computed, defineComponent } from 'vue'
-
-import { createStateProp, useNameHelper, useProps } from '@vexip-ui/config'
-import { callIfFunc, toFixed } from '@vexip-ui/utils'
-import { progressProps } from './props'
-
-import type { CSSProperties } from 'vue'
-import type { ProgressInfoType } from './symbol'
-
-const infoTypes = Object.freeze<ProgressInfoType[]>([
-  'outside',
-  'inside',
-  'bubble',
-  'bubble-top',
-  'bubble-bottom',
-  'none'
-])
-
-export default defineComponent({
-  name: 'Progress',
-  components: {
-    Bubble
-  },
-  props: progressProps,
-  setup(_props) {
-    const props = useProps('progress', _props, {
-      percentage: {
-        default: 0,
-        validator: value => value >= 0 && value <= 100,
-        static: true
-      },
-      state: createStateProp(),
-      strokeWidth: 8,
-      infoType: {
-        default: 'outside',
-        validator: value => infoTypes.includes(value)
-      },
-      precision: 2,
-      activated: false,
-      strokeColor: {
-        default: null,
-        validator: value => !(Array.isArray(value) && (!value[0] || !value[1]))
-      }
-    })
-
-    const nh = useNameHelper('progress')
-
-    const className = computed(() => {
-      return [
-        nh.b(),
-        nh.bs('vars'),
-        nh.bm(`info-${props.infoType}`),
-        {
-          [nh.bm('inherit')]: props.inherit,
-          [nh.bm(props.state)]: props.state !== 'default',
-          [nh.bm('activated')]: props.activated
-        }
-      ]
-    })
-    const style = computed(() => {
-      return { [nh.cv('percentage')]: props.percentage }
-    })
-    const trackStyle = computed(() => {
-      return {
-        height: `${props.strokeWidth}px`,
-        borderRadius: `${props.strokeWidth}px`
-      }
-    })
-    const fillerStyle = computed(() => {
-      const style: CSSProperties = {
-        borderRadius: `${props.strokeWidth}px`
-      }
-
-      const strokeColor = callIfFunc(props.strokeColor, props.percentage)
-
-      if (typeof strokeColor === 'string') {
-        style.backgroundColor = strokeColor
-      } else if (Array.isArray(strokeColor)) {
-        style.backgroundImage = `linear-gradient(to right, ${strokeColor[0]} 0%, ${strokeColor[1]} 100%)`
-      }
-
-      return style
-    })
-    const useBubble = computed(() => {
-      return props.infoType.includes('bubble')
-    })
-    const bubbleType = computed(() => {
-      if (useBubble.value) {
-        return props.infoType.split('-').pop() === 'bottom' ? 'bottom' : 'top'
-      }
-
-      return 'top'
-    })
-    const bubbleStyle = computed(() => {
-      if (!useBubble.value) return {}
-
-      const type = bubbleType.value === 'top' ? 'bottom' : 'top'
-
-      return {
-        [type]: `${props.strokeWidth}px`
-      }
-    })
-    const percentValue = computed(() => toFixed(props.percentage, props.precision))
-
-    return {
-      props,
-      nh,
-
-      className,
-      style,
-      trackStyle,
-      fillerStyle,
-      useBubble,
-      bubbleType,
-      bubbleStyle,
-      percentValue
-    }
-  }
-})
-</script>
diff --git a/components/progress/symbol.ts b/components/progress/symbol.ts
index 8d203e153..51d435288 100644
--- a/components/progress/symbol.ts
+++ b/components/progress/symbol.ts
@@ -10,3 +10,12 @@ export type ProgressStrokeColor =
   | string
   | [string, string]
   | ((percentage: number) => string | [string, string])
+
+export const infoTypes = Object.freeze<ProgressInfoType[]>([
+  'outside',
+  'inside',
+  'bubble',
+  'bubble-top',
+  'bubble-bottom',
+  'none'
+])
diff --git a/components/radio/radio-group.vue b/components/radio/radio-group.vue
index 04318e8bd..312a6a5a7 100644
--- a/components/radio/radio-group.vue
+++ b/components/radio/radio-group.vue
@@ -21,8 +21,17 @@ import type { ChangeEvent } from './symbol'
 
 defineOptions({ name: 'RadioGroup' })
 
-const { idFor, state, disabled, loading, size, validateField, getFieldValue, setFieldValue } =
-  useFieldStore<string | number | boolean>(focus)
+const {
+  idFor,
+  labelId,
+  state,
+  disabled,
+  loading,
+  size,
+  validateField,
+  getFieldValue,
+  setFieldValue
+} = useFieldStore<string | number | boolean>(focus)
 
 const _props = defineProps(radioGroupProps)
 const props = useProps('radioGroup', _props, {
@@ -136,7 +145,13 @@ function focus(options?: FocusOptions) {
 </script>
 
 <template>
-  <div :id="idFor" :class="className" role="radiogroup">
+  <div
+    :id="idFor"
+    :class="className"
+    role="radiogroup"
+    :aria-orientation="vertical ? 'vertical' : 'horizontal'"
+    :aria-labelledby="labelId"
+  >
     <slot>
       <template v-for="item in props.options" :key="item">
         <Radio
diff --git a/components/select/select.vue b/components/select/select.vue
index 479114172..f55b5b0da 100644
--- a/components/select/select.vue
+++ b/components/select/select.vue
@@ -3,7 +3,11 @@
     :id="idFor"
     ref="wrapper"
     :class="className"
-    :aria-disabled="props.disabled ? 'true' : undefined"
+    role="group"
+    :aria-disabled="toAttrValue(props.disabled)"
+    :aria-expanded="toAttrValue(currentVisible)"
+    aria-haspopup="listbox"
+    :aria-labelledby="labelId"
     @click="toggleVisible"
   >
     <div
@@ -237,9 +241,15 @@
         :class="[nh.be('icon'), nh.bem('icon', 'placeholder'), nh.be('suffix')]"
       ></div>
       <Transition :name="nh.ns('fade')" appear>
-        <div v-if="showClear" :class="[nh.be('icon'), nh.be('clear')]" @click.stop="handleClear">
+        <button
+          v-if="showClear"
+          :class="[nh.be('icon'), nh.be('clear')]"
+          tabindex="-1"
+          :aria-label="locale.ariaLabel.clear"
+          @click.stop="handleClear"
+        >
           <Icon v-bind="icons.clear" label="clear"></Icon>
-        </div>
+        </button>
         <div v-else-if="props.loading" :class="[nh.be('icon'), nh.be('loading')]">
           <Icon
             v-bind="icons.loading"
@@ -283,7 +293,8 @@
           :items-attrs="{
             class: [nh.be('options'), props.optionCheck ? nh.bem('options', 'has-check') : ''],
             role: 'listbox',
-            ariaLabel: 'options'
+            ariaLabel: 'options',
+            ariaMultiselectable: props.multiple
           }"
         >
           <template #default="{ item: option, index }">
@@ -386,7 +397,14 @@ import {
   useNameHelper,
   useProps
 } from '@vexip-ui/config'
-import { decide, getLast, getRangeWidth, isNull, removeArrayItem } from '@vexip-ui/utils'
+import {
+  decide,
+  getLast,
+  getRangeWidth,
+  isNull,
+  removeArrayItem,
+  toAttrValue
+} from '@vexip-ui/utils'
 import { selectProps } from './props'
 
 import type { PopperExposed } from '@/components/popper'
@@ -449,6 +467,7 @@ export default defineComponent({
   setup(_props, { emit, slots }) {
     const {
       idFor,
+      labelId,
       state,
       disabled,
       loading,
@@ -521,6 +540,8 @@ export default defineComponent({
     })
 
     const locale = useLocale('select', toRef(props, 'locale'))
+    const icons = useIcons()
+
     const currentVisible = ref(props.visible)
     const currentLabels = ref<string[]>([])
     const currentValues = ref<SelectBaseValue[]>([])
@@ -1351,8 +1372,9 @@ export default defineComponent({
       props,
       nh,
       locale,
-      icons: useIcons(),
+      icons,
       idFor,
+      labelId,
       currentVisible,
       currentValues,
       currentLabels,
@@ -1387,6 +1409,7 @@ export default defineComponent({
       virtualList,
       restTip,
 
+      toAttrValue,
       getOptionFromMap,
       isSelected,
       filterOptions,
diff --git a/components/slider/slider.vue b/components/slider/slider.vue
index d498b219a..c9eb86fa2 100644
--- a/components/slider/slider.vue
+++ b/components/slider/slider.vue
@@ -24,7 +24,7 @@ const enum TriggerType {
 
 defineOptions({ name: 'Slider' })
 
-const { idFor, state, disabled, loading, validateField, getFieldValue, setFieldValue } =
+const { idFor, state, labelId, disabled, loading, validateField, getFieldValue, setFieldValue } =
   useFieldStore<number | number[]>(focus)
 
 const _props = defineProps(sliderProps)
@@ -536,6 +536,8 @@ function blur() {
     :id="idFor"
     :class="className"
     tabindex="-1"
+    role="group"
+    :aria-labelledby="labelId"
     @pointerdown="handleTrackDown"
     @pointerenter="handlePointerEnter"
     @pointerleave="handlePointerLeave"
diff --git a/components/switch/switch.vue b/components/switch/switch.vue
index 0bda41460..191a65299 100644
--- a/components/switch/switch.vue
+++ b/components/switch/switch.vue
@@ -1,9 +1,149 @@
+<script setup lang="ts">
+import { Icon } from '@/components/icon'
+import { useFieldStore } from '@/components/form'
+
+import { computed, ref, watch } from 'vue'
+
+import {
+  createIconProp,
+  createSizeProp,
+  createStateProp,
+  emitEvent,
+  useIcons,
+  useNameHelper,
+  useProps
+} from '@vexip-ui/config'
+import { isPromise } from '@vexip-ui/utils'
+import { switchProps } from './props'
+
+defineOptions({ name: 'Switch' })
+
+const {
+  idFor,
+  labelId,
+  state,
+  disabled,
+  loading,
+  size,
+  validateField,
+  getFieldValue,
+  setFieldValue
+} = useFieldStore<boolean>(() => input.value?.focus())
+
+const _props = defineProps(switchProps)
+const props = useProps('switch', _props, {
+  size: createSizeProp(size),
+  state: createStateProp(state),
+  value: {
+    default: () => getFieldValue(),
+    static: true
+  },
+  disabled: () => disabled.value,
+  openColor: '',
+  closeColor: '',
+  loading: () => loading.value,
+  loadingIcon: createIconProp(),
+  loadingEffect: null,
+  openIcon: createIconProp(),
+  closeIcon: createIconProp(),
+  openText: '',
+  closeText: '',
+  onBeforeChange: {
+    default: null,
+    isFunc: true
+  },
+  rectangle: false,
+  name: {
+    default: '',
+    static: true
+  }
+})
+
+const emit = defineEmits(['update:value'])
+
+const nh = useNameHelper('switch')
+const icons = useIcons()
+const currentValue = ref(props.value)
+
+const input = ref<HTMLInputElement>()
+
+const className = computed(() => {
+  return [
+    nh.b(),
+    nh.bs('vars'),
+    {
+      [nh.bm('inherit')]: props.inherit,
+      [nh.bm('open')]: currentValue.value,
+      [nh.bm(props.size)]: props.size !== 'default',
+      [nh.bm(props.state)]: props.state !== 'default',
+      [nh.bm('disabled')]: props.disabled,
+      [nh.bm('loading')]: props.loading,
+      [nh.bm('rectangle')]: props.rectangle
+    }
+  ]
+})
+const style = computed(() => {
+  return {
+    backgroundColor: currentValue.value ? props.openColor : props.closeColor
+  }
+})
+const signalStyle = computed(() => {
+  return {
+    color: currentValue.value ? props.openColor : props.closeColor
+  }
+})
+const isDisabled = computed(() => {
+  return props.disabled || props.loading
+})
+
+watch(
+  () => props.value,
+  value => {
+    currentValue.value = value
+  }
+)
+
+defineExpose({
+  idFor,
+  labelId,
+  currentValue,
+  input,
+  focus: (options?: FocusOptions) => input.value?.focus(options),
+  blur: () => input.value?.blur()
+})
+
+async function handleChange(checked = !currentValue.value) {
+  if (checked === currentValue.value) return
+
+  let result: unknown = true
+
+  if (typeof props.onBeforeChange === 'function') {
+    result = props.onBeforeChange(checked)
+
+    if (isPromise(result)) {
+      result = await result
+    }
+  }
+
+  if (result !== false) {
+    currentValue.value = checked
+
+    emit('update:value', checked)
+    setFieldValue(checked)
+    emitEvent(props.onChange, checked)
+    validateField()
+  }
+}
+</script>
+
 <template>
   <label
     :id="idFor"
     :class="className"
     role="switch"
     :aria-checked="currentValue"
+    :aria-disabled="isDisabled"
+    :aria-labelledby="labelId"
     :style="style"
   >
     <input
@@ -17,7 +157,7 @@
       @change="handleChange()"
       @click.stop
     />
-    <span :class="nh.be('placeholder')">
+    <span :class="nh.be('placeholder')" aria-hidden>
       <span :class="nh.be('open-text')">
         <slot name="open">{{ props.openText }}</slot>
       </span>
@@ -49,147 +189,3 @@
     </span>
   </label>
 </template>
-
-<script lang="ts">
-import { Icon } from '@/components/icon'
-import { useFieldStore } from '@/components/form'
-
-import { computed, defineComponent, ref, watch } from 'vue'
-
-import {
-  createIconProp,
-  createSizeProp,
-  createStateProp,
-  emitEvent,
-  useIcons,
-  useNameHelper,
-  useProps
-} from '@vexip-ui/config'
-import { isPromise } from '@vexip-ui/utils'
-import { switchProps } from './props'
-
-export default defineComponent({
-  name: 'Switch',
-  components: {
-    Icon
-  },
-  props: switchProps,
-  emits: ['update:value'],
-  setup(_props, { emit }) {
-    const { idFor, state, disabled, loading, size, validateField, getFieldValue, setFieldValue } =
-      useFieldStore<boolean>(() => input.value?.focus())
-
-    const props = useProps('switch', _props, {
-      size: createSizeProp(size),
-      state: createStateProp(state),
-      value: {
-        default: () => getFieldValue(),
-        static: true
-      },
-      disabled: () => disabled.value,
-      openColor: '',
-      closeColor: '',
-      loading: () => loading.value,
-      loadingIcon: createIconProp(),
-      loadingEffect: null,
-      openIcon: createIconProp(),
-      closeIcon: createIconProp(),
-      openText: '',
-      closeText: '',
-      onBeforeChange: {
-        default: null,
-        isFunc: true
-      },
-      rectangle: false,
-      name: {
-        default: '',
-        static: true
-      }
-    })
-
-    const nh = useNameHelper('switch')
-    const currentValue = ref(props.value)
-
-    const input = ref<HTMLInputElement>()
-
-    const className = computed(() => {
-      return [
-        nh.b(),
-        nh.bs('vars'),
-        {
-          [nh.bm('inherit')]: props.inherit,
-          [nh.bm('open')]: currentValue.value,
-          [nh.bm(props.size)]: props.size !== 'default',
-          [nh.bm(props.state)]: props.state !== 'default',
-          [nh.bm('disabled')]: props.disabled,
-          [nh.bm('loading')]: props.loading,
-          [nh.bm('rectangle')]: props.rectangle
-        }
-      ]
-    })
-    const style = computed(() => {
-      return {
-        backgroundColor: currentValue.value ? props.openColor : props.closeColor
-      }
-    })
-    const signalStyle = computed(() => {
-      return {
-        color: currentValue.value ? props.openColor : props.closeColor
-      }
-    })
-    const isDisabled = computed(() => {
-      return props.disabled || props.loading
-    })
-
-    watch(
-      () => props.value,
-      value => {
-        currentValue.value = value
-      }
-    )
-
-    async function handleChange(checked = !currentValue.value) {
-      if (checked === currentValue.value) return
-
-      let result: unknown = true
-
-      if (typeof props.onBeforeChange === 'function') {
-        result = props.onBeforeChange(checked)
-
-        if (isPromise(result)) {
-          result = await result
-        }
-      }
-
-      if (result !== false) {
-        currentValue.value = checked
-
-        emit('update:value', checked)
-        setFieldValue(checked)
-        emitEvent(props.onChange, checked)
-        validateField()
-      }
-    }
-
-    return {
-      props,
-      nh,
-      icons: useIcons(),
-      idFor,
-      currentValue,
-
-      className,
-      style,
-      signalStyle,
-      isDisabled,
-
-      input,
-
-      handleChange,
-
-      focus: (options?: FocusOptions) => input.value?.focus(options),
-      blur: () => input.value?.blur()
-    }
-  }
-})
-</script>
diff --git a/components/textarea/textarea.vue b/components/textarea/textarea.vue
index c0ac65ca8..e38a3a813 100644
--- a/components/textarea/textarea.vue
+++ b/components/textarea/textarea.vue
@@ -18,7 +18,7 @@ import { textareaProps } from './props'
 
 defineOptions({ name: 'Textarea' })
 
-const { idFor, state, disabled, loading, validateField, getFieldValue, setFieldValue } =
+const { idFor, state, labelId, disabled, loading, validateField, getFieldValue, setFieldValue } =
   useFieldStore<string>(() => textarea.value?.focus())
 
 const _props = defineProps(textareaProps)
@@ -248,6 +248,7 @@ function handleCompositionEnd(event: CompositionEvent) {
       :placeholder="props.placeholder ?? locale.placeholder"
       :maxlength="props.maxLength > 0 ? props.maxLength : undefined"
       :name="props.name || props.controlAttrs?.name"
+      :aria-labelledby="labelId"
       @blur="handleBlur"
       @focus="handleFocus"
       @keyup.enter="handleEnter"
diff --git a/components/tooltip/tooltip.tsx b/components/tooltip/tooltip.tsx
index 553290f07..1dd25e196 100644
--- a/components/tooltip/tooltip.tsx
+++ b/components/tooltip/tooltip.tsx
@@ -21,7 +21,7 @@ import {
   usePopper,
   useSetTimeout
 } from '@vexip-ui/hooks'
-import { isElement } from '@vexip-ui/utils'
+import { getGlobalCount, isElement } from '@vexip-ui/utils'
 import { tooltipProps } from './props'
 
 import type { PopperExposed } from '@/components/popper'
@@ -66,6 +66,9 @@ export default defineComponent({
       shift: false
     })
 
+    const idIndex = `${getGlobalCount()}`
+    const tooltipId = computed(() => nh.bs(idIndex))
+
     const hoverDelay = useHoverDelay()
     const { timer } = useSetTimeout()
 
@@ -298,7 +301,7 @@ export default defineComponent({
     }
 
     return () => {
-      const CustomTag = props.wrapper
+      const Wrapper = props.wrapper
         ? ((props.wrapper === true ? 'span' : props.wrapper) as any)
         : null
       const triggers = slots.trigger?.(slotParams)
@@ -308,11 +311,13 @@ export default defineComponent({
         if (!triggerVNode) return null
 
         if (triggerVNode.type === TEXT_VNODE) {
-          return CustomTag ? <span>{triggerVNode}</span> : <span {...attrs}>{triggerVNode}</span>
+          return Wrapper ? <span>{triggerVNode}</span> : <span {...attrs}>{triggerVNode}</span>
         }
 
-        if (!CustomTag) {
-          triggerVNode.props = mergeProps(triggerVNode.props || {}, attrs)
+        if (!Wrapper) {
+          triggerVNode.props = mergeProps(triggerVNode.props || {}, attrs, {
+            'aria-describedby': tooltipId.value
+          })
         }
 
         return triggerVNode
@@ -320,22 +325,22 @@ export default defineComponent({
 
       return [
         triggerVNode &&
-          (CustomTag
-            ? (
-              <CustomTag
-                {...attrs}
-                ref={originalTrigger}
-                class={[nh.b(), nh.bs('vars'), props.inherit && nh.bm('inherit')]}
-              >
-                {triggers}
-              </CustomTag>
-              )
-            : (
-              <Fragment ref={syncTriggerRef as any}>{renderTrigger()}</Fragment>
-              )),
+          (Wrapper ? (
+            <Wrapper
+              {...attrs}
+              ref={originalTrigger}
+              class={[nh.b(), nh.bs('vars'), props.inherit && nh.bm('inherit')]}
+              aria-describedby={tooltipId.value}
+            >
+              {triggers}
+            </Wrapper>
+          ) : (
+            <Fragment ref={syncTriggerRef as any}>{renderTrigger()}</Fragment>
+          )),
         !props.disabled && (props.tipAlive || rendering.value) && (
           <Popper
             ref={popper}
+            id={tooltipId.value}
             class={{
               [nh.be('popper')]: true,
               [nh.bs('vars')]: true,
diff --git a/components/transfer/transfer.tsx b/components/transfer/transfer.tsx
index c75e6f900..1c61a0c80 100644
--- a/components/transfer/transfer.tsx
+++ b/components/transfer/transfer.tsx
@@ -44,8 +44,16 @@ export default defineComponent({
   props: transferProps,
   emits: ['update:value'],
   setup(_props, { slots, emit, expose }) {
-    const { idFor, state, disabled, loading, validateField, getFieldValue, setFieldValue } =
-      useFieldStore<(string | number)[]>(() => source.value?.$el?.focus())
+    const {
+      idFor,
+      labelId,
+      state,
+      disabled,
+      loading,
+      validateField,
+      getFieldValue,
+      setFieldValue
+    } = useFieldStore<(string | number)[]>(() => source.value?.$el?.focus())
 
     const props = useProps('transfer', _props, {
       state: createStateProp(state),
@@ -294,7 +302,12 @@ export default defineComponent({
 
     return () => {
       return (
-        <div id={idFor.value} class={className.value}>
+        <div
+          id={idFor.value}
+          class={className.value}
+          role={'application'}
+          aria-labelledby={labelId.value}
+        >
           <TransferPanel
             ref={source}
             v-model:selected={sourceSelected.value}
diff --git a/components/upload/upload-file.vue b/components/upload/upload-file.vue
index 5c19e0c39..8d1bb0503 100644
--- a/components/upload/upload-file.vue
+++ b/components/upload/upload-file.vue
@@ -158,6 +158,7 @@ function imageToBase64(file: UploadFileState) {
           <button
             type="button"
             :class="[nh.be('icon'), nh.be('close')]"
+            :aria-label="locale.ariaLabel.delete"
             @click="handleDelete(props.file)"
           >
             <Icon v-bind="icons.delete"></Icon>
@@ -248,6 +249,7 @@ function imageToBase64(file: UploadFileState) {
                 }
               ]"
               :disabled="!props.canPreview(props.file)"
+              :aria-label="locale.ariaLabel.preview"
               @click="handlePreview(props.file)"
             >
               <Icon v-bind="icons.preview" :scale="+(icons.preview.scale || 1) * 1.4"></Icon>
@@ -255,6 +257,7 @@ function imageToBase64(file: UploadFileState) {
             <button
               type="button"
               :class="[nh.be('icon'), nh.be('action')]"
+              :aria-label="locale.ariaLabel.delete"
               @click="handleDelete(props.file)"
             >
               <Icon v-bind="icons.delete" :scale="+(icons.delete.scale || 1) * 1.4"></Icon>
diff --git a/components/upload/upload.tsx b/components/upload/upload.tsx
index 99a0f25bb..78def5c45 100644
--- a/components/upload/upload.tsx
+++ b/components/upload/upload.tsx
@@ -56,8 +56,17 @@ export default defineComponent({
   props: uploadProps,
   emits: ['update:file-list'],
   setup(_props, { slots, emit, expose }) {
-    const { idFor, state, disabled, loading, size, validateField, getFieldValue, setFieldValue } =
-      useFieldStore<UploadFileOptions[]>(focus)
+    const {
+      idFor,
+      labelId,
+      state,
+      disabled,
+      loading,
+      size,
+      validateField,
+      getFieldValue,
+      setFieldValue
+    } = useFieldStore<UploadFileOptions[]>(focus)
 
     const props = useProps('upload', _props, {
       state: createStateProp(state),
@@ -663,100 +672,94 @@ export default defineComponent({
     }
 
     function renderNormalAction() {
-      return !props.allowDrag && !props.disabledClick
-        ? (
-          <>
-            <Button
-              ref={button}
-              inherit
-              size={size.value}
-              type={props.state}
-              disabled={props.disabled}
-              loading={props.loading}
-            >
-              {{
-                default: () => props.buttonLabel ?? locale.value.upload,
-                icon: () => <Icon {...icons.value.upload} />,
-                loading: () => (
-                  <Icon
-                    {...icons.value.loading}
-                    class={nh.be('loading-icon')}
-                    effect={props.loadingEffect || icons.value.loading.effect}
-                    icon={props.loadingIcon || icons.value.loading.icon}
-                    label={'loading'}
-                  />
-                )
-              }}
-            </Button>
-            {slots.tip
-              ? renderSlot(slots, 'tip')
-              : props.tip && <p class={nh.be('tip')}>{props.tip}</p>}
-          </>
-          )
-        : (
-          <div
-            ref={panel}
-            class={[nh.be('drag-panel'), props.disabled && nh.bem('drag-panel', 'disabled')]}
-            tabindex={0}
+      return !props.allowDrag && !props.disabledClick ? (
+        <>
+          <Button
+            ref={button}
+            inherit
+            size={size.value}
+            type={props.state}
+            disabled={props.disabled}
+            loading={props.loading}
           >
-            <Icon
-              {...icons.value.uploadCloud}
-              class={[nh.be('cloud'), props.disabled && nh.bem('cloud', 'disabled')]}
-              scale={+(icons.value.uploadCloud.scale || 1) * 4}
-            />
-            {slots.tip
-              ? (
-                  renderSlot(slots, 'tip')
-                )
-              : (
-                <p class={nh.be('tip')}>{props.tip || locale.value.dragOrClick}</p>
-                )}
-            <Icon
-              {...icons.value.loading}
-              class={nh.be('loading-icon')}
-              effect={props.loadingEffect || icons.value.loading.effect}
-              icon={props.loadingIcon || icons.value.loading.icon}
-              label={'loading'}
-              style={{ opacity: props.loading ? '100%' : '0%' }}
-            />
-          </div>
-          )
+            {{
+              default: () => props.buttonLabel ?? locale.value.upload,
+              icon: () => <Icon {...icons.value.upload} />,
+              loading: () => (
+                <Icon
+                  {...icons.value.loading}
+                  class={nh.be('loading-icon')}
+                  effect={props.loadingEffect || icons.value.loading.effect}
+                  icon={props.loadingIcon || icons.value.loading.icon}
+                  label={'loading'}
+                />
+              )
+            }}
+          </Button>
+          {slots.tip
+            ? renderSlot(slots, 'tip')
+            : props.tip && <p class={nh.be('tip')}>{props.tip}</p>}
+        </>
+      ) : (
+        <div
+          ref={panel}
+          class={[nh.be('drag-panel'), props.disabled && nh.bem('drag-panel', 'disabled')]}
+          tabindex={0}
+        >
+          <Icon
+            {...icons.value.uploadCloud}
+            class={[nh.be('cloud'), props.disabled && nh.bem('cloud', 'disabled')]}
+            scale={+(icons.value.uploadCloud.scale || 1) * 4}
+          />
+          {slots.tip ? (
+            renderSlot(slots, 'tip')
+          ) : (
+            <p class={nh.be('tip')}>{props.tip || locale.value.dragOrClick}</p>
+          )}
+          <Icon
+            {...icons.value.loading}
+            class={nh.be('loading-icon')}
+            effect={props.loadingEffect || icons.value.loading.effect}
+            icon={props.loadingIcon || icons.value.loading.icon}
+            label={'loading'}
+            style={{ opacity: props.loading ? '100%' : '0%' }}
+          />
+        </div>
+      )
     }
 
     function renderImageAction() {
       return (
-        <div class={[nh.be('image-action'), props.disabled && nh.bem('image-action', 'disabled')]}>
-          {slots.default
-            ? (
-                renderSlot(slots, 'default', {
-                  isDragOver: (props.allowDrag || props.disabledClick) && isDragOver.value
-                })
-              )
-            : (
-              <>
-                {props.loading
-                  ? (
-                    <Icon
-                      {...icons.value.loading}
-                      class={nh.be('loading-icon')}
-                      effect={props.loadingEffect || icons.value.loading.effect}
-                      icon={props.loadingIcon || icons.value.loading.icon}
-                      label={'loading'}
-                      style={{ marginBottom: '6px' }}
-                    />
-                    )
-                  : (
-                    <Icon
-                      {...icons.value.plus}
-                      class={[nh.be('cloud'), props.disabled && nh.bem('cloud', 'disabled')]}
-                      scale={+(icons.value.plus.scale || 1) * 1.2}
-                      style={{ marginBottom: '6px' }}
-                    />
-                    )}
-                <span>{props.buttonLabel ?? locale.value.upload}</span>
-              </>
+        <button
+          class={[nh.be('image-action'), props.disabled && nh.bem('image-action', 'disabled')]}
+        >
+          {slots.default ? (
+            renderSlot(slots, 'default', {
+              isDragOver: (props.allowDrag || props.disabledClick) && isDragOver.value
+            })
+          ) : (
+            <>
+              {props.loading ? (
+                <Icon
+                  {...icons.value.loading}
+                  class={nh.be('loading-icon')}
+                  effect={props.loadingEffect || icons.value.loading.effect}
+                  icon={props.loadingIcon || icons.value.loading.icon}
+                  label={'loading'}
+                  style={{ marginBottom: '6px' }}
+                />
+              ) : (
+                <Icon
+                  {...icons.value.plus}
+                  class={[nh.be('cloud'), props.disabled && nh.bem('cloud', 'disabled')]}
+                  scale={+(icons.value.plus.scale || 1) * 1.2}
+                  style={{ marginBottom: '6px' }}
+                />
               )}
-        </div>
+              <span>{props.buttonLabel ?? locale.value.upload}</span>
+            </>
+          )}
+        </button>
       )
     }
 
@@ -825,7 +828,7 @@ export default defineComponent({
     }
 
     return () => (
-      <div id={idFor.value} class={className.value}>
+      <div id={idFor.value} class={className.value} role={'group'} aria-labelledby={labelId.value}>
         {!props.image && renderControl()}
         {!props.hiddenFiles && renderFileList()}
       </div>
diff --git a/components/wheel/wheel-item.vue b/components/wheel/wheel-item.vue
index d3121031c..686d5f7c0 100644
--- a/components/wheel/wheel-item.vue
+++ b/components/wheel/wheel-item.vue
@@ -1,3 +1,68 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUnmount, onMounted, reactive, ref, toRef } from 'vue'
+
+import { useNameHelper } from '@vexip-ui/config'
+import { WHEEL_STATE } from './symbol'
+
+defineOptions({ name: 'WheelItem' })
+
+const props = defineProps({
+  value: {
+    type: [Number, String],
+    default: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  active: {
+    type: Boolean,
+    default: false
+  },
+  meta: {
+    type: [String, Number, Object],
+    default: null
+  }
+})
+
+const nh = useNameHelper('wheel')
+
+const wheelState = inject(WHEEL_STATE, null)
+
+const width = ref(0)
+const height = ref(0)
+
+const wrapper = ref<HTMLElement>()
+
+const state = reactive({
+  width,
+  height,
+  el: wrapper,
+  value: toRef(props, 'value'),
+  disabled: toRef(props, 'disabled'),
+  meta: toRef(props, 'meta')
+})
+
+const style = computed(() => {
+  return {
+    width: width.value ? `${width.value}px` : undefined,
+    height: height.value ? `${height.value}px` : undefined
+  }
+})
+
+if (wheelState) {
+  onMounted(() => {
+    wheelState.increaseItem(state)
+  })
+
+  onBeforeUnmount(() => {
+    wheelState.decreaseItem(state)
+  })
+}
+
+defineExpose({ wrapper })
+</script>
+
 <template>
   <li
     ref="wrapper"
@@ -16,81 +81,3 @@
     </slot>
   </li>
 </template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  onBeforeUnmount,
-  onMounted,
-  reactive,
-  ref,
-  toRef
-} from 'vue'
-
-import { useNameHelper } from '@vexip-ui/config'
-import { WHEEL_STATE } from './symbol'
-
-export default defineComponent({
-  name: 'WheelItem',
-  props: {
-    value: {
-      type: [Number, String],
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    active: {
-      type: Boolean,
-      default: false
-    },
-    meta: {
-      type: [String, Number, Object],
-      default: null
-    }
-  },
-  setup(props) {
-    const wheelState = inject(WHEEL_STATE, null)
-
-    const width = ref(0)
-    const height = ref(0)
-
-    const wrapper = ref<HTMLElement>()
-
-    const state = reactive({
-      width,
-      height,
-      el: wrapper,
-      value: toRef(props, 'value'),
-      disabled: toRef(props, 'disabled'),
-      meta: toRef(props, 'meta')
-    })
-
-    const style = computed(() => {
-      return {
-        width: width.value ? `${width.value}px` : undefined,
-        height: height.value ? `${height.value}px` : undefined
-      }
-    })
-
-    if (wheelState) {
-      onMounted(() => {
-        wheelState.increaseItem(state)
-      })
-
-      onBeforeUnmount(() => {
-        wheelState.decreaseItem(state)
-      })
-    }
-
-    return {
-      nh: useNameHelper('wheel'),
-      style,
-      wrapper
-    }
-  }
-})
-</script>
diff --git a/components/wheel/wheel.vue b/components/wheel/wheel.vue
index aee7b371a..d8b036c9e 100644
--- a/components/wheel/wheel.vue
+++ b/components/wheel/wheel.vue
@@ -16,7 +16,7 @@ import type { ItemState, WheelOption, WheelRawOption } from './symbol'
 
 defineOptions({ name: 'Wheel' })
 
-const { idFor, state, disabled, loading, validateField, getFieldValue, setFieldValue } =
+const { idFor, labelId, state, disabled, loading, validateField, getFieldValue, setFieldValue } =
   useFieldStore<string | number>(() => wrapper.value?.focus())
 
 const _props = defineProps(wheelProps)
@@ -422,6 +422,8 @@ function handleItemClick(value: string | number, data: WheelRawOption) {
     ref="wrapper"
     :class="className"
     tabindex="0"
+    role="group"
+    :aria-labelledby="labelId"
   >
     <div
       v-if="props.arrow"
@@ -431,11 +433,12 @@ function handleItemClick(value: string | number, data: WheelRawOption) {
         nh.bem('arrow', 'prev'),
         prevDisabled ? nh.bem('arrow', 'disabled') : ''
       ]"
+      aria-hidden
       @click="handlePrev"
     >
       <Icon v-bind="prevIcon"></Icon>
     </div>
-    <div :class="nh.be('scroll')">
+    <div :class="nh.be('scroll')" role="none">
       <Scroll
         ref="scroll"
         inherit
@@ -491,6 +494,7 @@ function handleItemClick(value: string | number, data: WheelRawOption) {
         nh.bem('arrow', 'next'),
         nextDisabled ? nh.bem('arrow', 'disabled') : ''
       ]"
+      aria-hidden
       @click="handleNext"
     >
       <Icon v-bind="nextIcon"></Icon>
diff --git a/style/cascader.scss b/style/cascader.scss
index d46890d9f..d59f12c0d 100644
--- a/style/cascader.scss
+++ b/style/cascader.scss
@@ -203,4 +203,8 @@ $cascader: map.merge(
     cursor: default;
     background-color: get-css-var('cascader-pane-bg-color');
   }
+
+  &__clear {
+    @include clean-button;
+  }
 }
diff --git a/style/color-picker.scss b/style/color-picker.scss
index a6eea700c..8db8f0a00 100644
--- a/style/color-picker.scss
+++ b/style/color-picker.scss
@@ -257,4 +257,8 @@ $color-picker: map.merge(
     width: auto;
     min-width: 0;
   }
+
+  &__clear {
+    @include clean-button;
+  }
 }
diff --git a/style/date-picker.scss b/style/date-picker.scss
index 99d3004ea..5016abc99 100644
--- a/style/date-picker.scss
+++ b/style/date-picker.scss
@@ -147,6 +147,10 @@ $date-picker: map.merge(
     width: 2px;
   }
 
+  &__clear {
+    @include clean-button;
+  }
+
   &__popper {
     padding: 8px 0;
   }
diff --git a/style/input.scss b/style/input.scss
index a48ba633f..ff425f8fb 100644
--- a/style/input.scss
+++ b/style/input.scss
@@ -212,6 +212,10 @@ $input: map.merge(
     transition: get-css-var('transition-opacity');
   }
 
+  &__clear {
+    @include clean-button;
+  }
+
   &__clear,
   &__loading {
     position: absolute;
diff --git a/style/number-input.scss b/style/number-input.scss
index 8f425bd6b..6b5be8b86 100644
--- a/style/number-input.scss
+++ b/style/number-input.scss
@@ -30,6 +30,10 @@ $number-input: map.merge(
     color: get-css-var('number-input-control-color-out');
   }
 
+  &__clear {
+    @include clean-button;
+  }
+
   &__clear,
   &__loading {
     inset-inline-end: calc(get-css-var('input-h-padding') + 20px);
diff --git a/style/select.scss b/style/select.scss
index aad7d9b1c..0c4a1b2ed 100644
--- a/style/select.scss
+++ b/style/select.scss
@@ -240,10 +240,6 @@ $select: map.merge(
     color: get-css-var('select-check-color');
   }
 
-  // &__arrow {
-  //   transition: get-css-var('transition-transform');
-  // }
-
   &__selector--focused &__arrow {
     transform: rotate(180deg);
   }
@@ -259,4 +255,8 @@ $select: map.merge(
     cursor: default;
     background-color: get-css-var('select-list-bg-color');
   }
+
+  &__clear {
+    @include clean-button;
+  }
 }
diff --git a/style/shared/mixins.scss b/style/shared/mixins.scss
index fea7229aa..28d73c820 100644
--- a/style/shared/mixins.scss
+++ b/style/shared/mixins.scss
@@ -56,6 +56,15 @@
   }
 }
 
+@mixin clean-button {
+  padding: 0;
+  appearance: none;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: 0;
+}
+
 @mixin query-media($point) {
   @if map.has-key($break-point-map, $point) {
     @media screen and #{inspect(map.get($break-point-map, $point))} {
diff --git a/style/time-picker.scss b/style/time-picker.scss
index 6b8c5a8a1..069372e86 100644
--- a/style/time-picker.scss
+++ b/style/time-picker.scss
@@ -134,6 +134,10 @@ $time-picker: map.merge(
     color: get-css-var('time-picker-color-disabled');
   }
 
+  &__clear {
+    @include clean-button;
+  }
+
   &__popper {
     padding: 8px 0;
   }
diff --git a/style/upload.scss b/style/upload.scss
index c647459ea..46e9fe9f1 100644
--- a/style/upload.scss
+++ b/style/upload.scss
@@ -122,7 +122,8 @@ $upload: map.merge(
       border-color: get-css-var('upload-panel-b-color-hover');
     }
 
-    &:focus {
+    &:focus,
+    &:focus-within {
       border-color: get-css-var('upload-panel-b-color-focus');
     }
 
@@ -139,6 +140,8 @@ $upload: map.merge(
   }
 
   &__image-action {
+    @include clean-button;
+
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -146,6 +149,7 @@ $upload: map.merge(
     width: get-css-var('upload-thumb-size');
     height: get-css-var('upload-thumb-size');
     color: get-css-var('upload-thumb-color');
+    cursor: inherit;
 
     &--disabled {
       color: get-css-var('content-color-disabled');
@@ -431,13 +435,10 @@ $upload: map.merge(
   }
 
   &__action {
+    @include clean-button;
+
     position: relative;
-    padding: 0;
     margin: 0 4px;
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
-    outline: 0;
 
     &--disabled {
       color: get-css-var('upload-action-color-disabled');
@@ -499,13 +500,10 @@ $upload: map.merge(
   }
 
   &__close {
+    @include clean-button;
+
     position: absolute;
     inset-inline-end: 0;
-    padding: 0;
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
-    outline: 0;
 
     &:hover,
     &:focus {