Twenty Seventeen: Skip to content link broken in IE

[sami.keijonen]

In IE11 there is still the same skip to content bug.

1. Start tabbing. Skip to content link gets visible.
2. Hit Enter or Space and I'm moved to #content.
3. Hit Tab again and focus goes back to Skip to content link.

My best quess is that navigator.userAgent.toLowerCase().indexOf( 'msie' ) is not working for IE11 so there will be no tabindex=-1 on #content.

I'm not sure why we even try to check different browsers. Why not just always use tabindex=-1 on #content when clickin skip to content?

[afercia]

Replying to sami.keijonen:

I'm not sure why we even try to check different browsers. Why not just always use tabindex=-1 on #content when clickin skip to content?

Because not all browsers need this fix. The script should be updated in order to account for browsers progress:

• Firefox is the only major browser that always honoured a correct tab order when focusing an "in-page" anchor
• Chrome doesn't need this fix any longer since version 50
• I guess this applies to Opera (webkit) too, needs testing
• still needed for Opera 12 (Presto) but probably support for old Opera can be dropped
• Safari doesn't need this fix since version 10, still needed for version 9
• IE 11 returns a user agent string without msie for me, I guess the script should check for trident too
• Edge doesn't need any fix

[sami.keijonen]

Because not all browsers need this fix.

Sure. My point was more like if there is no bullet proof way to detect the browser does it hurt always run the js.

But if there is bullet proof way, let's do that.

[afercia]

:) sniffing browsers based on their user agent string is definitely not bullet proof and one of the less reliable practices ever, but that's what we have. However, I think this fix is now necessary only for IE lte 11 unless there's the need to support old webkit versions. A concern could be Safari 9, not sure if old OS X version will get Safari 10.

[sami.keijonen]

I think this fix is now necessary only for IE lte 11 unless there's the need to support old webkit versions. A concern could be Safari 9, not sure if old OS X version will get Safari 10.

That sounds like a good plan. Not sure if this is helpful but ​found this for IE .

[sami.keijonen]

These checks works in my test for IE.

isIe   = navigator.userAgent.toLowerCase().indexOf( 'msie' )    > -1;
isIe11 = navigator.userAgent.toLowerCase().indexOf( 'trident' ) > -1;

[afercia]

If there's consensus to check only for IE, the proposed patch could work. The removed CSS rule is redundant since there's already a more generic rule to reset outline on :focus.
As mentioned in a previous comment, this doesn't cover Safari 9, other old webkit versions, and Opera 12.

[Fencer04]

This looks good to me on IE11 on Windows 10.

[davidakennedy]

I did research today around the possibility of including the 38604.diff​ by @afercia.

In light of:

Global browser usage: ​http://caniuse.com/usage-table

And the fact Safari 10 can be used on Yosemite and El Capitan: ​https://9to5mac.com/2016/06/23/safari-10-for-el-capitan-and-yosemite/

I think it's safe to drop support for older versions of Webkit and other browsers. That said, this can always be added in post-release if bug reports come in. It's easier to add than remove. Plus, this is more in line with how the theme approaches SVG support too.

If anyone has strong objections, comment here and let me know.

[davidakennedy]

In 39135:

Twenty Seventeen: Make sure skip link works in all versions of Internet Explorer

This also reduces the number of browsers detected and patched with this fix. Most modern browsers have patched this common bug, where an anchor link does not move focus when clicked. Twenty Seventeen will only worry about older versions of Internet Explorer in this regard.

Props afercia, sami.keijonen.

See #38604.

[davidakennedy]

Closing since this didn't get closed on commit.