Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@vue-a11y/skip-to
Advanced tools
Readme
Helps people who only use the keyboard to jump to what matters most
The population grows very fast nowadays and with that the number of visually impaired increases as well. Did you know that we have over 350 million visually impaired people in the world?
However, we are responsible for doing our utmost to make our applications usable and accessible to everyone.
"Skip to content" or "skip to a section" of your site is one of the most common accessibility techniques today, but not as used as it should be.
This pattern is detailed in the Techniques for WCAG 2.0 in notes G1 and G124, and also served as the inspiration for creating this component.
// npm
npm install -S @vue-a11y/skip-to
// yarn
yarn add @vue-a11y/skip-to
// main.js
import Vue from 'vue'
import VueSkipTo from '@vue-a11y/skip-to'
Vue.use(VueSkipTo)
new Vue({
//...
})
// App.vue
<template>
<div id="app">
<VueSkipTo to="#main" label="Skip to main content" />
<!-- header, navigation, and more -->
<main id="main">
<!-- content -->
</main>
</div>
</template>
<script>
export default {
name: 'app'
components: {
Logo,
VueSkipTo,
},
//...
}
</script>
To use multiple links, set an array into the to
prop with the following shape:
[
{
"anchor": "<STRING>", // destination id
"label": "<STRING>" // link text
}
//...
]
// App.vue
<template>
<div id="app">
<vue-skip-to
list-label="Skip to"
:to="[
{ anchor: '#main', label: 'Main content' },
{ anchor: '#footer', label: 'Footer' },
]"
></vue-skip-to>
<!-- header, navigation, and more -->
<main id="main"></div>
<footer id="footer"></div>
</div>
</template>
<!--omitted -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@vue-a11y/skip-to"></script>
</head>
<body>
<div id="app">
<vue-skip-to to="#main"></vue-skip-to>
<!-- header, navigation, and more -->
<main id="main">
<!-- content -->
</main>
</div>
<script>
new Vue({
el: "#app"
})
</script>
</body>
</html>
Prop | Data Type | required | Description | Default |
---|---|---|---|---|
to | String | Array | false | Destination ID or array of destination objects | '#main' |
label | String | false | Skip link text content | 'Skip to main content' |
list-label | String | false | Skip link list label text | 'Skip to' |
@vue-a11y/skip-to checks if you are using the vue-router, watches changes to $route.path
and send focus to the vue-skip-to wrapper.
Recommendation: To make more sense, use the VueSkipTo component right after the root element of your app.
Read more about accessible routing:
Override the default styles by targeting the following:
.vue-skip-to {
}
.vue-skip-to__link {
}
.vue-skip-to__nav {
}
.vue-skip-to__nav-list {
}
.vue-skip-to__nav-list-item {
}
git clone https://github.com/vue-a11y/vue-skip-to.git
npm install
npm run dev
npm run test:e2e
Or run Cypress on interactive mode
npm run test:e2e:open
This component was inspired by this article.
input
and a
. In this case, the div
are also given the focus and the tabindex
attribute with the value of -1
;Follow us on Twitter @vue_a11y
Thank you
FAQs
It helps people who only use the keyboard to jump to what matters most.
The npm package @vue-a11y/skip-to receives a total of 2,273 weekly downloads. As such, @vue-a11y/skip-to popularity was classified as popular.
We found that @vue-a11y/skip-to demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.