[EuiDatePicker][COGNITION]: Consider adding screen reader only text to the calendar day labels

[1Copenut]

Description

Our EuiDatePicker component ( https://eui.elastic.co/#/forms/date-picker ) uses two-letter short labels for days of the week in the calendar. These short labels do not convey the information accurately to screen readers. I'm proposing we add an EuiScreenreader to these labels so screen reader users hear "Sunday", "Monday", etc.

Screenshot and code sample below.

Proposed code update

<div class="react-datepicker__day-names">
  <div class="react-datepicker__day-name">
-   Su
+   <span aria-hidden="true">Su</span>
+   <EuiScreenReaderOnly>Sunday</EuiScreenReaderOnly>
  </div>
  ...
</div>

Guidance

• https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

---

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[github-actions[bot]]

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.