Upload feature (f): demo scenarios (upload-slow/fail) + a11y (file-input label)
- upload-slow/upload-fail scenarios simulated in the adapter (XHR POST bypasses the HTTP interceptor); categories/status/delete already honour the global slow/error - file-input gets a per-category accessible name (aria-label + visible button text) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
import { Component, computed, input, output } from '@angular/core';
|
||||
import type { DeliveryChannel, DocumentCategory, Upload } from '@shared/upload/upload.machine';
|
||||
import { DeliveryChannelToggleComponent } from '../delivery-channel-toggle/delivery-channel-toggle.component';
|
||||
import { FileInputComponent } from '../file-input/file-input.component';
|
||||
@@ -42,6 +42,7 @@ import { SingleUploadComponent } from '../single-upload/single-upload.component'
|
||||
@if (channel() === 'digital') {
|
||||
<app-file-input
|
||||
[inputId]="category().categoryId + '-file'"
|
||||
[label]="fileInputLabel()"
|
||||
[accept]="category().acceptedTypes"
|
||||
[multiple]="category().multiple"
|
||||
(filesSelected)="fileSelected.emit($event)" />
|
||||
@@ -67,6 +68,9 @@ export class DocumentCategoryComponent {
|
||||
channel = input.required<DeliveryChannel>();
|
||||
rejection = input<string>();
|
||||
|
||||
/** Accessible name for the file picker, e.g. "Bestand kiezen voor Diploma". */
|
||||
protected fileInputLabel = computed(() => $localize`:@@upload.fileInput.labelFor:Bestand kiezen voor ${this.category().label}:category:`);
|
||||
|
||||
fileSelected = output<File[]>();
|
||||
removeUpload = output<string>();
|
||||
retryUpload = output<string>();
|
||||
|
||||
@@ -30,6 +30,7 @@ import { Component, ElementRef, input, output, viewChild } from '@angular/core';
|
||||
#fileInput
|
||||
type="file"
|
||||
[id]="inputId()"
|
||||
[attr.aria-label]="label()"
|
||||
[accept]="accept().join(',')"
|
||||
[multiple]="multiple()"
|
||||
[disabled]="disabled()"
|
||||
@@ -38,7 +39,7 @@ import { Component, ElementRef, input, output, viewChild } from '@angular/core';
|
||||
class="utrecht-button rhc-button utrecht-button--secondary-action label"
|
||||
[class.utrecht-button--disabled]="disabled()">
|
||||
<span aria-hidden="true">↑</span>
|
||||
<span i18n="@@upload.fileInput.label">Bestand kiezen</span>
|
||||
<span>{{ label() }}</span>
|
||||
</span>
|
||||
</span>
|
||||
`,
|
||||
@@ -48,6 +49,8 @@ export class FileInputComponent {
|
||||
multiple = input(false);
|
||||
disabled = input(false);
|
||||
inputId = input.required<string>();
|
||||
/** Accessible name + button text; the domain caller supplies a per-category label. */
|
||||
label = input($localize`:@@upload.fileInput.label:Bestand kiezen`);
|
||||
|
||||
filesSelected = output<File[]>();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user