Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Outlines on buttons and textfields #289

Open
cjwagn1 opened this issue Sep 18, 2020 · 2 comments · May be fixed by #292
Open

Outlines on buttons and textfields #289

cjwagn1 opened this issue Sep 18, 2020 · 2 comments · May be fixed by #292
Assignees
@garlic-os
Labels
front-end visual change good first issue 👋 Good for newcomers web All issues related to the 'web' application
Projects
Board

Comments

@cjwagn1
Copy link
Member

cjwagn1 commented Sep 18, 2020 •
edited
Loading

Outlines exist on certain elements when they're focused. This should not be the case.

In order to fix this, find the problematic element and insert outline: 0; in the css of that element.

Examples:
HOMEPAGE:
image

image

image

RESUME PORTAL:
image

image

image
@cjwagn1 cjwagn1 added good first issue 👋 Good for newcomers web All issues related to the 'web' application front-end visual change labels Sep 18, 2020
@cjwagn1 cjwagn1 added this to Backlog in Board via automation Sep 18, 2020
@cjwagn1 cjwagn1 changed the title Outlines on "Enter email" text field and "Join" button Outlines on "Enter email" text field and "Join" button. EDIT: Actually these are present pretty much everywhere. Sep 23, 2020
@cjwagn1 cjwagn1 changed the title Outlines on "Enter email" text field and "Join" button. EDIT: Actually these are present pretty much everywhere. Outlines on buttons and textfields Sep 23, 2020
@garlic-os
Copy link

If this is any clue, this happens even on elements without any classes.
Classless text input still has an outline

garlic-os added a commit that referenced this issue Sep 23, 2020
@garlic-os
(#289) Remove black outlines on focus
65f3654 
By default, most browsers place a black outline around the currently-focused element. On mstacm.org, it looks kind of ugly, so some people want it changed. As a quick fix, this commit completely up removes the black outline around focused elements.
People who use Tab to navigate  webpages aren't going to be too happy though, as it's their often only indication of what their cursor is currently on. So I'm hoping we can eventually come up with something else that adds that funcionality back in the future.
@garlic-os garlic-os linked a pull request Sep 23, 2020 that will close this issue
(#289) Remove black outlines on focus #292
Open
@garlic-os
Copy link

I've narrowed it down to the :focus state. This is a piece of global style that the browser (or at least mine) puts on all focused elements; the selector for it is just :focus. It is present on every webpage, and I imagine it's pretty useful for navigating by keyboard since it gives a standardized way to see what element is currently focused.

If we straight up disable this style, it will hurt accessibility. I'm adding a commit to remove it anyway, but I really suggest we come up with something else (hopefully prettier than a black outline 😏) to put in its place.

@garlic-os garlic-os self-assigned this Sep 24, 2020
@ClayMav ClayMav moved this from Backlog to In progress in Board Oct 9, 2020
@ClayMav ClayMav moved this from In progress to In Review in Board Oct 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@garlic-os garlic-os

Labels
front-end visual change good first issue 👋 Good for newcomers web All issues related to the 'web' application
Projects
Board
  
In Review
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

(#289) Remove black outlines on focus sigdotcom/mstacm.org
2 participants
@garlic-os @cjwagn1