a11y

The examples bellow are invisible but you can inspect the code to find the content is rendered.

srOnly

Used to make text invisible but machine readable, that will be announce to screen reader users.

import { Text, a11yHelpers } from '@flixbus/honeycomb-react';

<Text extraClasses={a11yHelpers().srOnly}>
  Machine readable text that will be read out by screen readers.
</Text>

srOnlyFocusable

Used on focusable elements (such as buttons or links) that are invisible but become visible when the user focuses it when navigating with the keyboard.

import { Link, a11yHelpers } from '@flixbus/honeycomb-react';

<Link href="#/Helpers/A11Y" extraClasses={a11yHelpers().srOnlyFocusable}>
  This link appears only when focused
</Link>