#923: add screenreader support to user input

it-at-m · May 27, 2024 · 6477986 · 6477986
1 parent 8f24490
commit 6477986
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 30 deletions.
diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/src/components/schema/VMultiUserInput.vue b/digiwf-apps/packages/apps/digiwf-tasklist/src/components/schema/VMultiUserInput.vue
@@ -179,7 +179,7 @@ export default defineComponent({
 
     const a11YNotificationEnabled = useAccessibility().a11YNotificationEnabled;
 
-    const screenreaderMode = computed(() => !a11YNotificationEnabled());
+    const screenreaderMode = computed(() => a11YNotificationEnabled());
 
     watch(searchText, (newValue) => {
       searchUsersBySearchString(newValue);
@@ -228,7 +228,7 @@ export default defineComponent({
       selectedUsers.value = selectedUsers.value.filter(
         (it) => it.lhmObjectId !== user.lhmObjectId
       );
-      props.on.input(selectedUsers.value);
+      change();
     };
 
     const mucatarUrl = (uid: string) => mucatarURL(uid);

diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/src/components/schema/VUserInput.vue b/digiwf-apps/packages/apps/digiwf-tasklist/src/components/schema/VUserInput.vue
@@ -1,6 +1,9 @@
 <template>
   <v-autocomplete
+    v-model="selectedUser"
     :aria-required="isRequired()"
+    :auto-select-first="!screenreaderMode"
+    :disabled="screenreaderMode && !!selectedUser"
     :filter="filterUsers"
     :items="entries()"
     :label="label"
@@ -9,16 +12,18 @@
     :readonly="isReadonly()"
     :rules="rules ? rules : true"
     :search-input.sync="searchText"
-    :value="selectedUser"
-    auto-select-first
     item-text="lhmObjectId"
     item-value="lhmObjectId"
     placeholder="Benutzer suchen..."
     v-bind="schema['x-props']"
     @input="input"
   >
     <template #label>
-      <span>{{ label }}</span>
+      <span
+        :aria-label="label"
+        :aria-required="isRequired()"
+        tabindex="0"
+      >{{ label }}</span>
       <span
         v-if="isRequired()"
         aria-hidden="true"
@@ -28,18 +33,35 @@
       >
     </template>
     <template #selection="data">
-      {{ getFullName(data.item) }}
+      <div
+        :aria-label="'Aktuelle Auswahl ' + getFullName(data.item)"
+        tabindex="0"
+      >
+        {{ getFullName(data.item) }}
+      </div>
+    </template>
+    <template #append>
+      <v-icon
+        v-if="!isReadonly() && !!selectedUser"
+        aria-label="Auswahl entfernen"
+        @click.stop="removeUser()">
+        mdi-close
+      </v-icon>
     </template>
     <template #item="data">
       <template>
-        <v-list-item-avatar class="avatar">
+        <v-list-item-avatar
+          aria-hidden="true"
+          class="avatar"
+        >
           {{ getNamePrefix(data.item) }}
         </v-list-item-avatar>
         <v-list-item-content>
           <v-list-item-title>{{ getFullName(data.item) }}</v-list-item-title>
-          <v-list-item-subtitle>{{
-            castNoAttrAvailable(data.item.email)
-          }}</v-list-item-subtitle>
+          <v-list-item-subtitle aria-hidden="true">{{
+              castNoAttrAvailable(data.item.email)
+            }}
+          </v-list-item-subtitle>
           <v-list-item-subtitle>
             {{ castNoAttrAvailable(data.item.department) }}
             <span class="dot">&#8226;</span>
@@ -65,24 +87,12 @@
 </style>
 
 <script lang="ts">
-import {
-  FetchUtils,
-  SearchUserTO,
-  UserRestControllerApiFactory,
-  UserTO,
-} from "@muenchen/digiwf-engine-api-internal";
-import { AxiosResponse } from "axios";
-import { defineComponent, PropType, ref, watch } from "vue";
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-
-import { ApiConfig } from "../../api/ApiConfig";
-import {
-  callGetUserById,
-  callGetUserByUsername,
-  callSearchUser,
-} from "../../api/user/userApiCalls";
-import { mucatarURL } from "../../constants";
-import { checkRequired } from "./validation/required";
+import {UserTO,} from "@muenchen/digiwf-engine-api-internal";
+import {computed, defineComponent, PropType, ref, watch} from "vue";
+import {callGetUserById, callGetUserByUsername, callSearchUser,} from "../../api/user/userApiCalls";
+import {mucatarURL} from "../../constants";
+import {checkRequired} from "./validation/required";
+import {useAccessibility} from "../../store/modules/accessibility";
 
 export interface OnProperty {
   input: (value: any) => void;
@@ -140,6 +150,10 @@ export default defineComponent({
 
     const noDataText = ref<string>("Tippen, um Suche zu starten");
 
+    const a11YNotificationEnabled = useAccessibility().a11YNotificationEnabled;
+
+    const screenreaderMode = computed(() => a11YNotificationEnabled());
+
     watch(searchText, (newValue) => {
       searchUsersBySearchString(newValue);
     });
@@ -156,8 +170,8 @@ export default defineComponent({
       const isId = idOrUsername.match(/^-?\d+$/);
       locked.value = true;
       (isId
-        ? callGetUserById(idOrUsername)
-        : callGetUserByUsername(idOrUsername)
+          ? callGetUserById(idOrUsername)
+          : callGetUserByUsername(idOrUsername)
       )
         .then((user) => {
           selectedUser.value = user;
@@ -184,6 +198,7 @@ export default defineComponent({
     const removeUser = (): void => {
       resetInput();
       selectedUser.value = undefined;
+      props.on.input(selectedUser.value);
     };
 
     const mucatarUrl = (uid: string) => mucatarURL(uid);
@@ -244,6 +259,7 @@ export default defineComponent({
     }
 
     return {
+      screenreaderMode,
       resetInput,
       input,
       getFullName,