feat: improve a11y when table header is empty and add localization support (#904)

* feat: improve a11y when table header is empty

* feat: Add 'week' localization support across multiple locales

* fix: Update Turkmen locale 'week' translation

Author: aojunhao123

src/PickerPanel/DatePanel/index.tsx

@@ -98,7 +98,13 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
       : []);
 
   if (prefixColumn) {
-    headerCells.push(<th key="empty" aria-label="empty cell" />);
+    headerCells.push(
+      <th key="empty">
+        <span style={{ width: 0, height: 0, position: 'absolute', overflow: 'hidden', opacity: 0 }}>
+          {locale.week}
+        </span>
+      </th>,
+    );
   }
   for (let i = 0; i < WEEK_DAY_COUNT; i += 1) {
     headerCells.push(<th key={i}>{weekDaysLocale[(i + weekFirstDay) % WEEK_DAY_COUNT]}</th>);
@@ -136,7 +142,7 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
   const yearNode: React.ReactNode = (
     <button
       type="button"
-      aria-label="year panel"
+      aria-label={locale.yearSelect}
       key="year"
       onClick={() => {
         onModeChange('year', pickerValue);
@@ -154,7 +160,7 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
   const monthNode: React.ReactNode = (
     <button
       type="button"
-      aria-label="month panel"
+      aria-label={locale.monthSelect}
       key="month"
       onClick={() => {
         onModeChange('month', pickerValue);

src/PickerPanel/MonthPanel/index.tsx

@@ -71,7 +71,7 @@ export default function MonthPanel<DateType extends object = any>(
     <button
       type="button"
       key="year"
-      aria-label="year panel"
+      aria-label={locale.yearSelect}
       onClick={() => {
         onModeChange('year');
       }}

src/PickerPanel/PanelHeader.tsx

@@ -122,7 +122,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
       {superOffset && (
         <button
           type="button"
-          aria-label="super-prev-year"
+          aria-label={locale.previousYear}
           onClick={() => onSuperOffset(-1)}
           tabIndex={-1}
           className={classNames(
@@ -138,7 +138,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
       {offset && (
         <button
           type="button"
-          aria-label="prev-year"
+          aria-label={locale.previousMonth}
           onClick={() => onOffset(-1)}
           tabIndex={-1}
           className={classNames(prevBtnCls, disabledOffsetPrev && `${prevBtnCls}-disabled`)}
@@ -152,7 +152,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
       {offset && (
         <button
           type="button"
-          aria-label="next-year"
+          aria-label={locale.nextMonth}
           onClick={() => onOffset(1)}
           tabIndex={-1}
           className={classNames(nextBtnCls, disabledOffsetNext && `${nextBtnCls}-disabled`)}
@@ -165,7 +165,7 @@ function PanelHeader<DateType extends object>(props: HeaderProps<DateType>) {
       {superOffset && (
         <button
           type="button"
-          aria-label="super-next-year"
+          aria-label={locale.nextYear}
           onClick={() => onSuperOffset(1)}
           tabIndex={-1}
           className={classNames(

src/PickerPanel/QuarterPanel/index.tsx

@@ -39,7 +39,7 @@ export default function QuarterPanel<DateType extends object = any>(
     <button
       type="button"
       key="year"
-      aria-label="year panel"
+      aria-label={locale.yearSelect}
       onClick={() => {
         onModeChange('year');
       }}

src/PickerPanel/YearPanel/index.tsx

@@ -77,7 +77,7 @@ export default function YearPanel<DateType extends object = any>(
     <button
       type="button"
       key="decade"
-      aria-label="decade panel"
+      aria-label={locale.decadeSelect}
       onClick={() => {
         onModeChange('decade');
       }}

src/interface.tsx

@@ -63,6 +63,7 @@ export type Locale = {
   dateSelect: string;
   weekSelect?: string;
   clear: string;
+  week: string;
   month: string;
   year: string;
   previousMonth: string;

src/locale/am_ET.ts

@@ -7,6 +7,7 @@ const locale: Locale = {
   backToToday: 'ወደ ዛሬ ተመለስ',
   ok: 'እሺ',
   clear: 'አንፃ',
+  week: 'ሳምንት',
   month: 'ወር',
   year: 'ዓመት',
   timeSelect: 'ሰዓት ምረጥ',

src/locale/ar_EG.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'العودة إلى اليوم',
   ok: 'تأكيد',
   clear: 'مسح',
+  week: 'الأسبوع',
   month: 'الشهر',
   year: 'السنة',
   timeSelect: 'اختيار الوقت',

src/locale/az_AZ.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Bugünə qayıt',
   ok: 'Təsdiq',
   clear: 'Təmizlə',
+  week: 'Həftə',
   month: 'Ay',
   year: 'İl',
   timeSelect: 'vaxtı seç',

src/locale/bg_BG.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Към днес',
   ok: 'Добре',
   clear: 'Изчистване',
+  week: 'Седмица',
   month: 'Месец',
   year: 'Година',
   timeSelect: 'Избор на час',

src/locale/bn_BD.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'আজকে ফিরে চলুন',
   ok: 'ওকে',
   clear: 'পরিস্কার',
+  week: 'সপ্তাহ',
   month: 'মাস',
   year: 'বছর',
   timeSelect: 'সময় নির্বাচন',

src/locale/by_BY.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Дадзеная дата',
   ok: 'OK',
   clear: 'Ачысціць',
+  week: 'Тыдзень',
   month: 'Месяц',
   year: 'Год',
   timeSelect: 'Выбраць час',

src/locale/ca_ES.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Tornar a avui',
   ok: 'Acceptar',
   clear: 'Netejar',
+  week: 'Setmana',
   month: 'Mes',
   year: 'Any',
   timeSelect: 'Seleccionar hora',

src/locale/cs_CZ.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Zpět na dnešek',
   ok: 'OK',
   clear: 'Vymazat',
+  week: 'Týden',
   month: 'Měsíc',
   year: 'Rok',
   timeSelect: 'Vybrat čas',

src/locale/da_DK.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Gå til i dag',
   ok: 'OK',
   clear: 'Ryd',
+  week: 'Uge',
   month: 'Måned',
   year: 'År',
   timeSelect: 'Vælg tidspunkt',

src/locale/de_DE.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Zurück zu Heute',
   ok: 'OK',
   clear: 'Zurücksetzen',
+  week: 'Woche',
   month: 'Monat',
   year: 'Jahr',
   timeSelect: 'Zeit wählen',

src/locale/el_GR.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Πίσω στη σημερινή μέρα',
   ok: 'OK',
   clear: 'Καθαρισμός',
+  week: 'Εβδομάδα',
   month: 'Μήνας',
   year: 'Έτος',
   timeSelect: 'Επιλογή ώρας',

src/locale/en_GB.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Back to today',
   ok: 'OK',
   clear: 'Clear',
+  week: 'Week',
   month: 'Month',
   year: 'Year',
   timeSelect: 'Select time',

src/locale/en_US.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Back to today',
   ok: 'OK',
   clear: 'Clear',
+  week: 'Week',
   month: 'Month',
   year: 'Year',
   timeSelect: 'select time',

src/locale/es_ES.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Volver a hoy',
   ok: 'Aceptar',
   clear: 'Limpiar',
+  week: 'Semana',
   month: 'Mes',
   year: 'Año',
   timeSelect: 'Seleccionar hora',

src/locale/es_MX.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Volver a hoy',
   ok: 'Aceptar',
   clear: 'Limpiar',
+  week: 'Semana',
   month: 'Mes',
   year: 'Año',
   timeSelect: 'elegir hora',

src/locale/et_EE.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Tagasi tänase juurde',
   ok: 'OK',
   clear: 'Tühista',
+  week: 'Nädal',
   month: 'Kuu',
   year: 'Aasta',
   timeSelect: 'Vali aeg',

src/locale/eu_ES.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Gaur itzuli',
   ok: 'OK',
   clear: 'Garbitu',
+  week: 'Asteko',
   month: 'Hilabete',
   year: 'Urte',
   timeSelect: 'Ordua aukeratu',

src/locale/fa_IR.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'بازگشت به روز',
   ok: 'باشه',
   clear: 'پاک کردن',
+  week: 'هفته',
   month: 'ماه',
   year: 'سال',
   timeSelect: 'انتخاب زمان',

src/locale/fi_FI.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Tämä päivä',
   ok: 'OK',
   clear: 'Tyhjennä',
+  week: 'Viikko',
   month: 'Kuukausi',
   year: 'Vuosi',
   timeSelect: 'Valise aika',

src/locale/fr_BE.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: "Aujourd'hui",
   ok: 'OK',
   clear: 'Rétablir',
+  week: 'Semaine',
   month: 'Mois',
   year: 'Année',
   timeSelect: "Sélectionner l'heure",

src/locale/fr_CA.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: "Aujourd'hui",
   ok: 'OK',
   clear: 'Rétablir',
+  week: 'Semaine',
   month: 'Mois',
   year: 'Année',
   timeSelect: "Sélectionner l'heure",

src/locale/fr_FR.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: "Aujourd'hui",
   ok: 'OK',
   clear: 'Rétablir',
+  week: 'Semaine',
   month: 'Mois',
   year: 'Année',
   timeSelect: "Sélectionner l'heure",

src/locale/ga_IE.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Ar ais inniu',
   ok: 'ceart go leor',
   clear: 'soiléir',
+  week: 'seachtain',
   month: 'mhí',
   year: 'bhliain',
   timeSelect: 'roghnaigh am',

src/locale/gl_ES.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Voltar a hoxe',
   ok: 'Aceptar',
   clear: 'Limpar',
+  week: 'Semana',
   month: 'Mes',
   year: 'Ano',
   timeSelect: 'Seleccionar hora',

src/locale/he_IL.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'חזור להיום',
   ok: 'אישור',
   clear: 'איפוס',
+  week: 'שבוע',
   month: 'חודש',
   year: 'שנה',
   timeSelect: 'בחר שעה',

src/locale/hi_IN.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'आज तक',
   ok: 'ठीक',
   clear: 'स्पष्ट',
+  week: 'सप्ताह',
   month: 'महीना',
   year: 'साल',
   timeSelect: 'समय का चयन करें',

src/locale/hr_HR.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Natrag na danas',
   ok: 'OK',
   clear: 'Očisti',
+  week: 'Sedmica',
   month: 'Mjesec',
   year: 'Godina',
   timeSelect: 'odaberite vrijeme',

src/locale/hu_HU.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Vissza a mai napra', // 'Back to today',
   ok: 'OK',
   clear: 'Törlés', // 'Clear',
+  week: 'Hét',
   month: 'Hónap', // 'Month',
   year: 'Év', // 'Year',
   timeSelect: 'Időpont kiválasztása', // 'Select time',

src/locale/id_ID.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Kembali ke hari ini',
   ok: 'Baik',
   clear: 'Bersih',
+  week: 'Minggu',
   month: 'Bulan',
   year: 'Tahun',
   timeSelect: 'pilih waktu',

src/locale/is_IS.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Til baka til dagsins í dag',
   ok: 'Í lagi',
   clear: 'Hreinsa',
+  week: 'Vika',
   month: 'Mánuður',
   year: 'Ár',
   timeSelect: 'Velja tíma',

src/locale/it_IT.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Torna ad oggi',
   ok: 'OK',
   clear: 'Cancella',
+  week: 'Settimana',
   month: 'Mese',
   year: 'Anno',
   timeSelect: "Seleziona l'ora",

src/locale/ja_JP.ts

@@ -12,6 +12,7 @@ const locale: Locale = {
   dateSelect: '日時を選択',
   weekSelect: '週を選択',
   clear: 'クリア',
+  week: '週',
   month: '月',
   year: '年',
   previousMonth: '前月 (ページアップキー)',

src/locale/ka_GE.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'მიმდინარე თარიღი',
   ok: 'OK',
   clear: 'გასუფთავება',
+  week: 'კვირა',
   month: 'თვე',
   year: 'წელი',
   timeSelect: 'დროის არჩევა',

src/locale/kk_KZ.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Ағымдағы күн',
   ok: 'Таңдау',
   clear: 'Таза',
+  week: 'Апта',
   month: 'Ай',
   year: 'Жыл',
   timeSelect: 'Уақытты таңдау',

src/locale/km_KH.ts

@@ -12,6 +12,7 @@ const locale: Locale = {
   dateSelect: 'ជ្រើសរើសកាលបរិច្ឆេទ',
   weekSelect: 'ជ្រើសរើសសប្តាហ៍',
   clear: 'ច្បាស់',
+  week: 'សប្តាហ៍',
   month: 'ខែ',
   year: 'ឆ្នាំ',
   previousMonth: 'ខែមុន (ឡើងទំព័រ)',

src/locale/kmr_IQ.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'Vegere îro',
   ok: 'Temam',
   clear: 'Paqij bike',
+  week: 'Sêbê',
   month: 'Meh',
   year: 'Sal',
   timeSelect: 'Demê hilbijêre',

src/locale/kn_IN.ts

@@ -9,6 +9,7 @@ const locale: Locale = {
   backToToday: 'ಇಂದು ಹಿಂದಿರುಗಿ',
   ok: 'ಸರಿ',
   clear: 'ಸ್ಪಷ್ಟ',
+  week: 'ವಾರ',
   month: 'ತಿಂಗಳು',
   year: 'ವರ್ಷ',
   timeSelect: 'ಸಮಯ ಆಯ್ಕೆಮಾಡಿ',