[EuiDatePicker][SCREEN READER]: Date picker range needs to identify itself as invalid and offer text instructions

[1Copenut]

Description

The EuiDatePickerRange component ( https://eui.elastic.co/#/forms/date-picker#date-picker-range ) shows a visual indication when an invalid end date is entered but does not alert screen readers that an error has occurred. This can be remediated by marking the second input as semantically invalid and providing an error text message.

QA requirements

1. Error text announces itself immediately to screen readers
2. Input announces itself as invalid when it receives / regains keyboard focus
3. Error text is semantically linked to the input with a unique ID and aria-describedby

Possible code solution

! This is sample rendered HTML, not EUI-specific JSX

<div class="react-datepicker__input-container">
  <input
+   aria-invalid="true"
+   aria-describedby="UNIQUE_ERROR_ID"
    aria-label="Press the down key to open a popover containing a calendar."
    class="euiDatePicker euiFieldText euiFieldText-isInvalid euiDatePickerRange__end"
    type="text"
    value="01/04/2023 10:46 AM"
  >
+ <div aria-live="assertive" aria-relevant="text additions">
+   <span id="UNIQUE_ERROR_ID">Ending date must be after beginning date</span>
+ </div>
</div>

WCAG Guidance

• SC 3.3.1: Error Identification (Level A)

Screenshots

---

[1Copenut]

This issue has been partially remediated by #6677

[github-actions]

👋 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]

❌ 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.