codeforleipzig/stadtratmonitor-vue
3
0
Fork 0
Code Issues Activity

improve accessability

Browse source
This commit is contained in:
Vri 🌈 2023-06-29 10:55:32 +02:00
parent 217a9d934d
commit 44ffa3ac7d
Signed by: vrifox
GPG key ID: D40098E5B60B2197
3 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/SearchBar.vue
View file

@ -11,8 +11,10 @@ onUpdated(() => updateSearch(searchValue, searchType))
<template> <template>
<form class="sticky top-0 flex flex-row place-content-center"> <form class="sticky top-0 flex flex-row place-content-center">
<label class="hidden" for="searchBar">Suche</label>
<div class="flex flex-row w-full max-w-5xl"> <div class="flex flex-row w-full max-w-5xl">
<input <input
id="searchBar"
class="p-6 grow bg-transparent placeholder:text-text-300 dark:placeholder:text-text-700 text-2xl text-center focus-visible:outline focus-visible:outline-current" class="p-6 grow bg-transparent placeholder:text-text-300 dark:placeholder:text-text-700 text-2xl text-center focus-visible:outline focus-visible:outline-current"
type="search" type="search"
placeholder="z. B. Thema, Name, VII-EF-08640, …" placeholder="z. B. Thema, Name, VII-EF-08640, …"

15
src/components/papers/FilterSidebar.vue
View file

@ -53,6 +53,7 @@ const paperOriginators = computed(() => {
/* const paperType = computed(() => { /* const paperType = computed(() => {
return paperTypes.filter((type) => type.key == ) return paperTypes.filter((type) => type.key == )
}) */ }) */
function resetFilterType() { function resetFilterType() {
filterType = { key: '', value: '' } filterType = { key: '', value: '' }
} }
@ -66,9 +67,10 @@ onUpdated(() => {
<template> <template>
<form class="mr-4 mt-4"> <form class="mr-4 mt-4">
<fieldset class="flex flex-row mb-4"> <label for="typeSelect">Kategorie</label>
<legend>Kategorie</legend> <div class="flex flex-row mb-4">
<select <select
id="typeSelect"
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg" class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
v-model="filterType" v-model="filterType"
> >
@ -85,10 +87,11 @@ onUpdated(() => {
title="zurücksetzen" title="zurücksetzen"
>✖ >✖
</button> </button>
</fieldset> </div>
<fieldset class="flex flex-row mb-4"> <label for="originatorSelect">Einreicher</label>
<legend>Einreicher</legend> <div class="flex flex-row mb-4">
<select <select
id="originatorSelect"
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg" class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
v-model="filterOriginator"> v-model="filterOriginator">
<option <option
@ -103,6 +106,6 @@ onUpdated(() => {
title="zurücksetzen" title="zurücksetzen"
>✖ >✖
</button> </button>
</fieldset> </div>
</form> </form>
</template> </template>

11
src/components/papers/TopicList.vue
View file

@ -79,8 +79,15 @@ onUpdated(() => {
<article <article
class="p-4 rounded-lg bg-background-100 dark:bg-background-900" class="p-4 rounded-lg bg-background-100 dark:bg-background-900"
> >
<h4 class="text-xl">{{ topic.papers[0].name }}</h4> <p class="text-xl">{{ topic.papers[0].name }}</p>
<p>{{ date(topic.papers[0].published_at) }}: <a :href="topic.papers[0].url" class="text-secondary-button-500">{{ topic.papers[0].paper_type}} von {{ topic.papers[0].originator }}</a></p> <p>
{{ date(topic.papers[0].published_at) }}:
<a
:href="topic.papers[0].url"
class="text-secondary-button-600 dark:text-secondary-button-400"
>{{ topic.papers[0].paper_type}} von {{ topic.papers[0].originator }}
</a>
</p>
</article> </article>
</li> </li>
</ul> </ul>