Skip to content

Commit 94f4160

Browse files
PrinsINTPrinsINT
committed
Added many accessibility tabindices and tooltips
1 parent 17c2ca1 commit 94f4160

16 files changed

Lines changed: 80 additions & 31 deletions

File tree

‎client/StyleTemplate.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ type myType = { id: number; name: string }
2727
// --- model ---
2828
const model = defineModel<string>()
2929
30+
// --- ref ---
31+
const metricsFilter = useTemplateRef<InstanceType<typeof MetricsFilter>>("metricsFilter")
32+
3033
// --- props ---
3134
const { foo = "bar" } = defineProps<{ foo?: string }>()
3235

‎client/src/assets/main.scss‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,29 @@ ol {
3434
padding: revert;
3535
}
3636

37+
button,
38+
div,
39+
span,
40+
input,
41+
label,
42+
select {
43+
&[title]:focus-visible:after {
44+
content: attr(title);
45+
position: absolute;
46+
display: inline-block;
47+
font-size: 16px;
48+
font-style: normal;
49+
text-transform: none;
50+
font-weight: normal;
51+
letter-spacing: normal;
52+
background: black;
53+
color: white;
54+
padding: 0.25rem;
55+
z-index: 1;
56+
margin: 3rem 0 0 3rem;
57+
}
58+
}
59+
3760
a {
3861
color: black;
3962
text-decoration: underline;
@@ -51,7 +74,7 @@ a {
5174
// Awesome font icons
5275
i.fa {
5376
font-size: 1.3rem;
54-
padding: 0 0.2rem
77+
padding: 0 0.2rem;
5578
}
5679

5780
$theme: #62b6ff;

‎client/src/assets/primevue.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
--p-checkbox-border-radius: 0;
1010
--p-highlight-background: var(--int-theme-lighter);
1111

12+
--p-form-field-focus-ring-width: 1px;
13+
--p-form-field-focus-ring-style: solid;
14+
--p-form-field-focus-ring-color: blue;
15+
1216
.p-multiselect-header {
1317
border-bottom: 1px solid var(--int-light-grey);
1418

‎client/src/components/AppBanner.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@
77
</div>
88

99
<div class="title">
10-
<a href="https://ivdnt.org/" target="_blank" tabindex="-1" rel="noopener noreferrer">
11-
/ instituut voor de Nederlandse&nbsp;taal&nbsp;/
12-
</a>
10+
<a href="https://ivdnt.org/" target="_blank">/ instituut voor de Nederlandse&nbsp;taal&nbsp;/</a>
1311
<router-link to="/">galahad</router-link>
1412
</div>
1513

‎client/src/components/GFooter.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<footer>
3-
<p>© 2025 Dutch Language Institute, all rights reserved.</p>
4-
<div>
5-
<a href="https://ivdnt.org/english/privacy-statement/">privacy statement</a>
6-
<a href="https://ivdnt.org/english/terms-and-conditions/">terms and conditions</a>
7-
</div>
3+
<p>
4+
© 2025 Dutch Language Institute, see our
5+
<a href="https://ivdnt.org/english/privacy-statement/">privacy statement</a> &
6+
<a href="https://ivdnt.org/english/terms-and-conditions/">terms and conditions</a>.
7+
</p>
88
</footer>
99
</template>
1010

‎client/src/components/input/GCheckBox.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<label class="checkbox-container">
2+
<label class="checkbox-container" tabindex="0" title="Check" @keypress.space.prevent="check" @keyup.enter="check">
33
<slot></slot>
44
<input class="checkbox" v-model="model" type="checkbox" />
5-
<span class="checkmark" tabindex="0" @keypress.space.prevent="check" @keyup.enter="check"></span>
5+
<span class="checkmark"></span>
66
</label>
77
</template>
88

‎client/src/components/input/GSelect.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<select v-model="model" class="select">
3-
<option class="option" hidden selected :value="undefined">-- select an option --</option>
3+
<option class="option" selected :value="undefined">-- select an option --</option>
44
<option v-for="option in options" :key="option.value" :value="option.value" class="option">
55
{{ option.text }}
66
</option>

‎client/src/components/input/UploadDocuments.vue‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@
44

55
<form class="form">
66
<!-- Styled label for input -->
7-
<label for="file-upload" class="custom-file-upload" title="Select files">
7+
<label
8+
tabindex="0"
9+
for="file-upload"
10+
class="custom-file-upload"
11+
title="Select files"
12+
@keydown.enter="$refs.uploadInput.click()"
13+
>
814
<svg
915
class="svg-icon"
10-
aria-hidden="true"
1116
role="img"
12-
focusable="false"
1317
xmlns="http://www.w3.org/2000/svg"
1418
width="20"
1519
height="12"
@@ -43,7 +47,8 @@
4347

4448
<!-- Confirmation and clear buttons after a selection has been made -->
4549
<fieldset v-if="filesToUpload.length != 0" class="btns">
46-
<GButton title="Upload"
50+
<GButton
51+
title="Upload"
4752
green
4853
@click="
4954
() => {
@@ -54,7 +59,8 @@
5459
>
5560
<i class="fa fa-upload"></i>
5661
</GButton>
57-
<GButton title="Cancel"
62+
<GButton
63+
title="Cancel"
5864
plain
5965
@click="
6066
() => {

‎client/src/components/modals/DeleteModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
>. This can not be undone.
66
</p>
77
<template #buttons>
8-
<GButton
8+
<GButton title="Accept"
99
green
1010
@click="
1111
() => {

‎client/src/components/modals/GModal.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
2-
<dialog class="modal view" tabindex="0" @click.self="$emit('hide')">
2+
<dialog class="modal view" tabindex="-1" aria-modal="true" @click.self="$emit('hide')" role="alertdialog">
3+
{{ focusable }}
34
<GCard class="content" :title>
45
<template v-if="$slots.title" #title>
56
<slot name="title"></slot>
@@ -21,8 +22,8 @@ const { title } = defineProps<{ title?: string }>()
2122
2223
const emit = defineEmits<{ hide: [] }>()
2324
24-
// @keyup does not work due to focus, so use event listener.
25-
useEventListener(document, "keyup", (e: KeyboardEvent) => {
25+
// // @keyup does not work due to focus, so use event listener.
26+
useEventListener(document, "keydown", (e: KeyboardEvent) => {
2627
if (e.key === "Escape") {
2728
emit("hide")
2829
}

0 commit comments

Comments
 (0)
⚡