Default focus outline is too pale

[Jono M]

Focus styling has generally improved a lot with the new Bootstrap themes, but the default focus outline (for elements without an explicit focus style) is very pale and almost invisible. For example, tab to the top Mahara logo, or to a form help icon, and then try to see where the focus is.

These outlines could be made darker, or focus could be made more obvious with different styling (eg. a different background).

Affects latest master

[Jono M (jonom)]

Note: this actually works well for ordinary links, because an underline is shown on focus in addition to the pale outline. The main time this is not clear is with image links, eg. the site logo in the top left corner and the "Powered by Mahara" logo at the bottom

[Aaron Wells (u-aaronw)]

Still a problem in 15.10rc1. It's only really a problem for images, such as the Mahara logo, and the "i in a circle" help icons.

[Aaron Wells (u-aaronw)]

Still a problem in 15.10rc2. See the "i" info button in the attached screenshot.

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/5920

[Kristina Hoeppner (kris-hoeppner)]

There is https://github.com/NV/flying-focus which shows you where you are with an effect. Julius said that some people told him that this is great for them to see the focus.

Liam didn't implement it, but just changed the focus. It might be something for us to look into in the future.

[Robert Lyon (robertl-9)]

The thing that Julius recommended could possibly get a bit annoying after a while if not done in a subtle/pleasant way.

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/5920
Committed: https://git.mahara.org/mahara/mahara/commit/5ec1fdae70e82fc8dbee25aa3b8700c5c24d4daf
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 5ec1fdae70e82fc8dbee25aa3b8700c5c24d4daf
Author: Liam Sharpe <email address hidden>
Date: Fri Jan 15 14:35:34 2016 +1300

Changed the focus color to a gray to make it more accessible - Bug #1482452

Uses a variable for the color for themes: raw & default

behatnotneeded

Change-Id: I9aa0210bb80ebd22b909e7494b1e612f71712f4c

[Mahara Bot (dev-mahara)]

Patch for "15.10_STABLE" branch: https://reviews.mahara.org/5999

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/5999
Committed: https://git.mahara.org/mahara/mahara/commit/fdf0c904f5d73f5b412e3d04419ced0db2c03186
Submitter: Robert Lyon (<email address hidden>)
Branch: 15.10_STABLE

commit fdf0c904f5d73f5b412e3d04419ced0db2c03186
Author: Liam Sharpe <email address hidden>
Date: Fri Jan 15 14:35:34 2016 +1300

Changed the focus color to a gray to make it more accessible - Bug #1482452

Uses a variable for the color for themes: raw & default

behatnotneeded

Change-Id: I9aa0210bb80ebd22b909e7494b1e612f71712f4c
(cherry picked from commit 5ec1fdae70e82fc8dbee25aa3b8700c5c24d4daf)