Skip to content

Commit

Permalink
Feature/#923 add screenreader support to multi user input (#1730)
Browse files Browse the repository at this point in the history 
* #923: add screenreader support to multi user input

* #923: remove autoSelectFirst for screenreader

* #923: clear input after remove

* #923: rename barrierefreie Mitteilungen to Screenreader Optimierung

* #923: add screenreader support to user input

* #923: review feedback

* #923: rename a11YNotificationEnabled to a11YScreenreaderModeEnabled

* #923: rename a11YNotificationEnabled to a11YScreenreaderModeEnabled
  • Loading branch information
@lehju
lehju authored Jun 4, 2024
1 parent 46c0ccb commit c0deac9
Show file tree
Hide file tree
Showing 7 changed files with 138 additions and 100 deletions.
33 changes: 19 additions & 14 deletions digiwf-apps/packages/apps/digiwf-tasklist/src/components/UI/help/AppHelpMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
<v-switch
:aria-label="
isHighContrastModeEnabled()
? 'Hohen Kontrast deaktivieren'
: 'Hohen Kontrast aktivieren'
? 'ist aktiviert, deaktivieren mit Entertaste'
: 'ist deaktiviert, aktivieren mit Entertaste'
"
:input-value="isHighContrastModeEnabled()"
class="ml-2"
Expand All @@ -32,17 +32,17 @@
</v-list-item>
<v-list-item
class="max-v-list-item-height"
@click.stop="changeA11YNotificationMode"
@click.stop="changeA11YScreenreaderMode"
>
<HighContrastIcon class="mr-2"/>
barrierefreie Mitteilungen
Screenreader Optimierung
<v-switch
:aria-label="
a11YNotificationEnabled()
? 'Mitteilungen werden barrierefrei angezeigt'
: 'Mitteilungen werden als Popup angezeigt'
a11YScreenreaderModeEnabled()
? 'ist aktiviert, deaktivieren mit Entertaste'
: 'ist deaktiviert, aktivieren mit Entertaste'
"
:input-value="a11YNotificationEnabled()"
:input-value="a11YScreenreaderModeEnabled()"
class="ml-2"
dense
>
Expand Down Expand Up @@ -88,7 +88,12 @@ export default defineComponent({
emits: ["openKeyBindingsDialoge", "closeKeyBindingsDialoge"],
setup: (components, {emit}) => {
const theme = useTheme();
const {isHighContrastModeEnabled, setHighContrastModeEnabled, a11YNotificationEnabled, setA11YNotificationEnabled} =
const {
isHighContrastModeEnabled,
setHighContrastModeEnabled,
a11YScreenreaderModeEnabled,
setA11YScreenreaderModeEnabled
} =
useAccessibility();
emit("openKeyBindingsDialoge");
Expand All @@ -104,16 +109,16 @@ export default defineComponent({
setHighContrastModeEnabled(!isEnabled);
};
const changeA11YNotificationMode = () => {
const isEnabled = a11YNotificationEnabled();
setA11YNotificationEnabled(!isEnabled);
const changeA11YScreenreaderMode = () => {
const isEnabled = a11YScreenreaderModeEnabled();
setA11YScreenreaderModeEnabled(!isEnabled);
};
return {
changeMode,
isHighContrastModeEnabled,
a11YNotificationEnabled,
changeA11YNotificationMode
a11YScreenreaderModeEnabled,
changeA11YScreenreaderMode
};
},
Expand Down
64 changes: 41 additions & 23 deletions digiwf-apps/packages/apps/digiwf-tasklist/src/components/schema/VMultiUserInput.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<template>
<div id="top">
<v-autocomplete
ref="autocompletion"
v-model="selectedUsers"
:aria-required="isRequired()"
:auto-select-first="!screenreaderMode"
:class="[isReadonly() ? 'userInputReadonly' : 'userInput']"
:disabled="disabled"
:filter="filterUsers"
Expand All @@ -12,7 +14,6 @@
:readonly="isReadonly()"
:rules="rules ? rules : true"
:search-input.sync="searchText"
auto-select-first
chips
hide-no-data
item-text="username"
Expand All @@ -25,7 +26,11 @@
@change="change"
>
<template #label>
<span>{{ label }}</span>
<span
:aria-label="label"
:aria-required="isRequired()"
tabindex="0"
>{{ label }}</span>
<span
v-if="isRequired()"
aria-hidden="true"
Expand All @@ -36,12 +41,12 @@
</template>
<template #selection="data">
<v-chip
:close="!readonly"
:aria-label="getFullName(data.item) + data.item.ou"
:input-value="data.selected"
class="ma-1 pa-4"
small
tabindex="0"
v-bind="data.attrs"
@click:close="removeUser(data.item)"
>
<v-avatar left>
<v-img :src="mucatarUrl(data.item.username)">
Expand All @@ -51,6 +56,14 @@
</v-img>
</v-avatar>
{{ getFullName(data.item) }} ({{ data.item.ou }})
<v-icon
v-if="!readonly"
:aria-label="getFullName(data.item) + data.item.ou + ' entfernen'"
class="ml-2"
size="20"
@click.stop="removeUser(data.item)">
mdi-close-circle
</v-icon>
</v-chip>
</template>
<template #item="data">
Expand All @@ -64,7 +77,7 @@
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ getFullName(data.item) }}</v-list-item-title>
<v-list-item-subtitle v-html="data.item.ou" />
<v-list-item-subtitle v-html="data.item.ou"/>
</v-list-item-content>
</template>
</template>
Expand All @@ -84,16 +97,13 @@
</style>

<script lang="ts">
import { UserTO } from "@muenchen/digiwf-engine-api-internal";
import { defineComponent, PropType, ref, watch } from "vue";
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 {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;
Expand Down Expand Up @@ -166,7 +176,13 @@ export default defineComponent({
*/
const locked = ref(false);
const errorMessage = ref("");
const lastSearch = ref("");
const currentSearch = ref("");
const a11YScreenreaderModeEnabled = useAccessibility().a11YScreenreaderModeEnabled;
const screenreaderMode = computed(() => a11YScreenreaderModeEnabled());
const autocompletion = ref();
watch(searchText, (newValue) => {
searchUsersBySearchString(newValue);
Expand All @@ -186,8 +202,8 @@ export default defineComponent({
const isId = idOrUsername.match(/^-?\d+$/);
locked.value = true;
(isId
? callGetUserById(idOrUsername)
: callGetUserByUsername(idOrUsername)
? callGetUserById(idOrUsername)
: callGetUserByUsername(idOrUsername)
)
.then((user) => {
selectedUsers.value = [...selectedUsers.value, user];
Expand Down Expand Up @@ -215,22 +231,22 @@ export default defineComponent({
selectedUsers.value = selectedUsers.value.filter(
(it) => it.lhmObjectId !== user.lhmObjectId
);
change();
autocompletion.value.focus();
};
const mucatarUrl = (uid: string) => mucatarURL(uid);
const searchUsersBySearchString = (searchString: string) => {
if (!searchString || searchString.length < 3) return;
if (lastSearch.value === searchString.slice(0, 3)) return;
lastSearch.value = searchString.slice(0, 3);
currentSearch.value = searchString.slice(0, 3);
isLoading.value = true;
callSearchUser(lastSearch.value, ldapGroups)
callSearchUser(currentSearch.value, ldapGroups)
.then((users) => {
if (lastSearch.value === searchText.value.slice(0, 3)) {
if (currentSearch.value === searchText.value.slice(0, 3)) {
items.value = users;
}
errorMessage.value = "";
Expand All @@ -251,7 +267,7 @@ export default defineComponent({
};
const resetInput = (): void => {
lastSearch.value = "";
currentSearch.value = "";
searchText.value = "";
items.value = [];
};
Expand All @@ -271,6 +287,8 @@ export default defineComponent({
}
return {
autocompletion,
screenreaderMode,
resetInput,
change,
getFullName,
Expand Down
Loading

0 comments on commit c0deac9

Please sign in to comment.