Skip to content

Commit b814b93

Browse files
technikhil314technikhil314
authored
feat(a11y): added more a11y related stuff (#112)
* fix: trimming inputs before comparing * feat(tutorial): added tutorial for copy link shortcut * fix: copy link short cut tutorial cookie was not injested * chore: added correct script tag for GTM * chore: added accessibility related changed * chore: using node 14.x or max 16.x * chore: updating package-lock.json * chore: updating prepare script
1 parent c8861f5 commit b814b93

18 files changed

+29365
-383
lines changed

‎app.html‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,16 @@
22
<html lang="en" {{ HTML_ATTRS }} class="hidden">
33

44
<head {{ HEAD_ATTRS }}>
5-
<script>(function (w, d, s, l, i) {
6-
w[l] = w[l] || []; w[l].push({
7-
'gtm.start':
8-
new Date().getTime(), event: 'gtm.js'
9-
}); var f = d.getElementsByTagName(s)[0],
10-
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
11-
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
12-
})(window, document, 'script', 'dataLayer', 'GTM-K3KPK8G');</script>
5+
<script>
6+
window.dataLayer = window.dataLayer || [];
7+
function gtag() { dataLayer.push(arguments); }
8+
gtag('js', new Date());
9+
gtag('config', 'G-HBV7K2PRX6');
10+
</script>
1311
{{ HEAD }}
1412
</head>
1513

1614
<body {{ BODY_ATTRS }}>
17-
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K3KPK8G" height="0" width="0"
18-
style="display:none;visibility:hidden"></iframe></noscript>
1915
{{ APP }}
2016
</body>
2117

‎components/buttons/copyLink.vue‎

Lines changed: 59 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,72 @@
22
<div>
33
<button
44
type="button"
5-
class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow outline-none justify-self-end focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
6-
aria-label="Copy url to clipboard"
5+
class="
6+
inline-flex
7+
items-center
8+
justify-center
9+
gap-1
10+
p-2
11+
text-sm
12+
transition-transform
13+
transform
14+
rounded-md
15+
shadow
16+
outline-none
17+
justify-self-end
18+
focus:ring-4
19+
active:scale-y-75
20+
hover:scale-105 hover:shadow-lg
21+
copy-uri-button
22+
"
23+
aria-label="Click here to copy url to clipboard"
24+
id="copyLinkButton"
725
:class="{
826
'bg-blue-500 text-white': !copied,
927
'bg-green-500 text-gray-800': copied,
1028
}"
1129
@click="clickHandler"
1230
>
13-
<span v-show="copied" class="inline">
14-
<svg
15-
class="w-4 h-4"
16-
fill="none"
17-
stroke="currentColor"
18-
viewBox="0 0 24 24"
19-
xmlns="http://www.w3.org/2000/svg"
20-
>
21-
<path
22-
stroke-linecap="round"
23-
stroke-linejoin="round"
24-
stroke-width="2"
25-
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
26-
></path>
27-
</svg>
31+
<span
32+
class="inline-flex items-center justify-center gap-1"
33+
aria-live="assertive"
34+
role="status"
35+
>
36+
<span v-show="copied" class="inline" aria-hidden="true">
37+
<svg
38+
class="w-4 h-4"
39+
fill="none"
40+
stroke="currentColor"
41+
viewBox="0 0 24 24"
42+
xmlns="http://www.w3.org/2000/svg"
43+
>
44+
<path
45+
stroke-linecap="round"
46+
stroke-linejoin="round"
47+
stroke-width="2"
48+
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
49+
></path>
50+
</svg>
51+
</span>
52+
<span v-show="copied" class="hidden md:inline-block">Copied</span>
53+
<span v-show="!copied" class="inline" aria-hidden="true">
54+
<svg
55+
class="w-4 h-4"
56+
fill="none"
57+
stroke="currentColor"
58+
viewBox="0 0 24 24"
59+
xmlns="http://www.w3.org/2000/svg"
60+
>
61+
<path
62+
stroke-linecap="round"
63+
stroke-linejoin="round"
64+
stroke-width="2"
65+
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
66+
></path>
67+
</svg>
68+
</span>
69+
<span v-show="!copied" class="hidden md:inline-block">Copy link</span>
2870
</span>
29-
<span v-show="copied" class="hidden md:inline-block">Copied</span>
30-
<span v-show="!copied" class="inline">
31-
<svg
32-
class="w-4 h-4"
33-
fill="none"
34-
stroke="currentColor"
35-
viewBox="0 0 24 24"
36-
xmlns="http://www.w3.org/2000/svg"
37-
>
38-
<path
39-
stroke-linecap="round"
40-
stroke-linejoin="round"
41-
stroke-width="2"
42-
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
43-
></path>
44-
</svg>
45-
</span>
46-
<span v-show="!copied" class="hidden md:inline-block">Copy link</span>
4771
</button>
4872
</div>
4973
</template>

‎components/buttons/nextDiff.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
type="button"
88
@click="clickHandler"
99
>
10-
Next diff
1110
<svg
11+
aria-hidden="true"
1212
class="w-4 h-4"
1313
fill="none"
1414
stroke="currentColor"
@@ -22,6 +22,7 @@
2222
d="M16 17l-4 4m0 0l-4-4m4 4V3"
2323
></path>
2424
</svg>
25+
<span aria-hidden="true">Next diff</span>
2526
</button>
2627
</div>
2728
</template>

‎components/buttons/prevDiff.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
type="button"
88
@click="clickHandler"
99
>
10-
Previous diff
1110
<svg
11+
aria-hidden="true"
1212
class="w-4 h-4"
1313
fill="none"
1414
stroke="currentColor"
@@ -22,6 +22,7 @@
2222
d="M8 7l4-4m0 0l4 4m-4-4v18"
2323
></path>
2424
</svg>
25+
<span aria-hidden="true">Previous diff</span>
2526
</button>
2627
</div>
2728
</template>

‎components/buttons/stickyCopy.vue‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,46 @@
66
'bg-gray-100 dark:bg-gray-600': !copied,
77
'bg-green-500': copied,
88
}"
9+
role="button"
910
:aria-label="ariaLabel"
1011
@click="handleClick"
1112
>
12-
<svg
13-
v-show="!copied"
14-
class="w-6 h-6"
15-
fill="none"
16-
stroke="currentColor"
17-
viewBox="0 0 24 24"
18-
xmlns="http://www.w3.org/2000/svg"
19-
>
20-
<path
21-
stroke-linecap="round"
22-
stroke-linejoin="round"
23-
stroke-width="2"
24-
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
25-
></path>
26-
</svg>
27-
<svg
28-
v-show="copied"
29-
class="w-6 h-6"
30-
fill="none"
31-
stroke="currentColor"
32-
viewBox="0 0 24 24"
33-
xmlns="http://www.w3.org/2000/svg"
34-
>
35-
<path
36-
stroke-linecap="round"
37-
stroke-linejoin="round"
38-
stroke-width="2"
39-
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
40-
></path>
41-
</svg>
13+
<span aria-live="assertive" role="status">
14+
<span aria-label="copy to clipboard" v-show="!copied">
15+
<svg
16+
aria-hidden="true"
17+
class="w-6 h-6"
18+
fill="none"
19+
stroke="currentColor"
20+
viewBox="0 0 24 24"
21+
xmlns="http://www.w3.org/2000/svg"
22+
>
23+
<path
24+
stroke-linecap="round"
25+
stroke-linejoin="round"
26+
stroke-width="2"
27+
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
28+
></path>
29+
</svg>
30+
</span>
31+
<span aria-label="copied" v-show="copied">
32+
<svg
33+
aria-hidden="true"
34+
class="w-6 h-6"
35+
fill="none"
36+
stroke="currentColor"
37+
viewBox="0 0 24 24"
38+
xmlns="http://www.w3.org/2000/svg"
39+
>
40+
<path
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
stroke-width="2"
44+
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
45+
></path>
46+
</svg>
47+
</span>
48+
</span>
4249
</button>
4350
</div>
4451
</template>

‎components/buttons/toggleInSync.vue‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,32 @@
33
<label
44
for="toggleScrollInSync"
55
class="text-gray-800 select-none dark:text-gray-50"
6+
id="toggleScrollInSyncLabel"
7+
aria-controls="toggleScrollInSync"
68
>
79
Scroll in sync
810
</label>
911
<input
12+
aria-labelledby="toggleScrollInSyncLabel"
1013
id="toggleScrollInSync"
1114
type="checkbox"
12-
checked
15+
:checked="isEnabled"
1316
class="form-checkbox"
14-
@click="clickHandler"
17+
@click="toggleInSyncScroll"
1518
/>
1619
</div>
1720
</template>
1821
<script lang="ts">
1922
import Vue from 'vue'
2023
export default Vue.extend({
21-
props: {
22-
clickHandler: {
23-
type: Function,
24-
required: true,
24+
computed: {
25+
isEnabled() {
26+
return this.$store.state.scrollInSync.isEnabled
27+
},
28+
},
29+
methods: {
30+
toggleInSyncScroll() {
31+
this.$store.commit('scrollInSync/toggle')
2532
},
2633
},
2734
})

‎components/buttons/toggleInlineDiffView.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div id="toggleInlineDiffViewSection" class="inline-flex items-center gap-1">
3+
<button
4+
id="toggleInlineDiffView"
5+
type="button"
6+
class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
7+
@click="toggleInlineDiffView"
8+
>
9+
<svg
10+
version="1.1"
11+
xmlns="http://www.w3.org/2000/svg"
12+
xmlns:xlink="http://www.w3.org/1999/xlink"
13+
x="0px"
14+
y="0px"
15+
viewBox="0 0 122.88 101.61"
16+
stroke="currentColor"
17+
xml:space="preserve"
18+
class="w-4 h-4 mr-1 transition-all duration-500 transform transform-gpu"
19+
:class="{
20+
'rotate-90': isEnabled,
21+
}"
22+
>
23+
<g fill="currentColor">
24+
<path
25+
stroke-width="1"
26+
d="M15.28,46.33h30V4.44c0-2.45,1.99-4.44,4.44-4.44c2.45,0,4.44,1.99,4.44,4.44v92.72c0,2.45-1.99,4.44-4.44,4.44 c-2.45,0-4.44-1.99-4.44-4.44V55.21H15.07l15.15,15.28c1.72,1.73,1.72,4.54-0.02,6.26c-1.73,1.72-4.54,1.72-6.26-0.02L1.29,53.89 l0,0l-0.01-0.01c-0.05-0.05-0.09-0.09-0.13-0.14l-0.01-0.01l-0.06-0.07l-0.02-0.02l-0.05-0.06l-0.02-0.03l-0.02-0.02l-0.05-0.07 l0,0L0.87,53.4l-0.02-0.02l-0.01-0.02l-0.05-0.07l-0.01-0.02l-0.05-0.07l0,0l-0.04-0.07L0.66,53.1l-0.01-0.02l-0.04-0.07 l-0.01-0.02l-0.02-0.03l-0.04-0.06l0,0L0.5,52.82l-0.01-0.02l-0.04-0.08l0,0l-0.04-0.08L0.4,52.62l-0.03-0.06l-0.01-0.03L0.35,52.5 l-0.03-0.08L0.31,52.4l-0.03-0.08L0.27,52.3l-0.03-0.08l0-0.01c-0.02-0.06-0.04-0.13-0.06-0.19l0-0.01l-0.02-0.08l-0.01-0.02 l-0.01-0.02l-0.02-0.08l-0.02-0.1l0-0.01l-0.02-0.1l0-0.01l-0.01-0.07L0.06,51.5l0-0.02l-0.01-0.08l0-0.02l-0.01-0.08l0,0 L0.02,51.2l0-0.01l0-0.02l-0.01-0.08l0-0.01C0.01,51,0,50.93,0,50.87l0-0.01l0-0.09v-0.02l0-0.08l0-0.02l0-0.02l0-0.08l0-0.02 l0.01-0.08l0,0l0.01-0.09l0-0.01c0.01-0.1,0.02-0.21,0.04-0.31l0.02-0.09l0-0.02c0.02-0.1,0.04-0.2,0.07-0.3l0,0l0.02-0.08 l0.01-0.03l0.01-0.02l0.02-0.08l0.01-0.02l0.03-0.08l0.01-0.02l0.03-0.08l0-0.01c0.04-0.1,0.08-0.19,0.12-0.28l0.01-0.01 c0.03-0.06,0.06-0.12,0.09-0.17l0.01-0.02l0.01-0.02l0.04-0.07l0.01-0.02l0.04-0.07c0.03-0.05,0.06-0.11,0.1-0.16l0.02-0.03 l0.01-0.02l0.05-0.07l0-0.01c0.04-0.06,0.08-0.11,0.12-0.16l0.01-0.01L1,47.97v0l0.07-0.08l0.01-0.01l0.04-0.05l0.05-0.05l0,0 l0.06-0.06l0.02-0.02l0.06-0.06l0,0l0.01-0.01L23.97,25.4c1.74-1.71,4.55-1.69,6.26,0.05c1.71,1.74,1.69,4.55-0.05,6.26 L15.28,46.33L15.28,46.33z M67.86,4.44C67.86,1.99,69.85,0,72.3,0c2.45,0,4.44,1.99,4.44,4.44v41.89h30.86L92.7,31.72 c-1.74-1.71-1.77-4.52-0.05-6.26c1.71-1.74,4.52-1.77,6.26-0.05l22.65,22.21l0.01,0.01l0,0l0.06,0.06l0.02,0.02l0.06,0.06l0,0 l0.05,0.05l0.04,0.05l0.01,0.01l0.07,0.08v0l0.07,0.08l0.01,0.01c0.04,0.05,0.08,0.11,0.12,0.16l0,0.01l0.05,0.07l0.01,0.02 l0.02,0.03c0.03,0.05,0.07,0.11,0.1,0.16l0.04,0.07l0.01,0.02l0.04,0.07l0.01,0.02l0.01,0.02c0.03,0.06,0.06,0.12,0.09,0.17 l0.01,0.01c0.04,0.09,0.08,0.19,0.12,0.28l0,0.01l0.03,0.08l0.01,0.02l0.03,0.08l0.01,0.02l0.02,0.08l0.01,0.02l0.01,0.03 l0.02,0.08l0,0c0.03,0.1,0.05,0.2,0.07,0.3l0,0.02l0.02,0.09c0.02,0.1,0.03,0.21,0.04,0.31l0,0.01l0.01,0.09l0,0l0.01,0.08l0,0.02 l0,0.08l0,0.02l0,0.02l0,0.08v0.02l0,0.09l0,0.01c0,0.07,0,0.13-0.01,0.2l0,0.01l-0.01,0.08l0,0.02l0,0.01l-0.01,0.09l0,0 l-0.01,0.08l0,0.02l-0.01,0.08l0,0.02l-0.01,0.03l-0.01,0.07l0,0.01l-0.02,0.1l0,0.01l-0.02,0.1l-0.02,0.08l-0.01,0.02l-0.01,0.02 l-0.02,0.08l0,0.01c-0.02,0.06-0.04,0.13-0.06,0.19l0,0.01l-0.03,0.08l-0.01,0.02l-0.03,0.08l-0.01,0.02l-0.03,0.08l-0.01,0.02 l-0.01,0.03l-0.03,0.06l-0.01,0.02l-0.04,0.08l0,0l-0.04,0.08l-0.01,0.02l-0.04,0.07l0,0l-0.04,0.06l-0.02,0.03l-0.01,0.02 l-0.04,0.07l-0.01,0.02l-0.01,0.02l-0.04,0.07l0,0l-0.05,0.07l-0.01,0.02l-0.05,0.07l-0.01,0.02l-0.02,0.02l-0.05,0.06l0,0 l-0.05,0.07l-0.02,0.02l-0.02,0.03l-0.05,0.06l-0.02,0.02l-0.06,0.07l-0.01,0.01c-0.04,0.05-0.09,0.1-0.13,0.14l-0.01,0.01l0,0 L98.94,76.73c-1.72,1.73-4.53,1.74-6.26,0.02c-1.73-1.72-1.74-4.53-0.02-6.26l15.15-15.28H76.74v41.96c0,2.45-1.99,4.44-4.44,4.44 c-2.45,0-4.44-1.99-4.44-4.44V4.44L67.86,4.44z M122.16,48.35c0.03,0.05,0.07,0.11,0.1,0.16L122.16,48.35L122.16,48.35z"
27+
/>
28+
</g>
29+
</svg>
30+
<span v-if="isEnabled">Inline view</span>
31+
<span v-if="!isEnabled">Split view</span>
32+
</button>
33+
</div>
34+
</template>
35+
<script lang="ts">
36+
import Vue from 'vue'
37+
export default Vue.extend({
38+
computed: {
39+
isEnabled() {
40+
return this.$store.state.inlineDiffView.isEnabled
41+
},
42+
},
43+
methods: {
44+
toggleInlineDiffView() {
45+
this.$store.commit('inlineDiffView/toggle')
46+
},
47+
},
48+
})
49+
</script>

‎components/diffActionBar.vue‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"
2323
>
2424
<div class="flex gap-4">
25-
<ToggleInSync :click-handler="toggleInSyncScroll" />
25+
<ToggleInSync />
2626
<NextDiff :click-handler="goToNextDiff" />
2727
<PrevDiff :click-handler="goToPreviousDiff" />
2828
</div>
@@ -39,7 +39,12 @@ import CopyLink from './buttons/copyLink.vue'
3939
import { putToClipboard } from '~/helpers/utils'
4040
import { DiffActionBarData } from '~/helpers/types'
4141
export default Vue.extend({
42-
components: { PrevDiff, NextDiff, ToggleInSync, CopyLink },
42+
components: {
43+
PrevDiff,
44+
NextDiff,
45+
ToggleInSync,
46+
CopyLink,
47+
},
4348
data(): DiffActionBarData {
4449
return {
4550
copied: false,
@@ -78,9 +83,22 @@ export default Vue.extend({
7883
},
7984
}
8085
)
86+
document.addEventListener('keydown', this.handleCtrlC)
8187
}
8288
},
89+
beforeDestroy() {
90+
document.removeEventListener('keydown', this.handleCtrlC)
91+
},
8392
methods: {
93+
handleCtrlC(event: KeyboardEvent) {
94+
const { metaKey, ctrlKey, key } = event
95+
if ((metaKey || ctrlKey) && key === 'c') {
96+
const button: HTMLButtonElement = document.getElementById(
97+
'copyLinkButton'
98+
) as HTMLButtonElement
99+
button.click()
100+
}
101+
},
84102
copyUrlToClipboard() {
85103
putToClipboard(
86104
window.location.href,
@@ -92,9 +110,6 @@ export default Vue.extend({
92110
this.copied = false
93111
}, 5000)
94112
},
95-
toggleInSyncScroll() {
96-
this.$store.commit('scrollInSync/toggle')
97-
},
98113
goToNextDiff() {
99114
const currentNode = this.treeWalker?.currentNode
100115
const nextNode = this.treeWalker?.nextNode()

0 commit comments

Comments
 (0)