FocusBehaviour

From MozillaWiki
Jump to: navigation, search

Expected Focus Behaviour

This document describes some basics of how focus behaves on each of the three main platforms.

One element in focused per top-level window at a time. If no element is focused, then a document will be focused. The focused element or document receives keyboard events.

:focus { ... } applies to an element whenever the element is focused.
:-moz-focusring { ... } applies to an element when it is focused and should show a focus ring or other indicator.

Linux

  • Focus rings are always shown when an element is focused.
  • Focus rings are rendered as a dotted outline.
  • Clicking on an element focuses it.

Mac

  • Focus rings are always shown when an element is focused.
  • Clicking on an element does not focus it, unless the element is a textbox or a list.
  • By default, only textboxes and lists are included in the navigation order. There is a system preference (Full Keyboard Access) which can change this behaviour such that all controls are included in the tab navigation order. Whether an elements may be focused is not affected by this setting; it only affects whether the element is in tab navigation order.
  • Focus rings are rendered as a light blue glow.

Windows

  • Focus rings are never shown by default. There is a system preference which can change this behaviour such that focus rings are always shown by default (such that the behaviour is similar to Linux)
  • Focus rings become enabled when the user uses the keyboard to navigate between elements (tabbing). Focus rings then always appear for that window.
  • Focus rings may be enabled on a window/dialog if Windows determines in some manner that the keyboard was used to open the window.
  • Focus rings are rendered as a dotted outline.
  • Clicking on an element focuses it.

Links

  • Links on a page have a special behaviour. Clicking on a link focuses it but doesn't draw a focus ring on any platform. Moving back to the page with the link by navigating back in the page history or switching tabs will enable the focus ring. This allows the user to see which link was last clicked on that page.
  • When the focus ring is shown, it appears as a dotted outline on all platforms.