diff --git a/src/App.css b/src/App.css index 7c555d6..36811fe 100644 --- a/src/App.css +++ b/src/App.css @@ -9,6 +9,39 @@ --color-border: #ccc; } +.sr-only { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ + -webkit-clip-path: inset(50%) !important; + clip-path: inset(50%) !important; /* 2 */ + height: 1px !important; + overflow: hidden !important; + margin: -1px !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + white-space: nowrap !important; /* 3 */ +} + +/* + Use in conjunction with .sr-only to only display content when it's focused. + @note Useful for skip links + @see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 + @note Based on a HTML5 Boilerplate technique, included in Bootstrap +*/ +.sr-only-focusable:focus, +.sr-only-focusable:active { + clip: auto !important; + -webkit-clip-path: none !important; + clip-path: none !important; + height: auto !important; + margin: auto !important; + overflow: visible !important; + position: static !important; + width: auto !important; + white-space: normal !important; +} + body { padding: 0; margin: 0;