aria attributes for Datepicker component is incomplete

[andyedward]

Prerequisites

• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the issue

Title: Enhance SGDS Date Picker Accessibility - Update Screen Reader Aria-Labels
Labels: Accessibility, Bug
Description:
This change request aims to improve the accessibility of the SGDS date picker component for users relying on screen readers. Currently, the screen reader announcements for certain elements lack clarity, specifically the back arrow button which announces "button, group."
To address this, we propose updating the aria-labels for various elements within the date picker. A detailed image outlining the suggested aria-labels for each element is attached to this ticket.

Expected Behaviour:
Screen reader announcements should accurately describe the function of each element within the date picker.
Users should have a clear understanding of how to interact with the date picker controls using screen readers.

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

Describe your frontend stack. What version of React and @govtechsg/sgds-web-component are you using? CSR or SSR?

react v18.2 and latest sgds-web-component in https://react.designsystem.tech.gov.sg/?path=/docs/templates--single-page-form. CSR + SSR