Skip to content

Latest commit

 

History

History
30 lines (27 loc) · 1.88 KB

readme.md

File metadata and controls

30 lines (27 loc) · 1.88 KB

FocusLink

Component that allows directing of focus for keyboard navigation via a rendered link or other component.

Controlling Focus

Proper focus control is very import for keyboard navigation. If this aspect of UX is untouched, keyboard users can find themselves trapped in lengthy lists of tabbable content. <FocusLink> helps this by providing a way for developers to add a tabbable link at the start of their list so that the user can skip it if they would like to. Another use is skipping lengthy sets of controls that may or may not be necessary for the user to focus.

Usage

<FocusLink> can be passed a ref to a DOM element as the target prop's value. How to use/obtain refs

// In constructor
this.containerRef = React.createRef();

<FocusLink target={this.containerRef.current}>Focus on target</FocusLink>

To make a listing component 'skippable', use <FocusLink> with a ref to the component's outer element supplied to the targetNextAfter prop.

<div ref={this.containerRef}>
  <FocusLink targetNextAfter={this.containerRef.current}>Skip this list</FocusLink>
  {/* rest of lengthy list component... */}
</div>

Properties

Name type description default required
className string Applies custom className to FocusLink
target ref Reference to DOM element that should be focused when link is activated.
targetNextAfter ref If FocusLink is used in a list of inputs, pass a ref to the list component's outer element. When activated, focus will pass to the next focusable DOM element.
showOnFocus bool If true, <FocusLink> will be hidden from view until it is focused via tab-order. Good for adding accessibilty controls without cluttering up the UI. false
component string Used to render something besides an <a>, e.g. 'div' or 'span'.