Skip to content

Commit 69a2d9b

Browse files
ktquezktquez
committed
Update demo
1 parent a3486e2 commit 69a2d9b

File tree

3 files changed

+122
-56
lines changed

3 files changed

+122
-56
lines changed

‎demo/src/App.vue

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<div id="app" role="main">
2+
<div id="app">
33
<router-view />
44
</div>
55
</template>
66

77
<script>
88
export default {
9-
name: 'app'
9+
name: 'App'
1010
}
1111
</script>
1212

@@ -17,6 +17,8 @@ export default {
1717
-moz-osx-font-smoothing: grayscale;
1818
text-align: center;
1919
color: #2c3e50;
20+
max-width: 600px;
21+
margin: 0 auto;
2022
margin-top: 60px;
2123
}
2224
@@ -33,8 +35,4 @@ li {
3335
display: inline-block;
3436
margin: 0 10px;
3537
}
36-
37-
a {
38-
color: #42b983;
39-
}
4038
</style>

‎demo/src/main.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
11
import Vue from 'vue'
2+
import VueAxe from '../vue-axe'
23
import App from './App.vue'
34
import router from './router.js'
45

56
// Use this plugin only in development => if (process.env.NODE_ENV !== 'production')
6-
const VueAxe = require('../../dist/vue-axe')
77
Vue.use(VueAxe, {
8-
config: {
9-
rules: [
10-
{ id: 'heading-order', enabled: true },
11-
{ id: 'label-title-only', enabled: true },
12-
{ id: 'link-in-text-block', enabled: true },
13-
{ id: 'region', enabled: true },
14-
{ id: 'skip-link', enabled: true },
15-
{ id: 'help-same-as-label', enabled: true }
16-
]
17-
}
8+
clearConsoleOnUpdate: true
189
})
1910
Vue.config.productionTip = false
2011

‎demo/src/pages/Home.vue

+116-39
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,137 @@
11
<template>
22
<div>
3-
<logo :src="require('@/assets/logo.png')" :showAlt="showAlt" />
4-
<h1 data-va="main header">{{ msg }}</h1>
5-
<h2>Access Pages</h2>
3+
<logo
4+
:src="require('@/assets/logo.png')"
5+
:show-alt="showAlt"
6+
/>
7+
<h1 data-va="main header">
8+
Welcome - Open your console
9+
</h1>
10+
<h2 style="color:#aaa;">
11+
Subtitle with low contrast
12+
</h2>
613
<ul>
714
<li>
8-
<router-link to="/about">About</router-link>
15+
<router-link
16+
to="/about"
17+
class="link-color"
18+
:class="{ 'link-color--corrected': correctedLinkColor }"
19+
>
20+
About
21+
</router-link>
922
</li>
10-
<li>
11-
<router-link to="/contact">Contact</router-link>
23+
<li>
24+
<router-link
25+
to="/contact"
26+
class="link-color"
27+
:class="{ 'link-color--corrected': correctedLinkColor }"
28+
>
29+
Contact
30+
</router-link>
1231
</li>
1332
</ul>
1433
<!--<p>Number: {{num}}</p>-->
1534
<!--<p>Each time the number updates it's running a debounce function to call `axe-core` again.<br />It will only run run the debounce once per 5 seconds or 1 second after the last call.</p>-->
1635
<!--<p>Use this button to see the console update as you fix or break a11y rules.</p>-->
17-
<button v-if="!showAlt" @click="toggleLogoAltTag">Add an alt tag to the logo</button>
18-
<button v-else @click="toggleLogoAltTag">Remove the alt tag from the logo</button>
36+
<button
37+
@click="showAlt = !showAlt"
38+
v-text="showAlt ? 'Remove the alt tag from the logo' : 'Add an alt tag to the logo'"
39+
/>
40+
<button @click="correctedLinkColor = !correctedLinkColor">
41+
Change links color
42+
</button>
43+
44+
<table
45+
style="margin-top:50px;margin-bottom:20px;width:100%;"
46+
align="center"
47+
>
48+
<caption style="margin-bottom: 20px;">
49+
<strong>Table test: scope attribute in &lt;td&gt; tag to force error</strong>
50+
</caption>
51+
<thead>
52+
<tr>
53+
<th scope="col">
54+
Name
55+
</th>
56+
<th scope="col">
57+
1 mile
58+
</th>
59+
<th scope="col">
60+
5 km
61+
</th>
62+
<th scope="col">
63+
10 km
64+
</th>
65+
</tr>
66+
</thead>
67+
<tbody>
68+
<tr>
69+
<th scope="row">
70+
Mary
71+
</th>
72+
<td
73+
v-if="scope"
74+
scope="col"
75+
>
76+
8:32
77+
</td>
78+
<td v-else>
79+
8:32
80+
</td>
81+
<td>28:04</td>
82+
<td>1:01:16</td>
83+
</tr>
84+
</tbody>
85+
</table>
86+
<button @click="scope = !scope">
87+
{{ scope ? 'Remove' : 'Add' }} scope attribute from the &lt;td&gt; tag
88+
</button>
1989
</div>
2090
</template>
2191

2292
<script>
23-
import Logo from '@/components/Logo'
93+
import Logo from '@/components/Logo'
2494
25-
export default {
26-
name: 'Home',
27-
components: {
28-
Logo
29-
},
30-
data () {
31-
return {
32-
msg: 'Welcome - Open your console',
33-
// num: 0,
34-
showAlt: false
35-
}
36-
},
37-
// mounted()
38-
// {
39-
// this.updateNumber();
40-
// },
41-
methods: {
42-
// updateNumber()
43-
// {
44-
// setTimeout(() => {
45-
// this.num += 1;
46-
// this.updateNumber();
47-
// }, 500);
48-
// },
49-
toggleLogoAltTag()
50-
{
51-
this.showAlt = !this.showAlt
52-
// console.log('Wait for Axe to run again in 5 seconds')
53-
}
95+
export default {
96+
name: 'Home',
97+
components: {
98+
Logo
99+
},
100+
data () {
101+
return {
102+
// num: 0,
103+
correctedLinkColor: false,
104+
showAlt: false,
105+
scope: true
54106
}
107+
},
108+
// mounted()
109+
// {
110+
// this.updateNumber();
111+
// },
112+
// mounted () {
113+
// setTimeout(() => {
114+
// this.$axe.run({ clearConsole: false })
115+
// }, 5000)
116+
// },
117+
methods: {
118+
// updateNumber()
119+
// {
120+
// setTimeout(() => {
121+
// this.num += 1;
122+
// this.updateNumber();
123+
// }, 500);
124+
// }
55125
}
126+
}
56127
</script>
57128

58-
<style scoped>
129+
<style>
130+
.link-color {
131+
color: #42b983;
132+
}
59133
134+
.link-color--corrected {
135+
color: #00522D;
136+
}
60137
</style>

0 commit comments

Comments
 (0)