Weak color contrast and issues for tab key users in the map and search area of the map page.

[Ifycode]

Description:

• Same Issues for tab key users found in Issues Behavior when navigating links in the mode-bar with the tab key #4095 Checkboxes in filter area are not visible when tabbing through the Map page #4115 and Another issue for tab key users on the map page while navigating through the mode-context #4116 affect the map and search area of the map page. Links/buttons are skipped.

Additional findings:

• Weak color contrast: Apart from skipped elements and previously shown outline problems in issues linked to this one, the focus or outline around input fields and check boxes in the search area drop down is too dim and not easy to see i.e. the contrast between the outline and the background is too weak. The user with mild visual impairment may not be able to see which input field they're on, it's even worse on the check boxes. Even I who doesn't have eye problem can't see it, I have to strain and move closer to the screen to try to discern if outline/focus has moved to the next input.

Steps to reproduce the behaviour:

• Log in to your account.
• Use tab key to navigate through the portions shown in the screenshot above.

Aha! Link: https://ushahiditeam.aha.io/features/PROD-871

[Ifycode]

@Angamanga The thing is I only edited the code for issue #4115 #4116 in the dev tool and not in the actual code base. I found that some of the Issues also happens on the map and search area of the page. I suggest that since @siggrid found the other issue first & since she has started work on it, then let me work on this issue I just raised instead. Waiting to hear your verdict.

[Angamanga]

@Ifycode Yes, I'll assign you to this issue. We need to make this change in the pattern library and also make sure we identify all places in the platform where it would be needed. Which colors do you suggest to use? Would they work generally over the platform?

[Ifycode]

Ok. Great. Thank you! Hmm... Identify all the places in the platform... That's true. About the color, I suggest that the dark yellow color used on the save search button and the round button should be used for uniformity since it's one of the major colors all over the site.
I will test that first and then try some other colors and see what I find. If I find that some other color works better than or other than the dark yellow color across the site, I will give feedback before committing my changes.

I left some messages (observations & questions) on Issue #4044 for you too. Please check @Angamanga @rowasc

[Ifycode]

I found the color on the button is what is used for the box-shadow. The dark yellow doesn't look great on its own if box-shadow is increased.
But mixing the dark yellow with the box-shadow on the white background (as shown in screenshot) gives the checkbox/radio button an elevated look and is easier to see when one moves to the next check box or radio button. The only thing is -moz-outline-radius is no where near usable in production, so the outline will just have sharp edges.

[rowasc]

oh ok. Yeah I think we should go with this as an initial fix, sharp edges are better than the low contrast situation we have right now IMO. It's progress.

[Ifycode]

Ok. Makes sense! Thanks. I'll get to work then.

[siggrid]

Hey @Ifycode
Want to ask a question to be sure that our solutions are not conflicting: are you working specifically on outline colors of focusable elements within the platform? I submitted a PR with a fix around checkboxes, it doesn’t make any changes to outline color, it was positioning/display issue.
Thanks.

[Ifycode]

@siggrid Yes I'm working on making the outline more visible when using the tab key (and fix skipped elements - if any). Maybe you can give more detail about what you've done or send a link to the PR for the fixes you made? So I can ensure we aren't tweaking same things. Thanks.

[siggrid]

@Ifycode Hope, it is not too late.
The link to Pattern library PR ushahidi/platform-pattern-library#252

[Ifycode]

No it's not. Thank you @siggrid
Will look through before I commit, push & PR changes related to this.