Newer
Older
dmpopidor / app / assets / stylesheets / blocks / _accessibility.scss
/* Setting font-family for improving screen legibility */
body, .tooltip, .popover {
  font-family: $font-family;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}


/* Skip to main content link styling */
div.skip a {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow: hidden !important;
}

div.skip a:focus {
  width:auto;
  height:auto;
  overflow:visible !important;
}

/** Focus outline required for accessibility */
a, input, select, .form-control {
  &:focus,
  &:hover,
  &:active {
    outline-style: solid !important;
    outline-color: $color-focus-outline !important;
    outline-width: 2px !important;
  }
}
  
  /** button outline-width increased for better visibility of outline */
  button {

    &:focus,
    &:hover,
    &:active {
      outline-style: solid !important;
      outline-color: $color-focus-outline !important;
      outline-width: 3px !important;
    }
  }
  
  td {
    &:focus-within,
    &:focus,
    &:hover {
      outline-style: solid !important;
      outline-color: $color-focus-outline !important;
      outline-width: 2px !important;
    }
  }