[$10][MSFT-208] The "Code/ TCO19" icons doesn't have highlight when focus by keyboard

[veshu]

Steps to Reproduce

1. Go to https://www.topcoder.com/challenges/30095347?tab=details
2. Press tab key till the "Code/ TCO19" icons is selected

Expected Result
The "Code/ TCO19" icons should have blue highlight when focus by keyboard

Actual Result
The "Code/ TCO19" icons doesn't have highlight when focus by keyboard

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

WCAG Category: 2. Operable
WCAG Level: A
WCAG Success Criterion: 2.1.1 Keyboard
Screen Reader Used:
Accessibility Audit Tool used: N/A

Attachment
https://topcodermsft-my.sharepoint.com/personal/pd-topcoder_topcodermsft_onmicrosoft_com/Documents/Forms/All.aspx?cid=b9c070b1%2Dbb96%2D40e1%2Db92f%2D16f47db5d911&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%2Fdoremihong%2FTest%20for%20Accessibility%20Challenge%2FBug%5F18

[ThomasKranitsas]

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

This is an automated message for thomaskranitsas via Topcoder X

[ThomasKranitsas]

Contest https://www.topcoder.com/challenges/30095969 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/30095969 has been updated - it has been assigned to PkDurlabhji.

This is an automated message for lazybaer via Topcoder X

[PrakashDurlabhji]

@veshu it requires change on another repo, topcoder-react-ui-kit.

PR for same topcoder-archive/topcoder-platform-topcoder-react-ui-kit#7

[cwdcwd]

[500]: Challenge for the updated issue 2871 is creating, rescheduling this event

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

[500]: Challenge for the updated issue 2871 is creating, rescheduling this event

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]

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

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

[500]: Challenge for the updated issue 2871 is creating, rescheduling this event

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[cwdcwd]

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

This is an automated message for lazybaer via Topcoder X

[PrakashDurlabhji]

@veshu @codeMinter PR branch changed.topcoder-archive/topcoder-platform-topcoder-react-ui-kit#7

[tosha5252]

Tested in prod...https://www.topcoder.com/challenges/30098257

TCO19 tag not highlighted

Windows env
Browser: Chrome

[tosha5252]

Tested in prod...https://www.topcoder.com/challenges/30098257
In Chrome: TCO19 tag not highlighted at all
In Edge: There is a slight color change to the wording 'TCO19' (see video)

tco19.zip

Windows env
Browser: Chrome

[PrakashDurlabhji]

@veshu this was reason I added color change to ".hover" selector in css.
but then due to your comment I reverted my code to match as suggested by you.
shall I add that logic back and make a PR?

reason is because there is no visible difference in color between those green shades hence may be
"TCO 19" focus is not noticeable

PR which was earlier raised: https://github.com/topcoder-platform/topcoder-react-ui-kit/pull/24/commits

@tosha5252

[veshu]

@PrakashDurlabhji Can you please update .hover background-color to their 30 level variant.
for development it will be $tc_green_30 instead of $tc_green_10 ?

[PrakashDurlabhji]

@veshu @tosha5252 new Pr according to above comment topcoder-archive/topcoder-platform-topcoder-react-ui-kit#25

[sushilshinde]

Made a release on npm

[tosha5252]

Verified changed in prod

Win10/Chrome

[crazyk07]

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

This is an automated message for crazyk via Topcoder X