virginamerica.com - No styles for keyboard focus.

[aardrian]

URL: https://www.virginamerica.com/
Browser: Chrome
Version: 35.0.1916
Problem type: Looks like the website has a bug.
Site owner: No

Steps to Reproduce

1. Navigate to: https://www.virginamerica.com/
2. Start to use the page without a mouse (start using the tab key).
3. See if you can tell what has focus.

Expected Behavior: Elements with focus should have some sort of style.
Actual Behavior: It is impossible to tell what has focus.

Fix: Go into your CSS file (virginamerica.com/styles/main.css) and remove this declaration (more work may be necessary, but this is disabling focus styles site-wide):
a:focus{outline:none}

[miketaylr]

Yeah, not very nice. :(

They're using Normalize.css which does define a:focus{outline:thin dotted}, but unfortunately they blow that away later on in main.css.

[aardrian]

I made a bookmarklet that restores outlines. Info at: http://blog.adrianroselli.com/2015/01/css-bookmarklets-for-testing-and-fixing.html

Full script to paste into your own bookmark:
javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('*:focus{outline:2px dotted #00f !important;box-shadow: 0 0 2em rgba(0,0,0,.75) !important;}',0);})()

[karlcow]

In the past, when Opera tried to contact VirginAmerica, it didn't work. A patch was made in BrowserJS for Opera.

Here it's a more general issue and impact all browsers.

One possible contact ;)
https://twitter.com/richardbranson

Maybe Ronald Ponferrada (Marketing Web Developer at Virgin America) @ronchris can help us find the right person at Virgin America for solving this issue.
https://www.linkedin.com/pub/ronald-ponferrada/17/5B3/B0

[aardrian]

I'll wait to see if @ronchris can offer any help before I try the LinkedIn crawl. Guess I should have thought of that first anyway.

Also, thanks @karlcow !

[karlcow]

@ronchris has stopped working with Virgin America.
Trying http://twitter.com/webcompat/status/625557060751462401

[aardrian]

Virgin America has responded to the keyboard issue by presenting a link as soon as you start tabbing. The link takes you to an "assistive version" (which is not accessible): https://access.virginamerica.com/h5/assistive/index

Sadly, that would require an entirely new bug.

[karlcow]

I see that

a:focus {
    outline:thin dotted
}

has been fixed.

.input-textarea:focus {
    border-color:#AA1CE0 !important;
    outline:none
}

etc.

There is still one issue

.btn:focus {
    outline:none
}

[karlcow]

As of today, still the same.

[aardrian]

As Virgin America is getting gobbled up, I expect nothing to change. Info: http://www.cnbc.com/2016/04/04/alaska-air-to-buy-virgin-america.html

[karlcow]

The CSS has changed and the focus outline seems to have been partially fixed. Maybe not everywhere.

Let's close this as fixed. And let's reopen more specific issues if/when necessary.