STUDIO-25: Improve focus styling in Wordpress' admin interface

Description

The Wordpress admin interface is keyboard accessible, but focus styling is poor, so as you tab around, it's hard to tell where focus is.

Comments

• Anastasia Cheetham commented 2011-12-09T16:51:48.384-0500

  I've pushed a first pass at this to my github, in the STUDIO-25-wp-focus-styling branch. It might be a bit brute force and inelegant, but hopefully it's a start that can be refined.

  Some issues I've noticed so far:

  • when a menu is expanded, it is dark gray, so I've added a white border. The border only appears on the left and top.
  • the focus border is added around links that already have a colour change to indicate focus.
  • <input>s and <textarea>s don't get any border (though they do get the blinking cursor)
  • the two items in the "Howdy..." menu get keyboard focus, but the menu doesn't pull down, so there's nothing to see: confusing
  • tab order is not necessarily ideal

• Cindy Li commented 2011-12-16T16:10:19.234-0500

  I've pushed another branch into my github (https://github.com/cindyli/studios.fluidproject.org/tree/STUDIO-25) to
  1. Moved the fluid-studios-theme-specific css to customized the admin interface styles out of wordpress core css into the theme, which is named 'style-admin.css'.
  2. Enhance the focus styling of input fields and textareas. This enhancement doesn't work across all admin pages as some fields are styled by using their specific ids.

• Michelle D'Souza commented 2011-12-19T12:16:51.565-0500

  I spoke to Joanna and she prefers the highlight colour to be the same green from the view interface.

• Michelle D'Souza commented 2011-12-19T13:35:03.878-0500

  Merged into project repo at 895880b5ac83bea4defcb6055c91ebc133ab32c9

  There are still some things in the admin interface that don't have focus highlighting. I'll open other issues for those.