[date-time-picker]Fix for space and label issues #1969
Conversation
package.json
Outdated
| @@ -80,7 +80,7 @@ | |||
| "start-static": "npm run compile:prod && terra express-server --site build", | |||
| "test": "npm run lint && npm run jest && npm run wdio", | |||
| "test:docker": "npm run lint && npm run jest && npm run wdio:docker", | |||
| "wdio": "terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme", | |||
| "wdio": "terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme --spec packages/terra-date-time-picker/tests/wdio/date-time-picker-mobile-spec.js", | |||
There was a problem hiding this comment.
Thanks done 5723e35
| @@ -733,7 +733,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' })} | |||
There was a problem hiding this comment.
So that screen reader gives pause after reading aria-label value
| aria-label={ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })} ` : intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })} | |
| aria-label={ariaLabel ? `${ariaLabel}, ${intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })} ` : intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })} |
| @@ -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}`} | |||
There was a problem hiding this comment.
| aria-describedby={`${nameLabelId} ${ariaDescriptionIds}`} | |
| aria-describedby={`${nameLabelId}, ${ariaDescriptionIds}`} |
There was a problem hiding this comment.
The utilization of commas in this context may lead to suboptimal behavior with assistive technologies -as per the MDN websites
| @@ -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}`} | |||
There was a problem hiding this comment.
| aria-describedby={`${nameLabelId} ${ariaDescriptionIds}`} | |
| aria-describedby={`${nameLabelId}, ${ariaDescriptionIds}`} |
There was a problem hiding this comment.
The utilization of commas in this context may lead to suboptimal behavior with assistive technologies -as per the MDN websites
| @@ -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}`} | |||
There was a problem hiding this comment.
| aria-describedby={`${nameLabelId} ${ariaDescriptionIds}`} | |
| aria-describedby={`${nameLabelId}, ${ariaDescriptionIds}`} |
There was a problem hiding this comment.
The utilization of commas in this context may lead to suboptimal behavior with assistive technologies -as per the MDN websites
| /** | ||
| * The label of the form control children. | ||
| */ | ||
| label: PropTypes.node, |
There was a problem hiding this comment.
should this be renamed as ariaLabel since it is not used for visual display
| @@ -1106,7 +1106,7 @@ class TimeInput extends React.Component { | |||
| {...inputAttributes} | |||
| {...minuteAttributes} | |||
| refCallback={(inputRef) => { this.minuteInput = inputRef; }} | |||
| label={intl.formatMessage({ id: 'Terra.timeInput.minutes' })} | |||
| label={intl.formatMessage({ id: 'Terra.timeInput.minutes' }, { a11yLabel: this.a11yLabel })} | |||
There was a problem hiding this comment.
why do we need to send this as object value ..??
There was a problem hiding this comment.
In this case i have followed the previous code standard as it is being used for Hours field
|
@ashishkcerner I would suggest to update this PR only with fix for space issue ( OR create a new PR only with space fix) and label issue can be re-validated after some of the existing PR's are merged. I see this PR also addressing issue of label ( error message ) so it's better re-validate the label reading issue after the PR #1975. is merged |
|
Have raised a new PR excluding label screenreader reading issue .#2009 |
Summary
Fix the spacing between datetimepicker and help/error text and label announcement in screen readers
What was changed:
Why it was changed:
Testing
This change was tested using:
Reviews
In addition to engineering reviews, this PR needs:
Additional Details
This PR resolves:
UXPLATFORM-8025
Thank you for contributing to Terra.
@cerner/terra