Skip to content

Commit 4c52602

Browse files
ktquezktquez
authored
Merge pull request #12 from vue-a11y/next
[WIP] Next version
2 parents e510c72 + 5d46c2e commit 4c52602

20 files changed

+18432
-6567
lines changed

‎.babelrc

-7
This file was deleted.

‎.eslintrc.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module.exports = {
22
root: true,
33
env: {
4-
"cypress/globals": true,
4+
'cypress/globals': true,
55
browser: true,
66
node: true
77
},
@@ -10,9 +10,9 @@ module.exports = {
1010
'plugin:vue/essential'
1111
],
1212
plugins: [
13-
"cypress"
13+
'cypress'
1414
],
1515
// add your custom rules here
1616
rules: {},
1717
globals: {}
18-
}
18+
}

‎README.md

+118-59
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,196 @@
11
# vue-skip-to
2-
It helps people who only use the keyboard to jump to what matters most
2+
3+
> Helps people who only use the keyboard to jump to what matters most
4+
5+
- [Installation](##installation)
6+
- [Usage](##usage)
7+
- [Props](##props)
8+
- [Custom styling](##custom-styling)
9+
- [Running tests](##running-tests)
10+
- [About](##about)
11+
- [Contributing](##contributing)
312

413
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?
514

615
However, we are responsible for doing our utmost to make our applications usable and accessible to everyone.
716

817
"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.
918

10-
In addition to being a technique recommended by WCAG 2.0, that's where this component was inspired.
11-
https://www.w3.org/TR/WCAG20-TECHS/G1.html
12-
https://www.w3.org/TR/WCAG20-TECHS/G124.html
19+
This pattern is detailed in the Techniques for WCAG 2.0 in notes [G1](https://www.w3.org/TR/WCAG20-TECHS/G1.html) and [G124](https://www.w3.org/TR/WCAG20-TECHS/G124.html), and also served as the inspiration for creating this component.
1320

14-
## Install
15-
#### NPM
16-
```shell
17-
npm install -S vue-skip-to
18-
```
21+
[Check out the live demo!](https://vue-skip-to.surge.sh)
22+
23+
## Installation
1924

20-
#### Yarn
2125
```shell
22-
yarn add vue-skip-to
26+
// npm
27+
npm install -S @vue-a11y/skip-to
28+
29+
// yarn
30+
yarn add @vue-a11y/skip-to
2331
```
2432

25-
## How to use
26-
In your `main.js`
33+
## Usage
34+
35+
### Vue SFC
36+
2737
```javascript
38+
// main.js
39+
2840
import Vue from 'vue'
29-
import VueSkipTo from 'vue-skip-to'
41+
import VueSkipTo from '@vue-a11y/skip-to'
3042

3143
Vue.use(VueSkipTo)
3244

3345
new Vue({
34-
//... options
46+
//...
3547
})
3648
```
3749

38-
In your `App.vue`
3950
```vue
51+
// App.vue
52+
4053
<template>
4154
<div id="app">
42-
<vue-skip-to to="#main" text="Skip to main content" />
43-
44-
<logo :src="require('@/assets/logo.png')" />
45-
<h1 data-va="main header">{{ msg }}</h1>
46-
...
47-
<div id="main" role="main">
48-
<!-- My content -->
49-
</div>
55+
<VueSkipTo to="#main" label="Skip to main content" />
56+
57+
<!-- header, navigation, and more -->
58+
59+
<main id="main">
60+
<!-- content -->
61+
</main>
5062
</div>
5163
</template>
64+
5265
<script>
5366
export default {
5467
name: 'app'
5568
components: {
56-
Logo
69+
Logo,
70+
VueSkipTo,
5771
},
5872
//...
5973
}
6074
</script>
6175
```
6276

63-
## Using with HTML files
77+
#### Skip-to list
78+
79+
To use multiple links, simply pass an array into the `to` prop with the following shape:
80+
81+
```js
82+
[
83+
{
84+
"anchor": "<STRING>", // destination id
85+
"label": "<STRING>" // link text
86+
}
87+
//...
88+
]
89+
```
90+
91+
```vue
92+
// App.vue
93+
94+
<template>
95+
<div id="app">
96+
<vue-skip-to
97+
list-label="Skip to"
98+
:to="[
99+
{ anchor: '#main', label: 'Main content' },
100+
{ anchor: '#footer', label: 'Footer' },
101+
]"
102+
></vue-skip-to>
103+
104+
<!-- header, navigation, and more -->
105+
106+
<main id="main"></div>
107+
108+
<footer id="footer"></div>
109+
</div>
110+
</template>
111+
```
112+
113+
### In HTML files
114+
64115
```html
65116
<!--omitted -->
117+
<script src="https://unpkg.com/vue"></script>
118+
<script src="https://unpkg.com/@vue-a11y/skip-to"></script>
119+
</head>
66120
<body>
67121
<div id="app">
68122
<vue-skip-to to="#main"></vue-skip-to>
69123

70-
<!-- my header, navigation, and more -->
124+
<!-- header, navigation, and more -->
71125

72-
<div id="main" role="main">
73-
<!-- My content -->
74-
</div>
126+
<main id="main">
127+
<!-- content -->
128+
</main>
75129
</div>
76130

77-
<script src="https://unpkg.com/vue"></script>
78-
<script src="https://unpkg.com/vue-skip-to"></script>
79131
<script>
80-
Vue.use(VueSkipTo)
81132
new Vue({
82133
el: "#app"
83134
})
84-
85135
</script>
86136
</body>
87137
</html>
88138
```
89139

90-
## Check live demo
91-
https://vue-skip-to.surge.sh
92-
93-
94140
## Props
95-
Prop | Data Type | required | Description | Default
96-
--------------- | ---------- | --------- | ---------------------- | -------------
97-
`to` | String | false | Set destination ID | #main
98-
`text` | String | false | Text content of link | Skip to main content
99-
`tabindex` | String | false | Specifies the tab order | null
100141

142+
| Prop | Data Type | required | Description | Default |
143+
| ------------ | --------------- | -------- | ----------------------------------------------------------------- | ---------------------- |
144+
| `to` | String \| Array | false | Destination ID or [array of destination objects](###skip-to-list) | '#main' |
145+
| `label` | String | false | Skip link text content | 'Skip to main content' |
146+
| `list-label` | String | false | Skip link list label text | 'Skip to' |
101147

102-
## Custom style
103-
You can style the link through the selector `.vue-skip-to`
148+
## Custom styling
104149

105-
## Feature
106-
Inspired by this article, to know more, access the link:
107-
http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
150+
Override the default styles by targeting the following:
108151

109-
- This component working in all modern browsers and IE9;
110-
- Ensures that the target element receives focus, even if it is not a tag that naturally receives focus as the tag `input` and `a`. In this case, the `div` are also given the focus and the `tabindex` attribute with the value of `-1`;
111-
- Add focus to the destination, even when the address bar already has the corresponding hash;
152+
```css
153+
.vue-skip-to {
154+
}
155+
.vue-skip-to__link {
156+
}
157+
.vue-skip-to__nav {
158+
}
159+
.vue-skip-to__nav-list {
160+
}
161+
.vue-skip-to__nav-list-item {
162+
}
163+
```
112164

113-
## Run the tests
165+
## Running tests
114166

115167
```shell
116-
git clone https://github.com/vue-a11y/vue-skip-to.git vue-skip-to
168+
git clone https://github.com/vue-a11y/vue-skip-to.git
117169
npm install
118170
npm run dev
119-
npm run test
171+
npm run test:e2e
120172
```
121173

122174
Or run Cypress on interactive mode
175+
123176
```shell
124-
npm run test:open
177+
npm run test:e2e:open
125178
```
126179

127-
## Roadmap
128-
https://github.com/vue-a11y/vue-skip-to/issues/1
180+
## About
181+
182+
This component was inspired by [this article](http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/).
183+
184+
- This component working in all modern browsers and IE9;
185+
- Ensures that the target element receives focus, even if it is not a tag that naturally receives focus as the tag `input` and `a`. In this case, the `div` are also given the focus and the `tabindex` attribute with the value of `-1`;
186+
- Add focus to the destination, even when the address bar already has the corresponding hash;
129187

130188
## Contributing
189+
190+
- From typos in documentation to coding new features;
131191
- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
132192
- Fork repository, make changes and send a pull request;
133193

134-
If you want a faster communication, find me on [@ktquez](https://twitter.com/ktquez)
135-
And follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
194+
Follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
136195

137196
**Thank you**

‎cypress.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
{
2-
"baseUrl": "http://localhost:10001",
2+
"baseUrl": "http://localhost:5000",
33
"fixturesFolder": "tests/e2e/fixtures",
44
"screenshotsFolder": "tests/e2e/screenshots",
55
"integrationFolder": "tests/e2e/integration",
66
"fileServerFolder": "demo",
77
"pluginsFile": false,
8-
"supportFile": false,
9-
"videoRecording": false
8+
"supportFile": "cypress/support"
109
}

‎cypress/support/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('cypress-plugin-tab')

‎demo/index.html

+12-11
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,28 @@
1919

2020
<div id="app">
2121
<!-- data-vst is used for internal testing, it is not required -->
22-
<vue-skip-to data-vst="skip-to"></vue-skip-to>
22+
<vue-skip-to to="#main" data-vst="skip-to"></vue-skip-to>
2323
<header>
2424
<h1>Press tab</h1>
2525

26-
<nav role="navigation">
27-
<ul>
28-
<li><a href="#">Home</a></li>
29-
<li><a href="#">About</a></li>
30-
<li><a href="#">Products</a></li>
31-
<li><a href="#">Support</a></li>
32-
<li><a href="#">Contact</a></li>
33-
</ul>
26+
<nav>
27+
<h2>Navigation</h2>
28+
<ul>
29+
<li><a href="#">Home</a></li>
30+
<li><a href="#">About</a></li>
31+
<li><a href="#">Products</a></li>
32+
<li><a href="#">Support</a></li>
33+
<li><a href="#">Contact</a></li>
34+
</ul>
3435
</nav>
3536
</header>
36-
37+
3738
<div id="main" role="main">
3839
<p>
3940
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare elit vitae felis tincidunt commodo. Phasellus volutpat pharetra consectetur. Mauris eu orci fermentum, maximus odio ut, consequat dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec et tortor sagittis, euismod risus vel, pulvinar urna. Suspendisse non facilisis leo. Quisque rhoncus vel mauris sed dapibus. Nunc nibh mauris, fringilla ut nisi at, maximus varius magna. Proin hendrerit a orci quis ullamcorper. Curabitur molestie eros quis eros tempus auctor. Proin luctus nibh quis sem dictum tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eleifend, tortor tristique efficitur egestas, nulla libero tincidunt quam, vel pulvinar velit nulla id libero. Maecenas nisl quam, dictum in tempus in, ultrices a felis.
4041
</p>
4142
<p>
42-
Aliquam mattis convallis est et cursus. Phasellus tincidunt efficitur dui, non fringilla ipsum dignissim nec. Nam consectetur ante vitae malesuada rutrum. Praesent nec varius magna. Sed sem nisi, tempor eu venenatis vitae, consectetur eu sapien. Suspendisse sit amet massa lacinia purus ultrices lacinia. Aliquam non cursus quam, ac elementum enim. Morbi dignissim lacus nulla, sit amet interdum diam eleifend in. In hac habitasse platea dictumst. Suspendisse eget erat eu eros placerat pharetra vel eget metus. Morbi porta ex sed erat vestibulum, ac varius ex euismod. Nunc iaculis ornare lacus a egestas. Cras cursus facilisis mi, nec vulputate leo. Fusce varius varius arcu sit amet mollis.
43+
Aliquam mattis convallis est et cursus. <a href="google.com">Phasellus</a> tincidunt efficitur dui, non fringilla ipsum dignissim nec. Nam consectetur ante vitae malesuada rutrum. Praesent nec varius magna. Sed sem nisi, tempor eu venenatis vitae, consectetur eu sapien. Suspendisse sit amet massa lacinia purus ultrices lacinia. Aliquam non cursus quam, ac elementum enim. Morbi dignissim lacus nulla, sit amet interdum diam eleifend in. In hac habitasse platea dictumst. Suspendisse eget erat eu eros placerat pharetra vel eget metus. Morbi porta ex sed erat vestibulum, ac varius ex euismod. Nunc iaculis ornare lacus a egestas. Cras cursus facilisis mi, nec vulputate leo. Fusce varius varius arcu sit amet mollis.
4344
</p>
4445
<p>
4546
Sed elit nunc, volutpat in urna vel, hendrerit vulputate justo. Etiam pulvinar id ligula in ultrices. Suspendisse nulla risus, accumsan quis sagittis ac, faucibus eget dolor. Curabitur ullamcorper magna eget consequat facilisis. Cras massa leo, tristique nec tempus ac, auctor in arcu. Quisque a faucibus ex, congue eleifend ante. Praesent ultrices arcu neque, eget lacinia erat ultrices eget.

‎demo/search.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Using search vue-skip-to</title>
8+
9+
<style>
10+
a:focus, div:focus {
11+
background-color: yellow;
12+
}
13+
</style>
14+
15+
<script src="https://unpkg.com/vue"></script>
16+
<script src="vue-skip-to.js"></script>
17+
</head>
18+
<body>
19+
20+
<div id="app">
21+
<!-- data-vst is used for internal testing, it is not required -->
22+
<vue-skip-to to="#search" label="Skip to search" data-vst="skip-to"></vue-skip-to>
23+
<header>
24+
<h1>Press tab</h1>
25+
26+
<nav>
27+
<h2>Navigation</h2>
28+
<ul>
29+
<li><a href="#">Home</a></li>
30+
<li><a href="#">About</a></li>
31+
<li><a href="#">Products</a></li>
32+
<li><a href="#">Support</a></li>
33+
<li><a href="#">Contact</a></li>
34+
</ul>
35+
</nav>
36+
</header>
37+
38+
<label for="search">
39+
Search: <input id="search" type="search" name="search" />
40+
</label>
41+
</div>
42+
<script>
43+
var App = new Vue({
44+
el: '#app'
45+
})
46+
</script>
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)