Tabbable#

The <Tabbable> utility component makes elements navigable by keyboard users.

Import#

import { Tabbable } from 'bumbag';

Usage#

Tabbable

Disabled

Focusable

Editable example

function Example() {
  const onClick = () => alert('clicked');

  return (
    <div>
      <Tabbable use="div" onClick={onClick}>
        Tabbable
      </Tabbable>
      <Tabbable use="div" onClick={onClick} disabled>
        Disabled
      </Tabbable>
      <Tabbable use="div" onClick={onClick} disabled focusable>
        Focusable
      </Tabbable>
    </div>
  )
}

function Example() {
  const onClick = () => alert('clicked');

  return (
    <div>
      <Tabbable use="div" onClick={onClick}>
        Tabbable
      </Tabbable>
      <Tabbable use="div" onClick={onClick} disabled>
        Disabled
      </Tabbable>
      <Tabbable use="div" onClick={onClick} disabled focusable>
        Focusable
      </Tabbable>
    </div>
  )
}

Accessibility#

Patterns#

The Tabbable component has a tabindex set to 0 by default. If it is disabled, then the tabindex is removed.
When the Tabbable is disabled, then the aria-disabled attribute is set to true.
When the Tabbable is disabled, then the click, mouse down and mouse over events are not triggered.
Focus is automatically set on Tabbable when it's clicked, which prevents inconsistencies between browsers.

Props#

Tabbable Props#

disabled boolean

Same as the HTML attribute.

focusable boolean

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Theming#

Tabbable.styles.base

Hello world

On this page