Is there a dependency? I don't see no outlines after applying the patch. Cleared browser cache.
Firefox 48.0, Windows

Maybe a Firefox issue - I only tested in chrome for now. Does Firefox have
any highlighting when you tab through the toolbar buttons?

On 22 Aug 2016 12:40 p.m., "bertmert" notifications@github.com wrote:

Is there a dependency? I don't see no outlines after applying the patch.
Cleared browser cache.
Firefox 48.0, Windows

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#11724 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8fPdZKesRvqafl8PQ2RCfcpkuGtJks5qiYqxgaJpZM4JpxS2
.

No. It's just a gray border that I didn't see.
Something like

outline: 3px dotted #fff;

helped.

Before

Not a firefox issue.

You've specified outline: thin dotted #333; which is the default, then outline: 5px auto -webkit-focus-ring-color; which only targets webkit browsers (Chrome, Safari, Opera and Yandex), so it will only work on those.

For Firefox, you can use outline: auto 2px Highlight;, but this doesn't work in IE or Edge.

I'd also suggest this outline only be added for :focus, not :hover

Thanks - I will update. (Note I took the css from the outline for buttons)

On 22 Aug 2016 3:04 p.m., "Lodder" notifications@github.com wrote:

Not a firefox issue.

You've specified outline: thin dotted #333; which is the default, then outline:
5px auto -webkit-focus-ring-color; which only targets webkit browsers
(Chrome, Safari, Opera and Yandex), so it will only work on those.

For Firefox, you can use outline: auto 2px Highlight;, but this doesn't
work in IE or Edge.

I'd also suggest this outline only be added for :focus, not :hover

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#11724 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8T2BifMAw_1jlvPkhldQmlNj9PIvks5qiaxtgaJpZM4JpxS2
.

I have removed the :hover

Still cant get anything to work in firefox ;(
Dont have IE to test ;)

@brianteeman When I click the Joomla-icon (top left) first and than press TAB I see this:

First I get that greyish box with text 'Skip to content'.
It seems useless to me. Using FF 48.0.

Not useless at all.

Brian this does not show for me see http://screencast.com/t/lBqeT56gD I tested this in FF and Chrome with fully cleared Joomla and browser caches (incl. admin cache and so no difference

@gwsdesk - The hover has been removed. It's only :focus now

Removing the patch shows me exactly the same menu behavior as posted in the screencast (where it is patched) so do not know what I miss

You need to use tab to switch through the menu items. It will work in webkit browsers, but all others will just show a faint grey dotted border

Makes no difference for me compared to current 3.6.2 See the screencast
http://screencast.com/t/h2M9yPEfPn with patch applied and patch
reverted. I see no differences in the menu (using 'tab' or anything)
behavior (tested the same in FF and Chrome) What do i miss?

On 8/24/2016 2:37 PM, Lodder wrote:

You need to use |tab| to switch through the menu items

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#11724 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHzLNhWVonPJ6JpuYj3lOqnrQDPH92B-ks5qi_StgaJpZM4JpxS2.

Retested with chrome

@brianteeman yup, same result for me in Chrome, Yandex and Opera. We now gotta get this done for FF and IE, so I'd suggest messing around with box-shadows to try and replicate the webkit one. Give me a shout if you get stuck

I thought I had done ff - obviously not. will look at that later today. IE
I dont have ;(

On 24 August 2016 at 09:25, Lodder notifications@github.com wrote:

@brianteeman https://github.com/brianteeman yup, same result for me in
Chrome, Yandex and Opera. We now gotta get this done for FF and IE, so I'd
suggest messing around with box-shadows to try and replicate the webkit
one. Give me a shout if you get stuck

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#11724 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8eX_eA0y9Rtq9f7R-SBcxkm8-mF6ks5qi__3gaJpZM4JpxS2
.

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

Best way to emulate IE would be to remove outline: 5px auto -webkit-focus-ring-color; (for testing purposes only) and use something that isn't -webkit- specific.

Perhaps this?

outline: 2px dotted #fff;

The one for FF will not be webkit specific so should be the same in IE ?
Something like

{ outline: solid white 5px; }

On 24 August 2016 at 09:33, Lodder notifications@github.com wrote:

Best way to emulate IE would be to remove outline: 5px auto
-webkit-focus-ring-color; (for testing purposes only) and use something
that isn't -webkit- specific

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#11724 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8ROIe9WN4BEmiBID7LCxLFY-4NChks5qjAHTgaJpZM4JpxS2
.

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

Yup, or you can use outline: auto 2px Highlight; for FF. Make sure the order is correct so the fallback kicks in:

:focus {
    outline: 2px dotted #fff;                   // Fallback
    outline: 5px auto -webkit-focus-ring-color; // Chrome
    outline: auto 2px Highlight;                // Firefox
}

@c-lodder can you take a look at this please. In FF it is almost impossible to see the highlight which defeats the objective. Even the default outline in FF is hard to see https://www.tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/

Ok, remove all your CSS changes, and just use the following:

.navbar .nav > li > a:focus {
    outline: 2px solid rgb(94, 158, 214);
}

Note: If you PR, you removed the following:

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
    background-color: transparent;
    color: #333;
    text-decoration: none;
}

Add this back in and don't remove it. Simply insert the first code snippet below this one.

Thanks - will check later

On 24 August 2016 at 11:10, Lodder notifications@github.com wrote:

Ok, remove all your CSS changes, and just use the following:

.navbar .nav > li > a:focus {
outline: 2px solid rgb(94, 158, 214);
}

Note: If you PR, you removed the following:

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: transparent;
color: #333;
text-decoration: none;
}

Add this back in and don't remove it. Simply insert the first code snippet
below this one.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#11724 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8evDm3zbV4hUsi0auPHnerxTqlp4ks5qjBiFgaJpZM4JpxS2
.

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

Thanks @C-Lodder made your changes. all looks good now in ff and webkit

Please test

Note if you are on a MAC you might need to enable keyboard navigation http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/

I have tested this item ✅ successfully on bdd3b2a

It must be me but I do not see any difference in the top menu with/without the patch. What am I suppose to see since I am missing something it seems?

@gwsdesk - The blue outline as shown in the gif provided by Brian here: #11724 (comment)

yep it was me since after clearing cache I can see this now working properly http://screencast.com/t/GddArD0cUGn

Works the same in Firefox....

Nice one

I think RTC

I have tested this item ✅ successfully on bdd3b2a

http://screencast.com/t/GddArD0cUGn works4me

@C-Lodder and @brianteeman Thanks for the nice patch.

@gwdesk no need to keep writing that you think it is RTC. The maintainers
will review and make a PR rtc when it is ready

On 24 August 2016 at 16:39, Leo Lammerink notifications@github.com wrote:

@C-Lodder https://github.com/C-Lodder and @brianteeman

https://github.com/brianteeman Thanks for the nice patch.

This comment was created with the J!Tracker Application
https://github.com/joomla/jissues at issues.joomla.org/joomla-cms/11724
https://issues.joomla.org/tracker/joomla-cms/11724.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#11724 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8eB9n4Uyje1Jog6_jFhXNllERCokks5qjGWUgaJpZM4JpxS2
.

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

RTC

Thank you

@brianteeman it seems this somehow got removed in the new css

Grrh

@rdeutz can you fix this please!