#Tabbable

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

#Import

import { Tabbable } from 'bumbag';

#Usage

Tabbable
Disabled
Focusable

#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 "left" | "right" | "center"

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

altitude string

variant string

colorMode string

overrides

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

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

themeKey string

#Theming

Tabbable.styles.base
Hello world
Copyright © 2020 Jake Moxey