How to use the @govuk-react/lib.visuallyHidden.focusable function in @govuk-react/lib

To help you get started, we’ve selected a few @govuk-react/lib examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github govuk-react / govuk-react / components / skip-link / src / index.js View on Github external
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { SPACING_POINTS } from '@govuk-react/constants';
import { link, typography, visuallyHidden } from '@govuk-react/lib';

const SkipLink = styled('a')(visuallyHidden.focusable(), link.common(), link.styleText, typography.responsive(16), {
  display: 'block',
  padding: `${SPACING_POINTS[2]}px ${SPACING_POINTS[3]}px`,
  '@supports (padding:max(calc(0px)))': {
    paddingRight: `max(${SPACING_POINTS[3]}px, calc(${SPACING_POINTS[3]}px + env(safe-area-inset-right)))`,
    paddingLeft: `max(${SPACING_POINTS[3]}px, calc(${SPACING_POINTS[3]}px + env(safe-area-inset-left)))`,
  },
});

/**
 *
 * ### Usage
 *
 * Use the skip link component to help keyboard-only users skip to the main content on a page.
 *
 * Simple
 * ```jsx