Tabbable#

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

Import#

import { Tabbable } from 'bumbag';

Usage#

Tabbable
Disabled
Focusable
Editable example

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
Copyright © 2021 Jake Moxey