← Back to team overview

mahara-contributors team mailing list archive

[Bug 1883805] Re: Keyboard Focus indicator needs more distinct styling

 

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

-- 
You received this bug notification because you are a member of Mahara
Contributors, which is subscribed to Mahara.
Matching subscriptions: Subscription for all Mahara Contributors -- please ask on #mahara-dev or mahara.org forum before editing or unsubscribing it!
https://bugs.launchpad.net/bugs/1883805

Title:
  Keyboard Focus indicator needs more distinct styling

Status in Mahara:
  In Progress

Bug description:
  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.

To manage notifications about this bug go to:
https://bugs.launchpad.net/mahara/+bug/1883805/+subscriptions


References