Outline too should be reviewed to see that we aren't just eliminating visual queues. In general we shouldn't be using outline: 0; or outline: none;
http://www.outlinenone.com/
http://24ways.org/2009/dont-lose-your-focus/

This all got started after looking at #1989470: Dropbutton style update for Seven

More info from the handbook:
https://drupal.org/node/1638020

Files: 
CommentFileSizeAuthor
#28 2250121-seven-outline-28.patch790 byteser.pushpinderrana
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 76,256 pass(es). View
#24 2250121-screenshot-24.png114.97 KBByronNorris
#22 2250121-seven-outline-22.patch790 bytesemma.maria
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch 2250121-seven-outline-22.patch. Unable to apply patch. See the log in the details link for more information. View
#20 2250121-seven-outline-20.patch1.17 KBmgifford
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 75,404 pass(es). View
#18 2250121-seven-outline-18.patch1.83 KBmgifford
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 75,599 pass(es). View
#17 2250121-seven-outline-16.patch1.82 KBscresante
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch 2250121-seven-outline-16.patch. Unable to apply patch. See the log in the details link for more information. View
#10 2250121-seven-outline-10.patch1.74 KBmgifford
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch 2250121-seven-outline-10.patch. Unable to apply patch. See the log in the details link for more information. View
#5 2250121-seven-outline-5.patch1.74 KBLewisNyman
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 69,669 pass(es). View
#3 6.buttons.png41.12 KBLewisNyman

Comments

mgifford’s picture

Issue summary: View changes
mgifford’s picture

Issue summary: View changes
LewisNyman’s picture

FileSize
41.12 KB

Thanks! In some cases we have removed the outline when we've replaced it with other focus styling.

I was chatting to Bojhan. It would be nice if we could replace the default browser focus styling with our own completely, see the focus styling for the buttons:

Do you have any advice? The styling uses box-shadow which is probably safe seeing as we don't support IE8.

mgifford’s picture

As long as the outline is replaced, it's fine.

Would be good to keep the outline by default in Stark and ensure that the browser+ styling all happens in Seven & Bartik.

I like the new styling on the buttons. I don't see any problem with that. I like that it gives a bit of extra bling with focus vs hover but that otherwise they are the same.

LewisNyman’s picture

Status: Active » Needs review
FileSize
1.74 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 69,669 pass(es). View

Here's a proof of concept patch that adds default focus styling to everything and removes any instances of outline: 0;

Not sure if I'm a fan of this, because any element that defines it's own focus styling (see the add to shortcuts icons) know has to know to remove box-shadow instead of outline. It also just doesn't look good... I've talked myself out of it :)

mgifford’s picture

If focus is defined every time outline is removed that's fine. It's a big accessibility problem if outline is removed without providing a replacement.

LewisNyman’s picture

mgifford’s picture

@LewisNyman This sounds great. I assume you've got it set up locally.

I was expecting to see an Installation section in https://github.com/CSSLint/csslint/wiki

LewisNyman’s picture

@mgifford I have it running inside of Sublime. It great to see hints as you're typing.

You can set it up any number of ways. They should all be able to read the .csslintrc file for settings so it means we can flexible with everyones preferred method.

mgifford’s picture

FileSize
1.74 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch 2250121-seven-outline-10.patch. Unable to apply patch. See the log in the details link for more information. View

Trivial spacing issues in formatting. No functional difference from previous patch. Just spacing.

davidhernandez’s picture

FileSize
34.6 KB
10.57 KB
11.52 KB

I tested this manually. I'm getting the blue gradient on focus everywhere, not just "buttons". Is that the intended result? I'm also not getting it on the Save button. Without the patch focus underlines the text in the save button and makes the blue a lighter color. With the patch the underline is gone, but there is no blue focus gradient, only the color change.

LewisNyman’s picture

Issue tags: +CSS, +frontend

@davidhernandez Thanks for testing. This glow looks bad on links, I think underlining is enough for those situations. Maybe we should try this glow on the other focusable elements apart from links?

mgifford’s picture

Issue tags: +TwinCities
mgifford’s picture

Issue tags: -TwinCities +TCDrupal 2014

Status: Needs review » Needs work

The last submitted patch, 10: 2250121-seven-outline-10.patch, failed testing.

scresante’s picture

FileSize
1.82 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch 2250121-seven-outline-16.patch. Unable to apply patch. See the log in the details link for more information. View

Rerolled patch

mgifford’s picture

Status: Needs work » Needs review
FileSize
1.83 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 75,599 pass(es). View

fixing the focus problem mentioned in #11.

LewisNyman’s picture

Status: Needs review » Needs work
  1. +++ b/core/themes/seven/css/style.css
    @@ -840,10 +840,11 @@ textarea.form-textarea {
    -  color: #333;
    +  color: #000;
    

    Why are we changing the colour to #000? We use #333 everywhere else

  2. +++ b/core/themes/seven/css/style.css
    @@ -840,10 +840,11 @@ textarea.form-textarea {
    +  border-color: rgba(0, 116, 189, 0.8);
    

    This affects all text inputs without focus? I think this styling is supposed to go on focus right?

mgifford’s picture

Status: Needs work » Needs review
FileSize
1.17 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 75,404 pass(es). View

Ya... I can't explain that.. Maybe just lingering patch fragments.. I removed all changes from core/themes/seven/css/style.css as none of them are specific to the focus.

They look like I introduced those in #10... Sorry.

LewisNyman’s picture

Status: Needs review » Needs work
+++ b/core/themes/seven/css/seven.base.css
@@ -15,6 +15,10 @@ a:hover,
+.button:focus {
+  outline: 0;
+  box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
+}

Sorry! This was in the last patch but now it looks like we have .button:focus declared in two places?

emma.maria’s picture

Status: Needs work » Needs review
FileSize
790 bytes
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch 2250121-seven-outline-22.patch. Unable to apply patch. See the log in the details link for more information. View

I removed the focus styles from seven.base.css as they were being overridden by the other Seven stylesheets and therefore not needed.

mgifford’s picture

Why are we moving the position of .button:hover?

ByronNorris’s picture

FileSize
114.97 KB

Attached are screenshots of the various button states after applying the patch in #22.

Screenshot of button states after applying patch in comment #22

Status: Needs review » Needs work

The last submitted patch, 22: 2250121-seven-outline-22.patch, failed testing.

mgifford’s picture

Issue tags: +Needs reroll
er.pushpinderrana’s picture

Status: Needs work » Needs review
Issue tags: -Needs reroll
FileSize
790 bytes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 76,256 pass(es). View

Reolled #22 patch.

LewisNyman’s picture

Status: Needs review » Reviewed & tested by the community

Thanks, I think it's traditional to have the focus after the select just incase it needs to override any hover styling.

Thanks for the screenshots @bluegriff!

The last submitted patch, 17: 2250121-seven-outline-16.patch, failed testing.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 60441ca and pushed to 8.0.x. Thanks!

  • alexpott committed 60441ca on 8.0.x
    Issue #2250121 by mgifford, er.pushpinderrana, emma.maria, scresante,...

Status: Fixed » Closed (fixed)

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