Refactored Calendar component to remove dependency of primereact. (#2592

[mortoys]

Hi everyone,

I've reimplemented the new Calendar component as described below issue, and removed the dependency on primereact.

It generally follows the previous interactive logic, keeps the current system's colour and style, and adds a check for the available range of dates.

Any suggestions for improvement would be appreciated.

Magickbase/neuron-public-issues#66

[Keith-CY]

CI failed

[Keith-CY]

@Cedar67 please have a review on the functionality

[Keith-CY]

How is it going @Cedar67

[Cedar67]

How is it going @Cedar67

Two other high-priority issues are currently under validation. This PR will be arranged to complete the verification next Monday.

[Cedar67]

@mortoys The display style for the current day and the selected date should remain the same as before.

[Cedar67]

Need to add a period at the end of each month abbreviation.

[Cedar67]

One exception: When selecting another month by the arrow symbol, it automatically jumps back to the current month.

Screen.Recording.2023-03-06.at.2.31.40.PM.mov

[mortoys]

Need to add a period at the end of each month abbreviation.

According to the current i18n method, this cannot be controlled

[Cedar67]

Need to add a period at the end of each month abbreviation.

According to the current i18n method, this cannot be controlled

@mortoys Received. Thanks for your feedback. This product requirement change confirmation has been submitted to PM. Wait for his feedback.

[Cedar67]

One exception: When selecting another month by the arrow symbol, it automatically jumps back to the current month.

Verified.

[Cedar67]

@mortoys The display style for the current day and the selected date should remain the same as before.

Verified.

[Keith-CY]

Need to add a period at the end of each month abbreviation.

According to the current i18n method, this cannot be controlled

It can be done by updating here https://github.com/nervosnetwork/neuron/pull/2592/files#diff-227821703ffb93fc0998891374bc9394fb37fb7bfb38486fd284b9b0c5aaef69R98-R101

const getLocalMonthNames = (lang: string) => {
  const formater = new Intl.DateTimeFormat(lang, { month: 'short' })
  return Array.from({ length: 12 }, (_, i) => `${formater.format(new Date(Date.UTC(2023, i, 1)))}${lang.startsWith('en') ? '.' : ''}`)
}

[mortoys]

I found some calendar accessibility examples here：https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
https://react-spectrum.adobe.com/react-aria/useCalendar.html

and a great wai-aria lesson: https://www.udacity.com/course/web-accessibility--ud891
I plan to upgrade the component more accessibility

[mortoys]

Add focus style
Add wai-aria labels and related i18n language
Add focus fully controlled with the keyboard:

1. focus can be controlled by Tab and Shift + Tab to move forward and backward
2. Space and Enter to select
3. Up Arrow Down Arrow Right Arrow Left Arrow control the direction of movement
4. Home first day of the current month. End last day of the current month.
5. Page Up previous month Page Down next month

It can be tested use Mac Voiceover(press Command-F5), and feel whether the blind can be used properly
Also you can check accessibility tree in Chrome DevTools.

It's still a lot to do, e.g.

• The modal must trap the focus

[Cedar67]

Code scanning and Unit test results indicate exceptions that need to be confirmed.

[Keith-CY]

CI failed at https://github.com/nervosnetwork/neuron/actions/runs/4403595487/jobs/7713534899#step:9:478

[Cedar67]

Cannot be saved after the year is changed.

Screen.Recording.2023-03-19.at.7.20.41.AM.mov

[Cedar67]

Need to add a period at the end of each month abbreviation.

This issue has been Solved and Verified.

[Keith-CY]

Need to add a period at the end of each month abbreviation.

This issue has been Solved and Verified.

Please mark this PR approved if tests are all green

[Cedar67]

Please mark this PR approved if tests are all green

Found a new issue to be confirmed by the developer.

#2592 (comment)

[mortoys]

@Cedar67
Changes will only be submitted after the date is selected in the monthly calendar
this interaction is same as the past

[Keith-CY]

@Cedar67 Changes will only be submitted after the date is selected in the monthly calendar this interaction is same as the past

Appreciate your contribution!