Less generic effects on focus

That can add a really nice effect for sure.

@tkoleary: I wanted to add the code as a code block but I was a little fast ;) Looks like a nice improvement!

Even the Insert Image modal gets this outline (using Chrome, Mac)

I like this issue, I would rather we didn't use the bright blue border at the bottom though, only because it looks a bit weird when that section is expanded and we have used that elsewhere as a visual indicator for active elements.

@tkoleary I would be happy with that, as long as @mgifford is also happy.

That should be just fine. Thanks @LewisNyman - looking forward to seeing the patch.

I have added the background colour solution for the button focus styles and they now look lovely.

See screenshots below.

Collapsed with button in focus.

Open with button in focus.

Will there still be follow up of fixes for fieldsets and vertical tabs as mentioned in the issue summary? Otherwise I have completed all the work needed so far.

1. +++ b/core/themes/seven/css/style.css
   @@ -1581,3 +1581,13 @@ details.fieldset-no-legend {
   + * Focus styles for Seven
   

   This comment is a little vague, because this is the Seven theme.

2. +++ b/core/themes/seven/css/style.css
   @@ -1581,3 +1581,13 @@ details.fieldset-no-legend {
   +button.toolbar-icon:focus {
   

   We probably don't need the button element in the selector

3. +++ b/core/themes/seven/css/style.css
   @@ -1581,3 +1581,13 @@ details.fieldset-no-legend {
   +}
   +
   +
   

   Once too many spaces here

Finally, this seems like the kind of styling that should be the same across themes, different behaviour on Seven vs Bartik would be strange. Moving this into the toolbar module. I think toolbar.theme.css is the correct file.

I have moved the code to toolbar.icons.css where the styles for the toolbar icons live. The comment is gone as a result plus I replicated the selector used (.toolbar .toolbar-icon.toolbar-handle) and placed the focus styles underneath them to make sure it is targeted properly.

Updated screenshot with dev tools debugging...

That looks like it will work fine...

I think we should tackle all the focus issues with toolbar in one patch so it is consistent.

Thanks Alex, this needs an issue summary update to show all the focus problems we are fixing.

Here are 2 examples (with patches) for only toolbar icon focus styles as suggested in the ticket.

Revised a bit and paid attention to the toolbar link focuses as well when tabbing through elements.

Patch adds nicer focus effect and indents the subitems keeping the element full width for nicer focus underlining.

The elements underlining focus border should be on the left side of the element and the highlighting color (grey) should be the same darkness in both cases (when the element and the sub-category arrow is highlighted). The focus border should work with the same logic with both navigations (top navigation and side navigation).

#27 makes sense, moved highlighting border to left of element for both top & side menu, added darker background on focus. Focus is more subtle now.

Screenshots to #28 for keeping track what the patch does.

I'm happy with these changes and the code looks good.

Good work!

I noticed two issues on the RTL version:

This is with the fixed RTL:

Tested this manually and it seems to work. We have screenshots also attached here so this should be ready.

Dang, that looks MUCH better.

Committed and pushed to 8.x. Thanks!