Alpaca components for Magento 2

Skip Nav 

<a href="#maincontent" id="skip-nav-top" class="skip-nav">
    Skip to content
</a>
<script src="/components/raw/skip-nav/skip-nav.js" defer></script>
 
<a
    href="{{ anchor }}"
    id="skip-nav-top"
    class="skip-nav"
>
    {{ text }}
</a>
{{#if script}}
    <script src="{{static 'skip-nav.js'}}" defer></script>
{{/if}}
 
{
  "text": "Skip to content",
  "anchor": "#maincontent",
  "script": true
}
  • Content: 
    $skip-nav__padding         : $spacer--small $spacer--extra-large !default;
$skip-nav__margin          : $spacer !default;
$skip-nav__background-color: $color-primary !default;
$skip-nav__color           : $white !default;
$skip-nav__text-decoration : none !default;
$skip-nav__margin--relative: $spacer--medium !default;
$skip-nav__z-index         : $z-index-normal !default;

.skip-nav {
    @include visually-hidden('focus');
    padding: $skip-nav__padding;
    top: 0;
    left: 0;
    z-index: $skip-nav__z-index;

    &.focus-visible,
    &:focus,
    &:active,
    &:hover {
        position: absolute;
        margin: $skip-nav__margin;
        background-color: $skip-nav__background-color;
        color: $skip-nav__color;
        text-decoration: $skip-nav__text-decoration;
    }

    &--relative {
        &.focus-visible,
        &:active,
        &:focus,
        &:hover {
            position: relative;
            display: block;
            margin: $skip-nav__margin--relative;
        }
    }
}
  • URL: /components/raw/skip-nav/_skip-nav.scss
  • Filesystem Path: build/components/Organisms/skip-nav/_skip-nav.scss
  • Size: 1 KB
  • Content: 
    'use strict';
const skipNavLink = document.querySelector('.skip-nav');

function skipNavigation(skipElem) {
  skipElem.addEventListener('click', (e) => {
    let targetElem = document.querySelector(e.target.hash);
    if (targetElem) {
      targetElem.setAttribute('tabindex', -1)
      targetElem.focus();
      targetElem.addEventListener('focusout', (e) => {
        e.target.removeAttribute('tabindex');
      })
    }
  })
}

skipNavigation(skipNavLink);
  • URL: /components/raw/skip-nav/skip-nav.js
  • Filesystem Path: build/components/Organisms/skip-nav/skip-nav.js
  • Size: 461 Bytes

No notes defined.