csss-a11y-plugin/plugin.css at master · svinkle/csss-a11y-plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/**
 * CSSS A11y Plugin
 *
 * - Resets focus indicator to be visible on `Tab` key press
 * - Removes `outline` for slides when they receive focus
 * - Includes helper classes
 *
 * @author Scott Vinkle <scott.vinkle@shopify.com>
 * @version 0.1.0
 * @license MIT License
 */

/* Reset focus indicator styles */
a:focus {
  outline: 1px dotted #212121 !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}

/* Removes flash of focus indicator when slide receives focus */
.slide[tabindex="-1"]:focus {
  outline: none;
}

/* `.visuallyhidden` helper class definition
   https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L141
*/
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* `.focusable` helper class definition
   https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L159
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/* List styles */
.a11y-controls__list {
  bottom: 90px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 64px;
}

/* List item styles */
.a11y-controls__item {
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* Reset list item `before` styles */
.a11y-controls__item::before {
  content: '';
  margin: 0;
  padding: 0;
}