45c1f93562
While people using screen readers already have keyboard shortcuts to jump to the <main> tag, there are people who navigate the page with the keyboard using just the tab key, and for them, this link provides a way to save time and start reading the main content instead of having to manually go through all the navigation links every time a new page is loaded. Note that we had to add an additional `width: 0` rule because Foundation's `element-invisible` would apply `1px` and the test checking for `visible: :hidden` would faile.
23 lines
421 B
SCSS
23 lines
421 B
SCSS
.skip-to-main-content {
|
|
@include grid-column-gutter;
|
|
|
|
a {
|
|
&:not(:focus) {
|
|
@include element-invisible;
|
|
width: 0 !important;
|
|
}
|
|
|
|
&:focus {
|
|
@include body-colors;
|
|
|
|
$outline-size: $focus-inner-width + $focus-middle-width + $focus-outer-width;
|
|
|
|
padding: 0.4rem;
|
|
position: absolute;
|
|
$global-left: $outline-size;
|
|
top: $outline-size;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
}
|