Skip to content

Commit 09b3ea0

Browse files
markacatomarkacato
committed
Add a11y to search, polygon color and tooltip support. OWC-94 OWC-122 OWC-123
1 parent 138b5b5 commit 09b3ea0

6 files changed

Lines changed: 245 additions & 115 deletions

File tree

‎build/blocks/owc-openkaarten/streetmap/client.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/blocks/owc-openkaarten/streetmap/client.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/mix-manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=8888c46658d6c24f49ebeaf5d0a89eb3",
2+
"/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=f470c2357ae72e6b2bbc6a4a1a7a9b89",
33
"/blocks/owc-openkaarten/streetmap/style.css": "/blocks/owc-openkaarten/streetmap/style.css?id=0c70cc29722d11466724176fc03cdd58",
44
"/blocks/owc-openkaarten/streetmap/editor.css": "/blocks/owc-openkaarten/streetmap/editor.css?id=f4316f0723fb86e3b028a9b448b1f3ae"
55
}

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseSearchInput.vue‎

Lines changed: 134 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref } from 'vue';
2+
import { ref, computed } from 'vue';
33
44
const props = defineProps({
55
placeholder: {
@@ -14,84 +14,157 @@ const props = defineProps({
1414
1515
const emit = defineEmits(['search']);
1616
const searchQuery = ref('');
17+
const resultsCount = ref(0);
1718
1819
const handleSubmit = (e) => {
1920
e.preventDefault();
2021
emit('search', searchQuery.value);
2122
};
2223
2324
const handleInput = () => {
24-
if (!searchQuery.value) {
25-
emit('search', ''); // Clear search when input is empty
26-
}
25+
emit('search', searchQuery.value);
26+
};
27+
28+
const clearSearch = () => {
29+
searchQuery.value = '';
30+
emit('search', '');
2731
};
32+
33+
const searchStatus = computed(() => {
34+
if (!searchQuery.value) return '';
35+
return `${resultsCount.value} resultaten gevonden voor "${searchQuery.value}"`;
36+
});
2837
</script>
2938

3039
<template>
31-
<form
32-
@submit="handleSubmit"
33-
class="search-input"
34-
:style="{ '--search-primary-color': primaryColor }"
35-
>
36-
<input
37-
type="search"
38-
v-model="searchQuery"
39-
:placeholder="placeholder"
40-
@input="handleInput"
41-
class="search-input__field"
42-
/>
43-
<button
44-
type="submit"
45-
class="search-input__button"
46-
:disabled="!searchQuery"
40+
<search class="search-container">
41+
<form
42+
@submit="handleSubmit"
43+
class="search-form"
44+
:style="{ '--search-primary-color': primaryColor }"
4745
>
48-
<span class="sr-only">Zoeken</span>
49-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
50-
<path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="currentColor"/>
51-
</svg>
52-
</button>
53-
</form>
46+
<label class="sr-only" for="location-search">Zoeken op locatie</label>
47+
<div class="search-wrapper">
48+
<div
49+
role="status"
50+
aria-live="polite"
51+
aria-atomic="true"
52+
class="sr-only"
53+
>
54+
<span>{{ searchStatus }}</span>
55+
</div>
56+
57+
<input
58+
id="location-search"
59+
type="search"
60+
v-model="searchQuery"
61+
:placeholder="placeholder"
62+
@input="handleInput"
63+
autocomplete="off"
64+
class="search-input"
65+
/>
66+
67+
<button
68+
v-if="searchQuery"
69+
type="button"
70+
class="search-clear"
71+
@click="clearSearch"
72+
aria-label="Zoekopdracht wissen"
73+
>
74+
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
75+
<path d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" />
76+
</svg>
77+
</button>
78+
79+
<button
80+
type="submit"
81+
class="search-submit"
82+
:disabled="!searchQuery"
83+
aria-label="Zoeken"
84+
>
85+
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
86+
<path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="currentColor"/>
87+
</svg>
88+
</button>
89+
</div>
90+
</form>
91+
</search>
5492
</template>
5593

5694
<style lang="scss" scoped>
95+
.sr-only {
96+
position: absolute;
97+
width: 1px;
98+
height: 1px;
99+
padding: 0;
100+
margin: -1px;
101+
overflow: hidden;
102+
clip: rect(0, 0, 0, 0);
103+
border: 0;
104+
}
105+
106+
.search-container {
107+
display: block;
108+
flex-grow: 1;
109+
margin-inline-end: 1.5rem;
110+
}
111+
112+
.search-form {
113+
position: relative;
114+
width: 100%;
115+
}
116+
117+
.search-wrapper {
118+
position: relative;
119+
display: flex;
120+
align-items: center;
121+
}
122+
57123
.search-input {
58-
position: relative;
59-
flex-grow: 1;
60-
margin-inline-end: 1.5rem;
61-
62-
&__field {
63-
block-size: 100%;
64-
inline-size: 100%;
65-
padding: 0.75rem 1rem;
66-
border: 1px solid #7a7a7a;
67-
border-radius: 4px;
68-
font-size: 1rem;
124+
width: 100%;
125+
padding: 0.75rem 1rem;
126+
padding-inline-end: 5rem; // Space for both buttons
127+
border: 1px solid #7a7a7a;
128+
border-radius: 4px;
129+
font-size: 1rem;
130+
131+
&:focus {
132+
outline: 2px solid var(--search-primary-color);
133+
outline-offset: 2px;
134+
}
135+
}
136+
137+
.search-clear,
138+
.search-submit {
139+
position: absolute;
140+
display: flex;
141+
align-items: center;
142+
justify-content: center;
143+
padding: 0.5rem;
144+
border: none;
145+
background: none;
146+
color: #666;
147+
cursor: pointer;
148+
transition: color 0.2s ease;
149+
150+
&:focus-visible {
151+
outline: 2px solid var(--search-primary-color);
152+
outline-offset: 2px;
69153
}
154+
}
155+
156+
.search-clear {
157+
inset-inline-end: 2.5rem;
158+
}
159+
160+
.search-submit {
161+
inset-inline-end: 0.25rem;
162+
color: white;
163+
background-color: var(--search-primary-color);
164+
border-radius: 4px;
70165
71-
&__button {
72-
position: absolute;
73-
display: flex;
74-
align-items: center;
75-
justify-content: center;
76-
inset-block: 4px;
77-
inset-inline-end: 4px;
78-
min-block-size: auto;
79-
padding: 0.75rem;
80-
background-color: var(--search-primary-color);
81-
border: none;
82-
border-radius: 4px;
83-
color: white;
84-
transition: opacity 0.2s ease;
85-
cursor: pointer;
86-
87-
&:hover {
88-
opacity: 0.9;
89-
}
90-
91-
&:focus-visible {
92-
outline: 2px solid var(--search-primary-color);
93-
outline-offset: 2px;
94-
}
166+
&:where(:hover, :focus-visible) {
167+
opacity: 0.8;
95168
}
96169
}
97170
</style>

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/ListView.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ const handleSearch = (query) => {
210210
gap: 0.5rem;
211211
margin-block-end: 0.5rem;
212212
213-
button {
213+
button:not([class*="search"]) {
214214
align-items: center;
215215
border: 1px solid #328725;
216216
background-color: #fff;

0 commit comments

Comments
 (0)