[terra-date-time-picker]Single field label SR announce (#2031)

cerner · Feb 13, 2024 · 3188e1f · 3188e1f
1 parent 50c3420
commit 3188e1f
Show file tree

Hide file tree

Showing 32 changed files with 136 additions and 49 deletions.
diff --git a/packages/terra-date-picker/CHANGELOG.md b/packages/terra-date-picker/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Added fix for field label SR announce.
+
 ## 4.98.0 - (February 1, 2024)
 
 * Changed

diff --git a/packages/terra-date-picker/src/DateInput.jsx b/packages/terra-date-picker/src/DateInput.jsx
@@ -732,7 +732,7 @@ const DatePickerInput = (props) => {
       size="2"
       pattern="\d*"
       aria-required={required}
-      aria-label={intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}
+      aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}`}
       aria-describedby={ariaDescriptionIds}
       id={dayInputId}
     />
@@ -763,7 +763,7 @@ const DatePickerInput = (props) => {
       size="2"
       pattern="\d*"
       aria-required={required}
-      aria-label={intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}
+      aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}`}
       aria-describedby={ariaDescriptionIds}
       id={monthInputId}
     />
@@ -794,7 +794,7 @@ const DatePickerInput = (props) => {
       size="4"
       pattern="\d*"
       aria-required={required}
-      aria-label={intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}
+      aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}`}
       aria-describedby={ariaDescriptionIds}
       id={yearInputId}
     />

diff --git a/packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap b/packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap
@@ -1406,7 +1406,7 @@ exports[`should render a default date input with all props 1`] = `
           day={
             <Input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
-              aria-label="Terra.datePicker.dayLabel"
+              aria-label="Aria Label text Terra.datePicker.dayLabel"
               aria-required={false}
               className="date-input-day"
               disabled={false}
@@ -1430,7 +1430,7 @@ exports[`should render a default date input with all props 1`] = `
           month={
             <Input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
-              aria-label="Terra.datePicker.monthLabel"
+              aria-label="Aria Label text Terra.datePicker.monthLabel"
               aria-required={false}
               className="date-input-month"
               disabled={false}
@@ -1461,7 +1461,7 @@ exports[`should render a default date input with all props 1`] = `
           year={
             <Input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
-              aria-label="Terra.datePicker.yearLabel"
+              aria-label="Aria Label text Terra.datePicker.yearLabel"
               aria-required={false}
               className="date-input-year"
               disabled={false}
@@ -1485,7 +1485,7 @@ exports[`should render a default date input with all props 1`] = `
         >
           <Input
             aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
-            aria-label="Terra.datePicker.monthLabel"
+            aria-label="Aria Label text Terra.datePicker.monthLabel"
             aria-required={false}
             className="date-input-month"
             disabled={false}
@@ -1507,7 +1507,7 @@ exports[`should render a default date input with all props 1`] = `
           >
             <input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
-              aria-label="Terra.datePicker.monthLabel"
+              aria-label="Aria Label text Terra.datePicker.monthLabel"
               aria-required={false}
               className="form-input date-input-month"
               disabled={false}
@@ -1532,7 +1532,7 @@ exports[`should render a default date input with all props 1`] = `
           </span>
           <Input
             aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
-            aria-label="Terra.datePicker.dayLabel"
+            aria-label="Aria Label text Terra.datePicker.dayLabel"
             aria-required={false}
             className="date-input-day"
             disabled={false}
@@ -1554,7 +1554,7 @@ exports[`should render a default date input with all props 1`] = `
           >
             <input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
-              aria-label="Terra.datePicker.dayLabel"
+              aria-label="Aria Label text Terra.datePicker.dayLabel"
               aria-required={false}
               className="form-input date-input-day"
               disabled={false}
@@ -1579,7 +1579,7 @@ exports[`should render a default date input with all props 1`] = `
           </span>
           <Input
             aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
-            aria-label="Terra.datePicker.yearLabel"
+            aria-label="Aria Label text Terra.datePicker.yearLabel"
             aria-required={false}
             className="date-input-year"
             disabled={false}
@@ -1601,7 +1601,7 @@ exports[`should render a default date input with all props 1`] = `
           >
             <input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
-              aria-label="Terra.datePicker.yearLabel"
+              aria-label="Aria Label text Terra.datePicker.yearLabel"
               aria-required={false}
               className="form-input date-input-year"
               disabled={false}