%visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%);
}

%visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%);


  // Genius idea from H5BP. See https://github.com/h5bp/html5-boilerplate/blob/024b8a05ee9acf99393469c0622e55a694542493/src/css/main.css#L147
  &.focusable:active,
    &.focusable:focus {
      position: static;
      overflow: visible;
      clip: auto;
      margin: 0;
      width: auto;
      height: auto;
      white-space: inherit;
      clip-path: none;
  }
}

Add focusable class to visuallyhidden.
feat(Global): Add focusable class to visuallyhidden.

Snagged from H5BP:

https://github.com/h5bp/html5-boilerplate/blob/024b8a05ee9acf99393469c0622e55a694542493/src/css/main.css#L147
