@utrecht/components/dist/skip-link/css/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Gemeente Utrecht
 * Copyright (c) 2021 Robbert Broersma
 */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
.utrecht-skip-link {
  /* Use `ButtonFace` as default `background-color`
   * to ensure the skip link is not transparent and unreadable
   * when CSS variables are not defined.
   * 
   * My only concern with this is that it makes it look like a button,
   * and it implies the `Space` button should work, but it won't work.
   */
  align-items: center;
  background-color: var(--utrecht-skip-link-background-color, ButtonFace);
  box-sizing: border-box;
  color: var(--utrecht-skip-link-color, ButtonText);
  display: inline-flex;
  justify-content: center;
  min-block-size: var(--utrecht-skip-link-min-block-size, 44px);
  min-inline-size: var(--utrecht-skip-link-min-inline-size, 44px);
  padding-block-end: var(--utrecht-skip-link-padding-block-end);
  padding-block-start: var(--utrecht-skip-link-padding-block-start);
  padding-inline-end: var(--utrecht-skip-link-padding-inline-end);
  padding-inline-start: var(--utrecht-skip-link-padding-inline-start);
  text-decoration: var(--utrecht-skip-link-text-decoration);
}

.utrecht-skip-link--hidden {
  inset-block-start: -200%;
  position: fixed;
}

.utrecht-skip-link--visible-on-focus {
  inset-block-start: -200%;
  position: fixed;
}

.utrecht-skip-link--visible-on-focus:focus {
  /**
   * WCAG 2.2 / 2.4.12: "No part of the focus indicator is hidden by author-created content".
   * To go the extra mile, ensure the focus indicator is inside the viewport.
   * */
  --_utrecht-skip-link-inset: calc(var(--utrecht-focus-outline-width, 0px) + var(--utrecht-focus-outline-offset, 0px));
  inset-block-start: var(--_utrecht-skip-link-inset, 0);
  inset-inline-start: var(--_utrecht-skip-link-inset, 0);
  position: fixed;
  z-index: var(--utrecht-skip-link-z-index, var(--utrecht-layer-focus-z-index));
}

.utrecht-skip-link--visible {
  /**
   * WCAG 2.2 / 2.4.12: "No part of the focus indicator is hidden by author-created content".
   * To go the extra mile, ensure the focus indicator is inside the viewport.
   * */
  --_utrecht-skip-link-inset: calc(var(--utrecht-focus-outline-width, 0px) + var(--utrecht-focus-outline-offset, 0px));
  inset-block-start: var(--_utrecht-skip-link-inset, 0);
  inset-inline-start: var(--_utrecht-skip-link-inset, 0);
  position: fixed;
  z-index: var(--utrecht-skip-link-z-index, var(--utrecht-layer-focus-z-index));
}

/*
 * @deprecated `utrecht-skip-link--focus` is deprecated, use `utrecht-skip-link--focus-visible` instead.
 */
.utrecht-skip-link--focus {
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  /* `var(--utrecht-skip-link-focus-text-decoration)` is deprecated, but for now we keep it for backwards compatibility */
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
}

.utrecht-skip-link--focus-visible,
.utrecht-skip-link:focus-visible {
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  /* `var(--utrecht-skip-link-focus-text-decoration)` is deprecated, but for now we keep it for backwards compatibility */
  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
}