Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BC-8427- Improve A11y of add and remove member dialog #3467

Merged
merged 34 commits into from
Dec 19, 2024
Merged
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
6e90ec8
add vueuse focus trap
NFriedo Dec 4, 2024
7dc4c0b
close dialog with esc
NFriedo Dec 4, 2024
0bf0afe
add focus trap for add members dialog
NFriedo Dec 4, 2024
528e8ae
WIP: add focus trap remove dialog
NFriedo Dec 4, 2024
c25cbf8
Merge branch 'main' into BC-8427-member-dialogs-a11y
NFriedo Dec 5, 2024
6ec5504
add todos, remove focus trap from custom dialog
NFriedo Dec 5, 2024
4dd9439
Merge branch 'main' into BC-8427-member-dialogs-a11y
NFriedo Dec 11, 2024
7a08ca6
use onDialogClose
NFriedo Dec 11, 2024
9f71f84
add name for actions table header
NFriedo Dec 11, 2024
7b123e8
Revert "add name for actions table header"
NFriedo Dec 11, 2024
8bd6949
WIP: repalce custom dialog with v-dialog
NFriedo Dec 11, 2024
9fd0ee6
add focus trap for confirmation dialog
NFriedo Dec 12, 2024
e29124a
remove custom dialog
NFriedo Dec 12, 2024
40eae14
add styling for remove dialog
NFriedo Dec 13, 2024
9fcf6f4
Merge branch 'main' into BC-8427-member-dialogs-a11y
NFriedo Dec 13, 2024
26b3b8a
adjust styling
NFriedo Dec 13, 2024
386a5bb
adjust margin action buttons
NFriedo Dec 13, 2024
551a595
add tabbable mock for focus trap
NFriedo Dec 13, 2024
904c6b2
refactor AddMembers test to not use wrapperVm
NFriedo Dec 13, 2024
bb9341c
add tests confirm dialog
NFriedo Dec 13, 2024
67b5d0c
make dialog tests independent
NFriedo Dec 16, 2024
0f00ba6
Merge branch 'main' into BC-8427-member-dialogs-a11y
NFriedo Dec 16, 2024
5d9f177
fix and add tests for confirmation dialog
NFriedo Dec 16, 2024
5016bac
fix tests
NFriedo Dec 16, 2024
ab45e43
fix room member page
NFriedo Dec 16, 2024
d67ee0b
mock focus trap in room member page
NFriedo Dec 16, 2024
9278f30
Merge branch 'main' into BC-8427-member-dialogs-a11y
NFriedo Dec 16, 2024
ade9a65
add tests add members
NFriedo Dec 17, 2024
6c0335c
fix bug when opening a different autocomplete than the currently open…
NFriedo Dec 17, 2024
5fe5dfd
add test for closing dialog via escape key
NFriedo Dec 17, 2024
7dfc2db
Merge branch 'main' into BC-8427-member-dialogs-a11y
NFriedo Dec 17, 2024
ddc0d33
add tests
NFriedo Dec 17, 2024
ffb17ed
add tests for focus trap
NFriedo Dec 17, 2024
e31c571
Merge branch 'main' into BC-8427-member-dialogs-a11y
NFriedo Dec 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add styling for remove dialog
NFriedo committed Dec 13, 2024
commit 40eae14cd89f7278e8ada78cb60442fde1dea28c
36 changes: 19 additions & 17 deletions src/modules/ui/confirmation-dialog/ConfirmationDialog.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<template>
<!-- ToDo: Styling -->
<VDialog
v-model="isDialogOpen"
data-testid="delete-dialog-item"
@@ -8,28 +7,29 @@
<UseFocusTrap>
<VCard>
<template #title>
<h2 class="text-h4 dialog-title">
<h2 class="text-h4 my-2 px-2 dialog-title">
{{ message }}
</h2>
</template>

<template #actions>
<VSpacer />
<!-- <div class="action-buttons"> -->
<VBtn
data-testid="dialog-cancel"
variant="text"
:text="t('common.actions.cancel')"
@click="cancel"
/>
<VBtn
data-testid="dialog-confirm"
color="primary"
variant="flat"
:text="t(confirmBtnLangKey)"
@click="confirm"
/>
<!-- </div> -->
<div class="action-buttons px-6">
<VBtn
data-testid="dialog-cancel"
variant="text"
:text="t('common.actions.cancel')"
@click="cancel"
/>
<VBtn
data-testid="dialog-confirm"
class="px-6"
color="primary"
variant="flat"
:text="t(confirmBtnLangKey)"
@click="confirm"
/>
</div>
</template>
</VCard>
</UseFocusTrap>
@@ -59,6 +59,7 @@ const confirmBtnLangKey = computed(() =>

<style scoped>
.action-buttons {
display: flex;
margin-bottom: calc(var(--space-base-vuetify) * 2);
gap: calc(var(--space-base-vuetify) * 2);
}
@@ -67,5 +68,6 @@ const confirmBtnLangKey = computed(() =>
white-space: normal;
hyphens: none;
word-break: break-word;
line-height: var(--line-height-lg);
}
</style>

Unchanged files with check annotations Beta

createWrapper({
type: "unsupported",
});
expect(console.error).toHaveBeenCalled();

Check warning on line 68 in src/components/base/BaseInput/BaseInput.unit.js

GitHub Actions / lint

Unexpected console statement
});
});
},
created() {
if (!componentDictionary[this.type]) {
console.error(

Check warning on line 88 in src/components/base/BaseInput/BaseInput.vue

GitHub Actions / lint

Unexpected console statement
`invalid prop type ${this.type}:\n` +
`$attrs ${JSON.stringify(this.$attrs)}`
);

Check warning on line 112 in src/components/base/BaseLink.vue

GitHub Actions / lint

Unexpected console statement

Check warning on line 119 in src/components/base/BaseLink.vue

GitHub Actions / lint

Unexpected console statement
if (handlerFunction) {
handlerFunction(responseError);
} else {
console.error(error);

Check warning on line 83 in src/components/error-handling/ErrorHandler.composable.ts

GitHub Actions / lint

Unexpected console statement
}
};
const clipboardText = "https://google.de";
const template = schoolExternalToolConfigurationTemplateFactory.build();
const clipboardMock = createMock<Clipboard>();

Check warning on line 124 in src/components/external-tools/configuration/ExternalToolConfigurator.unit.ts

GitHub Actions / lint

'Clipboard' is not defined
Object.assign(navigator, { clipboard: clipboardMock });
const { wrapper } = getWrapper({
await nextTick();
updateSearchInput(text);
} catch (err) {

Check warning on line 338 in src/components/external-tools/configuration/ExternalToolConfigurator.vue

GitHub Actions / lint

'err' is defined but never used
notifierModule.show({
text: t("pages.tool.select.clipboard.error"),
status: "error",
try {
new URL(text);
return true;
} catch (err) {

Check warning on line 8 in src/components/external-tools/configuration/external-tool-url-insertion.composable.ts

GitHub Actions / lint

'err' is defined but never used
return false;
}
};
// Clears the previous collection elements before rendering the new ones
contentModule.clearElements();
await contentModule.getElements(this.query);
} catch (error) {

Check warning on line 270 in src/components/lern-store/LernstoreCollectionDetailView.vue

GitHub Actions / lint

'error' is defined but never used
notifierModule.show({
text: this.$t("pages.content.notification.lernstoreNotAvailable"),
status: "error",
allTasks.value = [];
allColumnBoards.value = [];
newValue.forEach((element: any) => {

Check warning on line 229 in src/components/molecules/CommonCartridgeExportModal.vue

GitHub Actions / lint

Unexpected any. Specify a different type
if (element.type === BoardElementResponseTypeEnum.Lesson) {
allTopics.value.push({
isSelected: true,