Pinafore-Web-Client-Frontend/src/scss/focus.scss

*:focus, .focus {
  outline: 2px solid var(--focus-outline);
}

.container:focus {
  // the outline causes choppy rendering on Edge and isn't visible or necessary anyway
  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17343598/
  outline: none;
}

/* Special class to make focus outlines easier to see in some odd
 * cases where the outline would be clipped. */
.focus-after {
  position: relative;
}

.focus-after:focus {
  outline: none;
}

.focus-after:focus::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  content: '';
  border: 2px solid var(--focus-outline);
  pointer-events: none;
}

// For KaiOS, do some additional things to improve the focus styles, which don't show up well
// for some reason
@media (max-width: 240px) {
  *:focus, .focus {
    outline: 3px solid var(--focus-outline);
  }

  a:focus, span:focus {
    background: var(--focus-bg) !important;
  }

  button:focus {
    opacity: 0.7;
  }

  // add extra "focus-after"-like styles for buttons to increase visibility
  button.icon-button {
    position: relative;
  }

  button.icon-button:focus {
    outline: none;
  }

  button.icon-button:focus::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    content: '';
    border: 3px solid var(--focus-outline);
    pointer-events: none;
  }
}