Keyboard Focus indicator needs more distinct styling

[Lisa Seeto]

The rectangular box that indicates the current focused element during keyboard navigation of Mahara needs to be made more distinct, perceivable and made consistent in different browsers.

In Chrome the indicator is displaying as a rectangular box with a solid line the same colour as the theme's link colour. In Firefox, the indicator is a very faint rectangle with dotted lines. This is particularly hard to see on gray backgrounds, such as when navigating through the category block menus of Admin menu -> Configure site -> Site configuration.

Please see the attached screenshots of the mahara logo being focused on.

[Mahara Bot (dev-mahara)]

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

[Evonne Cheung (evonne)]

Some outlines inside gridstack blocks have some sides hidden as there is a overflow:hidden on blocks. Chosen to leave it as is as not sure if taken that out would break gridstack. At least one edge of outline is always shown, need to know if this is sufficient.

[Lisa Seeto (lisaseeto)]

I am noticing some other areas where the styling is showing incomplete borders or doesn't seem to have taken affect over some elements. This will need to be further investigated as to whether the styling that does show up is a sufficient technique to address accessibility guidelines regarding keyboard tab-focus.

Some of the findings so far in raw theme tested in FireFox:
Partial borders:
- main menu sub menu items only shows top border (though there is also a colour change)
- main menu expand chevron button for displaying sub menus missing bottom border
- "show people online" missing top border
- site options has a missing bottom border on each submenu, until it expands and then it displays full (styling needed on collapsed?)
- the page action buttons on the side bar menu's in portfolios don't have a left border
- search filter fields with drop down buttons incomplete borders on the shared side

Old styling or not the new styling:
- "Browse files" button still outlines in the thin dotted gray-ish outline (but this is working for browse CSV files on add people via CSV)
- The file icon for dragging files on the files page still outlines in the old styling
- drop down selectors have got a different styling when focused (might be the opacity?) (is this intentional?)
- input text fields when focused transform the cursor and place it for input but do not highlight the field boundary box.
- create a page or collection pop-up buttons in pages and collections (it does have a colour/ shaded effect)
- Share with drop down has a thin outline border
- focus to radio button selections (like friend controls) has thin dotted styling

[Evonne Cheung (evonne)]

DONE - "Browse files" button still outlines in the thin dotted gray-ish outline (but this is working for browse CSV files on add people via CSV)
DONE - The file icon for dragging files on the files page still outlines in the old styling
DONE - drop down selectors have got a different styling when focused (might be the opacity?) (is this intentional?)
Couldn't find this one? - input text fields when focused transform the cursor and place it for input but do not highlight the field boundary box.
Does have outline, so not sure if I'm looking at the wrong thing - create a page or collection pop-up buttons in pages and collections (it does have a colour/ shaded effect)
Couldn't target to change it, feel it could be hiding within a box so part of outline cropped off? - Share with drop down has a thin outline border
DONE - focus to radio button selections (like friend controls) has thin dotted styling

[Mahara Bot (dev-mahara)]

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

commit d1854afae25a4a1172cee22082d9ee06f8cb4f6f
Author: Evonne <email address hidden>
Date: Wed Jun 17 15:39:40 2020 +1200

Bug 1883805 Keyboard Focus indicator

Added outline styles to just focus elements.

behatnotneeded

Change-Id: I17bdbcf30f4ee1d462c562329f90b1735531e55f