feat: improve form control components a11y (vexip-ui#470)

* wip: add aria-labelledby * wip: date and time * feat: a11y * feat: locale
alphaelf · Apr 26, 2024 · b9b0805 · b9b0805
1 parent 623bf63
commit b9b0805
Show file tree

Hide file tree

Showing 61 changed files with 1,458 additions and 691 deletions.
diff --git 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
@@ -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
@@ -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: {