[$10][MSFT-186] [Challenge Feed][NVD] Facebook icon is not properly read-out by the screen reader

[veshu]

Steps to Reproduce

1. Go to https://www.topcoder.com/challenges/30095347/?type=develop&nocache=true
2. Hover over the Facebook icon

Expected Result
It should be "Icon Facebook"

Actual Result
Read-out as "f"

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

WCAG Category: 1. Perceivable
WCAG Level: A
WCAG Success Criterion: 1.3.1 Info and Relationships
Screen Reader Used: Other
Accessibility Audit Tool used: N/A

Attachment
https://topcodermsft-my.sharepoint.com/personal/pd-topcoder_topcodermsft_onmicrosoft_com/Documents/Forms/All.aspx?cid=58da9b68%2Df2a3%2D45d2%2Dbbae%2D15abdfd0865b&FolderCTID=0x0120005C598A51049FC14CBA882E1AEE168F51&sortField=Modified&isAscending=true&id=%2Fpersonal%2Fpd%2Dtopcoder%5Ftopcodermsft%5Fonmicrosoft%5Fcom%2FDocuments%2FMSFT%2DTeams%2DQA%2FJune%202019%2F29%20Jun%2FTest%20Results%2FBug%20Videos%20%26%20Log%20Files%2Fcodejam%2DAccessibility%2F65

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[r0hit-gupta]

Please assign me

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[veshu]

@r0hit-gupta Please use changes for #xxxx style of commit message instead of fix(s) ....

[veshu]

@r0hit-gupta Also please use qa-accessibility branch.

[veshu]

@r0hit-gupta Please fix the #2914

[r0hit-gupta]

@veshu done.

[codeMinter]

@r0hit-gupta we will need a new PR for this, using qa-accessibility as base. I changed the base on PR and see huge lot of changes.

[r0hit-gupta]

@gurmeetb sure. Working on it

[r0hit-gupta]

New PR #2964

[anonymousjaggu]

@r0hit-gupta please check the comment in MR

[tosha5252]

@sushilshinde still getting the same thing, not working for me in Chrome

[sushilshinde]

@crazyk07 @tosha5252 @lakshmiathreya @drasticdpk

This is the case where code is in the production but failing the tests which really did pass on the test env

This was the PR that was approved
https://github.com/topcoder-platform/community-app/pull/3057/files

And same code is in the production
https://github.com/topcoder-platform/community-app/blob/master/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx

also here is the screenshot

[lakshmiathreya]

This is working on Chrome/Prod url - could you double check @tosha5252

[lakshmiathreya]

fyi @nkumar-topcoder @sushilshinde

[drasticdpk]

@lakshmiathreya still I am having issue. Please confirm.
https://monosnap.com/file/PQpBGL8XJrECAs9WvwgXgT9P9zyT45

[lakshmiathreya]

@drasticdpk - you are right - Chrome on Mac reads out Facebook correctly on Voice Over. Chrome on Window 10 Jaws reads it out as F.

[r0hit-gupta]

@lakshmiathreya @drasticdpk @sushilshinde it might be due to the fact that the facebook is not exactly an icon image but a div.

community-app/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx

Line 43 in a56a0f8

f

[r0hit-gupta]

New PR at #3164

Should solve this issue for once and all. Please review.

[lakshmiathreya]

Verified hover on Facebook icon reading out 'Facebook'... Win10/Chrome/NVDA & MacOS/Chrome/VoiceOver ... Closing Issue ...

[crazyk07]

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

This is an automated message for crazyk via Topcoder X