fix(Calendar): fix incorrect week numbers calculation (#3471)

* fix(Calendar): fix incorrect week numbers calculation

* fix(Calendar): fix incorrect week numbers calculation

* test(DatePicker): update tests for showWeekNumbers

src/Calendar/Table.tsx

@@ -25,7 +25,7 @@ const Table: RsRefForwardingComponent<'div', TableProps> = React.forwardRef(
       <Component role="grid" {...rest} ref={ref} className={classes}>
         <TableHeaderRow />
         {rows.map((week, index) => (
-          <TableRow key={index} weekendDate={week} />
+          <TableRow key={index} weekendDate={week} rowIndex={index + 1} />
         ))}
       </Component>
     );

src/Calendar/TableRow.tsx

@@ -7,6 +7,7 @@ import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
 import TableCell from './TableCell';
 export interface TableRowProps extends WithAsProps {
   weekendDate?: Date;
+  rowIndex?: number;
 }
 
 const TableRow: RsRefForwardingComponent<'div', TableRowProps> = React.forwardRef(
@@ -16,6 +17,7 @@ const TableRow: RsRefForwardingComponent<'div', TableRowProps> = React.forwardRe
       className,
       classPrefix = 'calendar-table',
       weekendDate = new Date(),
+      rowIndex,
       ...rest
     } = props;
     const {
@@ -99,12 +101,13 @@ const TableRow: RsRefForwardingComponent<'div', TableRowProps> = React.forwardRe
     };
 
     const classes = merge(className, prefix('row'));
+    const week = format(weekendDate, isoWeek ? 'I' : 'w', { firstWeekContainsDate: 4 });
 
     return (
-      <Component {...rest} ref={ref} role="row" className={classes}>
+      <Component {...rest} ref={ref} role="row" aria-rowindex={rowIndex} className={classes}>
         {showWeekNumbers && (
-          <div className={prefix('cell-week-number')} role="rowheader">
-            {format(weekendDate, isoWeek ? 'I' : 'w')}
+          <div role="rowheader" aria-label={`Week ${week}`} className={prefix('cell-week-number')}>
+            {week}
           </div>
         )}
         {renderDays()}

src/Calendar/test/CalendarSpec.tsx

@@ -165,4 +165,14 @@ describe('Calendar', () => {
     expect(onMonthChangeSpy).to.have.been.not.called;
     expect(onToggleMonthDropdownSpy).to.have.been.called;
   });
+
+  it('Should render the correct week numbers', () => {
+    const { rerender } = render(<Calendar value={new Date('2020-12-01')} showWeekNumbers />);
+
+    expect(screen.queryByRole('rowheader', { name: 'Week 53' })).to.be.exist;
+
+    rerender(<Calendar value={new Date('2022-12-01')} showWeekNumbers />);
+
+    expect(screen.queryByRole('rowheader', { name: 'Week 53' })).to.not.exist;
+  });
 });

src/DatePicker/test/DatePickerSpec.tsx

@@ -804,10 +804,10 @@ describe('DatePicker', () => {
   it('Should render week numbers given `showWeekNumbers=true`', () => {
     render(<DatePicker defaultOpen calendarDefaultDate={new Date('12/15/2021')} showWeekNumbers />);
 
-    [49, 50, 51, 52, 1, 2].forEach(weekOrder => {
+    [48, 49, 50, 51, 52, 1].forEach(weekOrder => {
       expect(screen.getByRole('grid', { name: 'Dec 2021' })).to.contain(
         screen.getByRole('rowheader', {
-          name: `${weekOrder}`
+          name: `Week ${weekOrder}`
         })
       );
     });