improve accessability

src/components/SearchBar.vue

@@ -11,8 +11,10 @@ onUpdated(() => updateSearch(searchValue, searchType))
 
 <template>
   <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">
       <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"
         type="search"
         placeholder="z. B. Thema, Name, VII-EF-08640, …"

src/components/papers/FilterSidebar.vue

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

src/components/papers/TopicList.vue

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