[EuiDatePicker] Add screenreader-only calendar week day labels (#7748)

elastic · May 20, 2024 · 4d032e0 · 4d032e0
1 parent a4d7638
commit 4d032e0
Show file tree

Hide file tree

Showing 7 changed files with 451 additions and 31 deletions.
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png
diff --git a/packages/eui/changelogs/upcoming/7748.md b/packages/eui/changelogs/upcoming/7748.md
@@ -0,0 +1,4 @@
+**Accessibility**
+
+- Improved the accessibility of `EuiDatePicker` by providing full screen-reader-only week day names to the calendar header
+
diff --git a/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -87,37 +87,100 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
               <div
                 class="react-datepicker__day-name"
               >
-                일
+                <span
+                  aria-hidden="true"
+                >
+                  일
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  일요일
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                월
+                <span
+                  aria-hidden="true"
+                >
+                  월
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  월요일
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                화
+                <span
+                  aria-hidden="true"
+                >
+                  화
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  화요일
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                수
+                <span
+                  aria-hidden="true"
+                >
+                  수
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  수요일
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                목
+                <span
+                  aria-hidden="true"
+                >
+                  목
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  목요일
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                금
+                <span
+                  aria-hidden="true"
+                >
+                  금
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  금요일
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                토
+                <span
+                  aria-hidden="true"
+                >
+                  토
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  토요일
+                </span>
               </div>
             </div>
           </div>
@@ -490,37 +553,100 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
               <div
                 class="react-datepicker__day-name"
               >
-                lu
+                <span
+                  aria-hidden="true"
+                >
+                  lu
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  lundi
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                ma
+                <span
+                  aria-hidden="true"
+                >
+                  ma
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  mardi
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                me
+                <span
+                  aria-hidden="true"
+                >
+                  me
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  mercredi
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                je
+                <span
+                  aria-hidden="true"
+                >
+                  je
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  jeudi
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                ve
+                <span
+                  aria-hidden="true"
+                >
+                  ve
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  vendredi
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                sa
+                <span
+                  aria-hidden="true"
+                >
+                  sa
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  samedi
+                </span>
               </div>
               <div
                 class="react-datepicker__day-name"
               >
-                di
+                <span
+                  aria-hidden="true"
+                >
+                  di
+                </span>
+                <span
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  dimanche
+                </span>
               </div>
             </div>
           </div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		Accessibility

		- Improved the accessibility of `EuiDatePicker` by providing full screen-reader-only week day names to the calendar header