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: 'Избор на час',