<div class="m-skip-link">
<a href="#main-content" class="a-link-button a-link-button--white">
Zum Inhalt springen
</a>
</div>
<a id="main-content" aria-hidden="true" tabindex="-1" class="m-skip-link__target"></a>
<div class="m-skip-link">
{{> @a-link-button url="#main-content" label="Zum Inhalt springen" modifiers="white" }}
</div>
<a id="main-content" aria-hidden="true" tabindex="-1" class="m-skip-link__target"></a>
.m-skip-link {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
clip-path: inset(50%);
border: 0;
&:focus-within {
position: fixed;
top: 0;
left: 0;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
clip-path: none;
z-index: 100;
width: 100%;
text-align: center;
background-color: $color-primary;
@include high-contrast {
background-color: $color-primary-dark;
}
}
&__target {
@include clean-link();
}
}
import BaseView from 'base-view';
const LINK_BUTTON_SELECTOR = '.a-link-button';
const TARGET_ID = 'main-content';
export default class MMenu extends BaseView {
initialize() {
const link = this.getScopedElement( LINK_BUTTON_SELECTOR );
this.clickHandler = ( e ) => {
const target = document.getElementById( TARGET_ID );
if (target) {
target.focus();
e.preventDefault();
}
};
if (link) {
link.addEventListener( 'click', this.clickHandler.bind( this ) );
}
}
destroy() {
super.destroy();
window.removeEventListener( 'click', this.clickHandler );
}
}
/* No context defined. */
No notes defined.