[$40][MSFT-106] Challenges page: Datepicker: The buttons to move to the previous and next month are being read as 'move backward to switch to previous month' and 'move forward to switch to the next month'. These labels are confusing.

[veshu]

Steps to Reproduce

1. Go to the Challenges page: https://www.topcoder.com/challenges. 2. Ensure the screen readr is switched on. 3. Activate the filter. 4. Press the tab key till you arrive at the start date field. 5. Press enter to bring up the callendar. 6. Press the tab key so that your focus is on the buttons to change the months. 7. Note the screen reader announces these buttons as 'move backward to switch to the previous month' and 'move forward to switch to the next month'.

Expected Result
These should be simply read as 'previous month' and 'next month' buttons.

Actual Result
Screen reader announces the button to move to the previous and next months as 'move backward to switch to the previous month' and 'move forward to switch to the next month'. The words 'backward' and 'forward' are confusing.

Device: Desktop/Labtop
Operating System: Windows
Browser: Chrome

WCAG Category: 3. Understandable
WCAG Level: A
WCAG Success Criterion: 3.3.2 Labels or Instructions
Screen Reader Used: JAWS
Accessibility Audit Tool used: N/A

Attachment
https://topcodermsft-my.sharepoint.com/personal/pd-topcoder_topcodermsft_onmicrosoft_com/Documents/Forms/All.aspx?cid=088f5f5d%2D9b1c%2D4b7e%2Dacbf%2D320c257c9a9a&FolderCTID=0x0120005C598A51049FC14CBA882E1AEE168F51&id=%2Fpersonal%2Fpd%2Dtopcoder%5Ftopcodermsft%5Fonmicrosoft%5Fcom%2FDocuments%2FMSFT%2DTeams%2DQA%2FJune%202019%2F29%20Jun%2FTest%20Results%2FBug%20Videos%20%26%20Log%20Files%2FKameshwarid%2Fbug%2012

[ThomasKranitsas]

Contest https://www.topcoder.com/challenges/30096053 has been created for this ticket.

This is an automated message for thomaskranitsas via Topcoder X

[ThomasKranitsas]

Contest https://www.topcoder.com/challenges/30096053 has been updated - the new changes has been updated for this ticket.

This is an automated message for thomaskranitsas via Topcoder X

[cwdcwd]

Contest https://www.topcoder.com/challenges/30096053 has been updated - it has been assigned to PkDurlabhji.

This is an automated message for lazybaer via Topcoder X

[PrakashDurlabhji]

@veshu I doubt it can be achieved as read the official docs of react-dates.
those are hardcoded strings and there is no way given to send custom text to it.

waiting for your feedback?

[PrakashDurlabhji]

@veshu till then taking another issue

[veshu]

@PrakashDurlabhji Let me get back to you in few minutes.

[veshu]

This can help react-dates/react-dates#495
All labels are configurable using phrases.

But we are waiting for feedback whether to fix or not please wait till. I will update you once we confirmed. Thanks!

[sushilshinde]

@PrakashDurlabhji @veshu please go ahead and fix if above reference solves the problem

[PrakashDurlabhji]

@veshu @sushilshinde sure will update it immediately, but dont know what is key for backward and forward button. no where in docs those specific keys are mentioned. can you please help a bit more?

[veshu]

@PrakashDurlabhji See you will override like this react-dates/react-dates#495 (comment),

Key for every phrases are here https://github.com/airbnb/react-dates/blob/master/src/defaultPhrases.js

So if you override following phrases as in that comment it should work

const jumpToPrevMonth = 'Move backward to switch to the previous month.';
const jumpToNextMonth = 'Move forward to switch to the next month.';

[PrakashDurlabhji]

@veshu doing it immediately

[PrakashDurlabhji]

@veshu @codeMinter PR #3010

[cwdcwd]

[400]: Failed to create challenge. Detail: Operation failed in the contest service facade.

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

[400]: Failed to create challenge. Detail: Operation failed in the contest service facade.

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

Contest https://www.topcoder.com/challenges/30097212 has been created for this ticket.

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

Contest https://www.topcoder.com/challenges/30097212 has been updated - it has been assigned to PkDurlabhji.

This is an automated message for lazybaer via Topcoder X

[codeMinter]

@veshu @codeMinter PR #3010

@PrakashDurlabhji FYI - PR is failing, please flag for review only once your PR passes all test and lint issues.

[PrakashDurlabhji]

@veshu new PR #3119

[drasticdpk]

Operating System: Windows
Browser: Chrome
URL : https://test-community-app.topcoder-dev.com/challenges

[drasticdpk]

Verified on
Operating System: Windows
Browser: Chrome

[crazyk07]

Payment task has been updated: https://software.topcoder.com/review/actions/ViewProjectDetails?pid=30097212

This is an automated message for crazyk via Topcoder X