I wonder why the form submit buttons in Seven does not have an outline on focus.
When tabbing through the form it's hard to see that the submit is focussed.
Is there any reason why it has been removed?

The submitted patch restores the outline but there must be a reason why it was removed.

CommentFileSizeAuthor
#8 2224567.button-focus-shadow-4.patch707 bytesoostie
#7 Screenshot 2014-03-26 14.00.35.jpg8.76 KBlewisnyman
#7 Screenshot 2014-03-26 13.59.36.jpg6.31 KBlewisnyman
#6 2224567.button-focus-shadow-3.patch577 bytesoostie
#4 2224567.button-focus-shadow-2.patch518 bytesoostie
#2 2224567.button-focus-shadow.patch498 bytesoostie
#1 6.buttons.png41.12 KBlewisnyman
submit-ouline.patch551 bytesoostie

Comments

lewisnyman’s picture

lewisnyman
he/him
commented
StatusFileSize
new 6.buttons.png41.12 KB

I think it was just missed in the patch, we actually have a custom design for the focus outline but we struggled to figure out how to manage the support for box shadow.

oostie’s picture

oostie
Primary language Dutch
Location Kampen
commented
StatusFileSize
new 2224567.button-focus-shadow.patch498 bytes

This one would be better then my previous patch.
It uses box-shadow instead of the normal outline.

lewisnyman’s picture

lewisnyman
he/him
commented
Status: Active » Needs work

I noticed there was some whitespace in the patch. Also do we need to change the border color aswell? That makes it tricky with primary buttons etc.

I also found the original focus styling from the prototype:

box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7)

oostie’s picture

oostie
Primary language Dutch
Location Kampen
commented
StatusFileSize
new 2224567.button-focus-shadow-2.patch518 bytes

LewisNyman thanks for your response. I changed the box-shadow with the one you provided.
On your image it looks like the normal gray button the border changes from gray to blue and the primary button changes from dark to light blue.

lewisnyman’s picture

lewisnyman
he/him
commented

Ah so do we need to add focus styling for button--primary as well? I don't think we changed the border in the prototype. Go with whatever you think looks better but be careful to test the focus styling in combination with the hover and active etc etc.

oostie’s picture

oostie
Primary language Dutch
Location Kampen
commented
StatusFileSize
new 2224567.button-focus-shadow-3.patch577 bytes

I created a new patch which is exactly like in the style guide.
The normal buttons have an other slightly lighter color than the primary buttons.

I also tested the other states and the are still working.

lewisnyman’s picture

lewisnyman
he/him
commented
StatusFileSize
new Screenshot 2014-03-26 13.59.36.jpg6.31 KB
new Screenshot 2014-03-26 14.00.35.jpg8.76 KB

This looks good!

Sorry to be picky but the .button:focus needs to be placed up below the .button:focus, .button:hover selector. The .button--primary:focus can go below the .button--primary:focus, .button--primary:hover selector. This is probably the cleanest CSS file in Seven at least :P

oostie’s picture

oostie
Primary language Dutch
Location Kampen
commented
StatusFileSize
new 2224567.button-focus-shadow-4.patch707 bytes

If you wouldn't be picky the CSS file would become a mess ;-) Here's another one!

lewisnyman’s picture

lewisnyman
he/him
commented
Status: Needs work » Needs review
lewisnyman’s picture

lewisnyman
he/him
commented
Status: Needs review » Reviewed & tested by the community

Yay! Thanks.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Status: Reviewed & tested by the community » Fixed

Committed 9de62af and pushed to 8.x. Thanks!

  • Commit 9de62af on 8.x by alexpott: 
    Issue #2224567 by Oostie: Form submit buttons outline on focus.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.