Skip to content

fix(a11y): label 19 form fields, scope 19 tables, honour reduced motion, delete an unreachable settings dialog #469

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.

Sign up for GitHub

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

Merged
rubenvdlinde merged 1 commit into from
Aug 9, 2026
Merged

fix(a11y): label 19 form fields, scope 19 tables, honour reduced motion, delete an unreachable settings dialog #469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 8 additions & 0 deletions src/components/CollapsibleSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@
methods: {
/**
* Toggle section expanded state
* @spec openspec/specs/fe-shell-navigation/spec.md

Check warning on line 282 in src/components/CollapsibleSection.vue

View workflow job for this annotation

GitHub Actions / quality / Vue Quality (eslint) 

Expected JSDoc block to be aligned
*/
toggleExpanded() {
this.isExpanded = !this.isExpanded
Expand All @@ -287,7 +287,7 @@

/**
* Handle save button click
* @spec openspec/specs/fe-shell-navigation/spec.md

Check warning on line 290 in src/components/CollapsibleSection.vue

View workflow job for this annotation

GitHub Actions / quality / Vue Quality (eslint) 

Expected JSDoc block to be aligned
*/
handleSave() {
this.$emit('save')
Expand All @@ -295,7 +295,7 @@

/**
* Handle refresh button click
* @spec openspec/specs/fe-shell-navigation/spec.md

Check warning on line 298 in src/components/CollapsibleSection.vue

View workflow job for this annotation

GitHub Actions / quality / Vue Quality (eslint) 

Expected JSDoc block to be aligned
*/
handleRefresh() {
this.$emit('refresh')
Expand Down Expand Up @@ -432,4 +432,12 @@
padding-top: 16px;
border-top: 1px solid var(--color-border);
}

/* WCAG 2.3.3 — the expand animation is decorative; a reduced-motion user gets
the expanded section immediately instead of the slide. */
@media (prefers-reduced-motion: reduce) {
.section-content {
animation: none;
}
}
</style>
18 changes: 13 additions & 5 deletions src/components/ContactpersonenList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@
<table class="compact-table">
<thead>
<tr>
<th>{{ t("softwarecatalog", "Name") }}</th>
<th>{{ t("softwarecatalog", "Email") }}</th>
<th>{{ t("softwarecatalog", "Status") }}</th>
<th>{{ t("softwarecatalog", "Groups") }}</th>
<th>{{ t("softwarecatalog", "Actions") }}</th>
<th scope="col">{{ t("softwarecatalog", "Name") }}</th>

Check warning on line 30 in src/components/ContactpersonenList.vue

View workflow job for this annotation

GitHub Actions / quality / Vue Quality (eslint) 

Expected 1 line break before closing tag (`</th>`), but no line breaks found

Check warning on line 30 in src/components/ContactpersonenList.vue

View workflow job for this annotation

GitHub Actions / quality / Vue Quality (eslint) 

Expected 1 line break after opening tag (`<th>`), but no line breaks found
<th scope="col">{{ t("softwarecatalog", "Email") }}</th>

Check warning on line 31 in src/components/ContactpersonenList.vue

View workflow job for this annotation

GitHub Actions / quality / Vue Quality (eslint) 

Expected 1 line break before closing tag (`</th>`), but no line breaks found

Check warning on line 31 in src/components/ContactpersonenList.vue

View workflow job for this annotation

GitHub Actions / quality / Vue Quality (eslint) 

Expected 1 line break after opening tag (`<th>`), but no line breaks found
<th scope="col">{{ t("softwarecatalog", "Status") }}</th>

Check warning on line 32 in src/components/ContactpersonenList.vue

View workflow job for this annotation

GitHub Actions / quality / Vue Quality (eslint) 

Expected 1 line break after opening tag (`<th>`), but no line breaks found
<th scope="col">{{ t("softwarecatalog", "Groups") }}</th>
<th scope="col">{{ t("softwarecatalog", "Actions") }}</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -1552,4 +1552,12 @@
.loading-icon {
color: var(--color-text-lighter);
}

/* WCAG 2.3.3 — the password-requirement colour transition is decorative; the
met/unmet colour still changes, it just changes instantly. */
@media (prefers-reduced-motion: reduce) {
.requirements-list li {
transition: none;
}
}
</style>
9 changes: 9 additions & 0 deletions src/components/SelectedObjectsList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,4 +250,13 @@ export default {
right: 0;
left: 0;
}

/* WCAG 2.3.3 — the item hover transition and the list leave animation are
decorative; a reduced-motion user gets the end state directly. */
@media (prefers-reduced-motion: reduce) {
.selected-object-item,
.list-leave-active {
transition: none;
}
}
</style>
9 changes: 9 additions & 0 deletions src/components/StandardTabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,4 +167,13 @@ export default {
}
.tab-content { border-top: 1px solid var(--color-border); }
}

/* WCAG 2.3.3 — honour a reduced-motion preference for the tab hover/active
transition. Scoped to the selector that declares motion; everything else
keeps its appearance. */
@media (prefers-reduced-motion: reduce) {
.tab-button {
transition: none;
}
}
</style>
7 changes: 7 additions & 0 deletions src/components/cards/OrganisatieCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -530,4 +530,11 @@ export default {
color: var(--color-main-text);
}

/* WCAG 2.3.3 — the card's hover shadow transition is decorative; the shadow
still appears, it just appears instantly. */
@media (prefers-reduced-motion: reduce) {
.organisatieCard {
transition: none;
}
}
</style>
6 changes: 3 additions & 3 deletions src/components/vulnerabilities/VulnerabilityExposurePanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@
<table v-else class="ep-table" data-testid="exposure-table">
<thead>
<tr>
<th>{{ t('softwarecatalog', 'Application') }}</th>
<th>{{ t('softwarecatalog', 'Organisation') }}</th>
<th>{{ t('softwarecatalog', 'Deployed version') }}</th>
<th scope="col">{{ t('softwarecatalog', 'Application') }}</th>
<th scope="col">{{ t('softwarecatalog', 'Organisation') }}</th>
<th scope="col">{{ t('softwarecatalog', 'Deployed version') }}</th>
</tr>
</thead>
<tbody>
Expand Down
10 changes: 5 additions & 5 deletions src/modals/BulkSyncDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@
<table class="modules-table">
<thead>
<tr>
<th>Module Name</th>
<th>Status</th>
<th>Reason</th>
<th>Compliance Count</th>
<th>Standards Count</th>
<th scope="col">Module Name</th>
<th scope="col">Status</th>
<th scope="col">Reason</th>
<th scope="col">Compliance Count</th>
<th scope="col">Standards Count</th>
</tr>
</thead>
<tbody>
Expand Down
36 changes: 23 additions & 13 deletions src/modals/object/MergeObject.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,10 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<table class="merge-table">
<thead>
<tr>
<th>Property</th>
<th>Source</th>
<th>Target</th>
<th>Result Value</th>
<th scope="col">Property</th>
<th scope="col">Source</th>
<th scope="col">Target</th>
<th scope="col">Result Value</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -125,6 +125,8 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<NcTextField
v-if="mergedData[property] === 'custom'"
v-model="customValues[property]"
:label="'Custom value for ' + property"
:label-outside="false"
:placeholder="'Enter custom value for ' + property"
class="custom-input" />
</template>
Expand Down Expand Up @@ -169,9 +171,9 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<table class="file-table">
<thead>
<tr>
<th>Filename</th>
<th>Size</th>
<th>Type</th>
<th scope="col">Filename</th>
<th scope="col">Size</th>
<th scope="col">Type</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -226,9 +228,9 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<table class="relation-table">
<thead>
<tr>
<th>Related Object</th>
<th>Relation Type</th>
<th>Register/Schema</th>
<th scope="col">Related Object</th>
<th scope="col">Relation Type</th>
<th scope="col">Register/Schema</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -305,9 +307,9 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<table class="report-table">
<thead>
<tr>
<th>Property</th>
<th>Old Value</th>
<th>New Value</th>
<th scope="col">Property</th>
<th scope="col">Old Value</th>
<th scope="col">New Value</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -1194,4 +1196,12 @@ export default {
.codeMirrorContainer.dark :deep(.cm-line .ͼd)::selection {
color: #623907;
}

/* WCAG 2.3.3 — the selectable-row hover transition is decorative; the
highlight still appears, it just appears instantly. */
@media (prefers-reduced-motion: reduce) {
.object-item {
transition: none;
}
}
</style>
3 changes: 3 additions & 0 deletions src/modals/object/ObjectModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<span class="detail-label">Catalogus:</span>
<NcButton v-if="selectedCatalogus"
class="pencil-button"
aria-label="Change catalogue"
@click="() => {
selectedCatalogus = null;
selectedRegister = null;
Expand All @@ -48,6 +49,7 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<span class="detail-label">Register:</span>
<NcButton v-if="selectedRegister"
class="pencil-button"
aria-label="Change register"
@click="() => {
selectedRegister = null;
selectedSchema = null
Expand All @@ -71,6 +73,7 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<span class="detail-label">Schema:</span>
<NcButton v-if="selectedSchema"
class="pencil-button"
aria-label="Change schema"
@click="() => {
selectedSchema = null
}">
Expand Down
50 changes: 36 additions & 14 deletions src/modals/object/ViewObject.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,13 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<table class="viewTable">
<thead>
<tr class="viewTableRow">
<th class="tableColumnConstrained">
<th scope="col" class="tableColumnConstrained">
Property
</th>
<th class="tableColumnExpanded">
<th scope="col" class="tableColumnExpanded">
Value
</th>
<th class="tableColumnActions actions-header-cell">
<th scope="col" class="tableColumnActions actions-header-cell">
<!-- Show/Hide Constant & Immutable Properties Toggle -->
<NcButton v-if="hasConstantOrImmutableProperties"
v-tooltip="showConstantProperties ? 'Hide constant & immutable properties' : 'Show constant & immutable properties'"
Expand Down Expand Up @@ -197,6 +197,7 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<div v-else-if="getPropertyInputComponent(key) === 'NcTextFieldArray'" class="input-with-icon">
<NcTextField
ref="propertyValueInput"
:aria-label="getPropertyDisplayName(key)"
:model-value="String(formData[key] !== undefined ? (Array.isArray(formData[key]) ? formData[key].join(',') : formData[key]) : (Array.isArray(value) ? value.join(',') : value || ''))"
:type="getPropertyInputType(key)"
:placeholder="getPropertyDisplayName(key)"
Expand All @@ -214,6 +215,7 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<NcTextField
v-else
ref="propertyValueInput"
:aria-label="getPropertyDisplayName(key)"
:model-value="String(formData[key] !== undefined ? formData[key] : value || '')"
:type="getPropertyInputType(key)"
:placeholder="getPropertyDisplayName(key)"
Expand Down Expand Up @@ -308,13 +310,13 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<table class="viewTable">
<thead>
<tr class="viewTableRow">
<th class="tableColumnConstrained">
<th scope="col" class="tableColumnConstrained">
Property
</th>
<th class="tableColumnExpanded">
<th scope="col" class="tableColumnExpanded">
Value
</th>
<th class="tableColumnActions actions-header-cell">
<th scope="col" class="tableColumnActions actions-header-cell">
<!-- Show/Hide Constant & Immutable Properties Toggle -->
<NcButton v-if="hasConstantOrImmutableProperties"
v-tooltip="showConstantProperties ? 'Hide constant & immutable properties' : 'Show constant & immutable properties'"
Expand Down Expand Up @@ -423,6 +425,7 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<div v-else-if="getPropertyInputComponent(key) === 'NcTextFieldArray'" class="input-with-icon">
<NcTextField
ref="propertyValueInput"
:aria-label="getPropertyDisplayName(key)"
:model-value="String(formData[key] !== undefined ? (Array.isArray(formData[key]) ? formData[key].join(',') : formData[key]) : (Array.isArray(value) ? value.join(',') : value || ''))"
:type="getPropertyInputType(key)"
:placeholder="getPropertyDisplayName(key)"
Expand All @@ -440,6 +443,7 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<NcTextField
v-else
ref="propertyValueInput"
:aria-label="getPropertyDisplayName(key)"
:model-value="String(formData[key] !== undefined ? formData[key] : value || '')"
:type="getPropertyInputType(key)"
:placeholder="getPropertyDisplayName(key)"
Expand Down Expand Up @@ -507,10 +511,10 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<table class="viewTable">
<thead>
<tr class="viewTableRow">
<th class="tableColumnConstrained">
<th scope="col" class="tableColumnConstrained">
Metadata
</th>
<th class="tableColumnExpanded">
<th scope="col" class="tableColumnExpanded">
Value
</th>
</tr>
Expand Down Expand Up @@ -588,25 +592,28 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<table class="viewTable">
<thead>
<tr class="viewTableRow">
<th class="tableColumnCheckbox">
<th scope="col" class="tableColumnCheckbox">
<NcCheckboxRadioSwitch
:model-value="allFilesSelected"
:indeterminate="someFilesSelected"
aria-label="Select all attachments"
@update:model-value="toggleSelectAllFiles" />
</th>
<th class="tableColumnExpanded table-row-title">
<th scope="col" class="tableColumnExpanded table-row-title">
Name
</th>
<th class="tableColumnConstrained short-column">
<th scope="col" class="tableColumnConstrained short-column">
Size
</th>
<th class="tableColumnConstrained table-row-type">
<th scope="col" class="tableColumnConstrained table-row-type">
Type
</th>
<th :class="`tableColumnConstrained ${editingTags ? 'table-row-labels' : 'short-column'}`">
<th scope="col" :class="`tableColumnConstrained ${editingTags ? 'table-row-labels' : 'short-column'}`">
Labels
</th>
<th class="table-row-actions" />
<th scope="col" class="table-row-actions">
<span class="hidden-visually">Actions</span>
</th>
</tr>
</thead>
<tbody>
Expand All @@ -621,6 +628,7 @@ import { objectStore, navigationStore, catalogStore } from '../../store/store.js
<td class="tableColumnCheckbox">
<NcCheckboxRadioSwitch
:model-value="selectedAttachments.includes(attachment.id)"
:aria-label="`Select ${attachment.title || attachment.name || 'attachment'}`"
@update:model-value="(checked) => toggleFileSelection(attachment.id, checked)" />
</td>
<td class="tableColumnExpanded table-row-title">
Expand Down Expand Up @@ -4376,4 +4384,18 @@ export default {
.viewObjectDialog .viewTable td.table-row-title {
width: 100%;
}

/* WCAG 2.3.3 — row hover, the drop-property button and the tab strip all
animate purely for polish. `!important` mirrors the declaration it has to
override on .drop-property-btn. */
@media (prefers-reduced-motion: reduce) {
.viewTableRow,
.tab-button {
transition: none;
}

.drop-property-btn {
transition: none !important;
}
}
</style>
Loading
Loading