Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[date-time-picker]Fix for space and label issues #1969

Closed
wants to merge 19 commits into from
Closed

[date-time-picker]Fix for space and label issues #1969

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
65c0f17
Fixes for space and label issues
ashishkumbhare116 Jan 8, 2024
1489e76
jest fix
ashishkumbhare116 Jan 8, 2024
22f4ca4
wdio screenshots
ashishkumbhare116 Jan 8, 2024
e975486
screenshot update
ashishkumbhare116 Jan 8, 2024
5723e35
package file change revert
ashishkumbhare116 Jan 8, 2024
74ba754
Merge branch 'main' into dateTimePickerA11
ashishkumbhare116 Jan 8, 2024
6b1ef69
Example changes added
ashishkumbhare116 Jan 9, 2024
88b5455
Merge branch 'main' into dateTimePickerA11
supreethmr Jan 10, 2024
a0d1b13
Review Changes addded
ashishkumbhare116 Jan 11, 2024
a084abb
jest update
ashishkumbhare116 Jan 11, 2024
a6bea96
Time input field arialabel added
ashishkumbhare116 Jan 12, 2024
b0a2fd1
Merge branch 'main' into dateTimePickerA11
sdadn Jan 12, 2024
0591fd4
Update CHANGELOG.md
sdadn Jan 12, 2024
c2ebbfa
Merge branch 'main' into dateTimePickerA11
supreethmr Jan 16, 2024
0aba7ac
Added screenReader change
ashishkumbhare116 Jan 19, 2024
01010dd
Added dateinput label
ashishkumbhare116 Jan 19, 2024
3e1ae7b
Updated without label change
ashishkumbhare116 Jan 23, 2024
921f8d4
Jest update
ashishkumbhare116 Jan 23, 2024
34bca0d
Merge branch 'main' into dateTimePickerA11
ashishkumbhare116 Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/terra-date-picker/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Fixed the label announcement in screen readers issue.

## 4.95.0 - (December 18, 2023)

* Changed
Expand Down
9 changes: 4 additions & 5 deletions packages/terra-date-picker/src/DateInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -734,7 +734,7 @@ const DatePickerInput = (props) => {
pattern="\d*"
aria-required={required}
aria-label={intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}
aria-describedby={dateFormatOrder === DateUtil.dateOrder.DMY ? `${nameLabelId} ${ariaDescriptionIds}` : ariaDescriptionIds}
aria-describedby={`${nameLabelId} ${ariaDescriptionIds}`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
aria-describedby={`${nameLabelId} ${ariaDescriptionIds}`}
aria-describedby={`${nameLabelId}, ${ariaDescriptionIds}`}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The utilization of commas in this context may lead to suboptimal behavior with assistive technologies -as per the MDN websites

id={dayInputId}
/>
);
Expand Down Expand Up @@ -765,7 +765,7 @@ const DatePickerInput = (props) => {
pattern="\d*"
aria-required={required}
aria-label={intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}
aria-describedby={dateFormatOrder === DateUtil.dateOrder.MDY ? `${nameLabelId} ${ariaDescriptionIds}` : ariaDescriptionIds}
aria-describedby={`${nameLabelId} ${ariaDescriptionIds}`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
aria-describedby={`${nameLabelId} ${ariaDescriptionIds}`}
aria-describedby={`${nameLabelId}, ${ariaDescriptionIds}`}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The utilization of commas in this context may lead to suboptimal behavior with assistive technologies -as per the MDN websites

id={monthInputId}
/>
);
Expand Down Expand Up @@ -796,7 +796,7 @@ const DatePickerInput = (props) => {
pattern="\d*"
aria-required={required}
aria-label={intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}
aria-describedby={dateFormatOrder === DateUtil.dateOrder.YMD ? `${nameLabelId} ${ariaDescriptionIds}` : ariaDescriptionIds}
aria-describedby={`${nameLabelId} ${ariaDescriptionIds}`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
aria-describedby={`${nameLabelId} ${ariaDescriptionIds}`}
aria-describedby={`${nameLabelId}, ${ariaDescriptionIds}`}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The utilization of commas in this context may lead to suboptimal behavior with assistive technologies -as per the MDN websites

id={yearInputId}
/>
);
Expand Down Expand Up @@ -851,8 +851,7 @@ const DatePickerInput = (props) => {
name={name}
value={dateValue}
/>
<VisuallyHiddenText text={value ? `${label}, ${getLocalizedDateForScreenReader(DateUtil.createSafeDate(dateValue, initialTimeZone), { intl, locale: intl.locale })}` : label} />
<VisuallyHiddenText id={nameLabelId} text={name} />
<VisuallyHiddenText id={nameLabelId} text={value ? `${label}, ${getLocalizedDateForScreenReader(DateUtil.createSafeDate(dateValue, initialTimeZone), { intl, locale: intl.locale })}` : label} />
<VisuallyHiddenText
refCallback={setVisuallyHiddenComponent}
aria-atomic="true"
Expand Down
2 changes: 1 addition & 1 deletion packages/terra-date-picker/src/DatePickerField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ const DatePickerField = (props) => {
const helpLabel = help ? (
<div aria-label={`${intl.formatMessage({ id: 'Terra.datePicker.dateFormatLabel' })} ${format}, ${help}`}>
{`(${format})`}
&nbsp;
<br />
{help}
</div>
) : (
Expand Down
96 changes: 33 additions & 63 deletions packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

25 changes: 8 additions & 17 deletions packages/terra-date-picker/tests/jest/__snapshots__/DatePicker.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,24 +354,15 @@ exports[`correctly applies the theme context className 1`] = `
type="hidden"
value="2017-01-01"
/>
<VisuallyHiddenText
text="Terra.datePicker.date, Sunday, January 1, 2017"
>
<span
className="visually-hidden-text"
>
Terra.datePicker.date, Sunday, January 1, 2017
</span>
</VisuallyHiddenText>
<VisuallyHiddenText
id="name-label-00000000-0000-0000-0000-000000000000"
text="date-input"
text="Terra.datePicker.date, Sunday, January 1, 2017"
>
<span
className="visually-hidden-text"
id="name-label-00000000-0000-0000-0000-000000000000"
>
date-input
Terra.datePicker.date, Sunday, January 1, 2017
</span>
</VisuallyHiddenText>
<VisuallyHiddenText
Expand All @@ -391,7 +382,7 @@ exports[`correctly applies the theme context className 1`] = `
dateFormatOrder="MDY"
day={
<Input
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.dayLabel"
aria-required={false}
className="date-input-day"
Expand Down Expand Up @@ -444,7 +435,7 @@ exports[`correctly applies the theme context className 1`] = `
}
year={
<Input
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.yearLabel"
aria-required={false}
className="date-input-year"
Expand Down Expand Up @@ -512,7 +503,7 @@ exports[`correctly applies the theme context className 1`] = `
/
</span>
<Input
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.dayLabel"
aria-required={false}
className="date-input-day"
Expand All @@ -533,7 +524,7 @@ exports[`correctly applies the theme context className 1`] = `
value="01"
>
<input
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.dayLabel"
aria-required={false}
className="form-input orion-fusion-theme date-input-day"
Expand All @@ -557,7 +548,7 @@ exports[`correctly applies the theme context className 1`] = `
/
</span>
<Input
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.yearLabel"
aria-required={false}
className="date-input-year"
Expand All @@ -578,7 +569,7 @@ exports[`correctly applies the theme context className 1`] = `
value="2017"
>
<input
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.yearLabel"
aria-required={false}
className="form-input orion-fusion-theme date-input-year"
Expand Down
Loading
Loading