notifications-admin/app/assets/stylesheets/govuk-frontend/focus/components.scss

// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
//
// See the following for details of the update:
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
// - https://design-system.service.gov.uk/get-started/focus-states/
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
//
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309

// Updates to skip-link component
.govuk-skip-link {
  @include govuk-typography-common;
  @include govuk-focusable-fill;
}

// Updates to header component
.govuk-header__link {
  @include govuk-focusable-text-link;
}

.govuk-header__link--homepage {
  // Remove any borders that show when focused and hovered.
  &:focus {
    border-bottom: 0;
  }
}

// Updates to footer component
.govuk-footer__link {
  @include govuk-focusable-text-link;
}

// Updates to back-link component
.govuk-back-link {
  @include govuk-focusable-text-link;

  // When the back link is focused, hide the bottom link border as the
  // focus styles has a bottom border.
  &:focus {
    border-bottom-color: transparent;
  }
}

// Updates to details component
.govuk-details__summary {
  &:hover {
    color: $govuk-link-hover-colour;
  }

  @include govuk-focusable-text-link;
}

// Remove the underline when focussed to avoid duplicate borders
.govuk-details__summary:focus .govuk-details__summary-text {
  text-decoration: none;
}

.govuk-details__summary:before {
  top: 0;
}

// Updates to buttons
.govuk-button {
  &:focus {
    border-color: $govuk-focus-colour;
    // When colours are overridden, for example when users have a dark mode,
    // backgrounds and box-shadows disappear, so we need to ensure there's a
    // transparent outline which will be set to a visible colour.
    // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
    @include govuk-not-ie8 {
      outline: $govuk-focus-width solid transparent;
      outline-offset: 0;
    }
    // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
    @include govuk-if-ie8 {
      color: $govuk-text-colour;
      background-color: $govuk-focus-colour;
    }
    box-shadow: inset 0 0 0 1px $govuk-focus-colour;
  }

  &:focus:not(:active):not(:hover) {
    border-color: $govuk-focus-colour;
    color: $govuk-text-colour;
    background-color: $govuk-focus-colour;
    box-shadow: 0 2px 0 $govuk-focus-text-colour;
  }
}

// Updates to form inputs
.govuk-input {
  &:focus {
    // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
    // components such as textarea where we avoid changing `border-width` as
    // it will change the element size. Also, `outline` cannot be utilised
    // here as it is already used for the yellow focus state.
    box-shadow: inset 0 0 0 $govuk-border-width-form-element;
  }
}
.govuk-input--error {
  &:focus {
    border-color: $govuk-input-border-colour;
    // Remove `box-shadow` inherited from `:focus` as `input--error`
    // already has the thicker border.
    box-shadow: none;
  }
}

// Updates to form textareas (hacked to work with GOVUK Elements version)
.form-control {
  @include govuk-focusable;

  &:focus {
    // Double the border by adding its width again. Use `box-shadow` to do
    // this instead of changing `border-width` (which changes element size) and
    // since `outline` is already used for the yellow focus state.
    box-shadow: inset 0 0 0 $govuk-border-width-form-element;
  }
}
.form-control-error {
  &:focus {
    border-color: $govuk-input-border-colour;
    // Remove `box-shadow` inherited from `:focus` as `input--error`
    // already has the thicker border.
    box-shadow: none;
  }
}

// Updates to form radios (hacked to work with GOVUK Elements version)

$govuk-radios-size: 40px;
// When the default focus width is used on a curved edge it looks visually smaller.
// So for the circular radios we bump the default to make it look visually consistent.
$govuk-radios-focus-width: $govuk-focus-width + 1px;

// ( ) Radio ring
.multiple-choice [type=radio] + label::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;

  width: $govuk-radios-size;
  height: $govuk-radios-size;

  border: $govuk-border-width-form-element solid currentColor;
  border-radius: 50%;
  background: transparent;
}

//  •  Radio button
//
// We create the 'button' entirely out of 'border' so that they remain
// 'filled' even when colours are overridden in the browser.
.multiple-choice [type=radio] + label::after {
  content: "";

  position: absolute;
  top: govuk-spacing(2);
  left: govuk-spacing(2);

  width: 0;
  height: 0;

  border: govuk-spacing(2) solid currentColor;
  border-radius: 50%;
  opacity: 0;
  background: currentColor;
}

// Focused state (includes targeting for GOVUK radios, to apply version 3.x.x styles)
.multiple-choice [type=radio]:focus + label::before,
.govuk-radios__input:focus + .govuk-radios__label::before {
  border-width: 4px;
  // Since box-shadows are removed when users customise their colours we set a
  // transparent outline that is shown instead.
  // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
  outline: $govuk-focus-width solid transparent;
  outline-offset: $govuk-focus-width;
  box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
}

// Selected state
.multiple-choice [type=radio]:checked + label::after {
  opacity: 1;
}

// Updates to form checkboxes
.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
  border-width: 4px;
}