fix(cibg): datablock row separators + filled Bestand-upload button

- Datablock entries had no separators: CIBG ships the border on dt/dd with a
  :last-of-type reset, but the one-row-per-<div> grouping (for axe) made every
  dt/dd a last-of-type, stripping them all. Carry the separator on the row
  (:host:not(:last-of-type)) in the CIBG line colour (#f1f5f9 = cool-grey-200).
- Upload "Bestand toevoegen" button read as a pale outline: btn-outline-primary
  forced a transparent background over .btn-upload's accent fill. Use
  btn-primary btn-upload (solid #01689b, white text, folder glyph) and drop the
  redundant centred background-image folder.

GREEN: lint, tokens, 183 tests, build, 137 axe stories. Verified via Storybook
screenshots (datablock separators, filled blue upload button).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-03 08:46:06 +02:00
parent 05314afd98
commit 0f360c5939
3 changed files with 481 additions and 473 deletions

File diff suppressed because one or more lines are too long

View File

@@ -12,6 +12,10 @@ import { Component, input } from '@angular/core';
@Component({
selector: 'div[app-data-row]',
host: { class: 'row' },
// The CIBG datablock draws a separator between entries. It ships that border on
// dt/dd with a `:last-of-type` reset, but our one-row-per-<div> grouping (for axe)
// makes every dt/dd a last-of-type — so we carry the separator on the row instead.
styles: [`:host:not(:last-of-type){border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-cool-grey-200)}`],
template: `
<dt class="col-md-4">{{ key() }}</dt>
<dd class="col-md-8"><ng-content>{{ value() }}</ng-content></dd>

View File

@@ -26,7 +26,9 @@ const TYPE_LABELS: Record<string, string> = {
.file-picker-drop-area { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rhc-space-max-sm); }
/* Default (not subtle) foreground: subtle grey on the grey drop-area fails WCAG AA contrast. */
.upload-instructions { margin: 0; color: var(--rhc-color-foreground-default); font-size: var(--rhc-text-font-size-sm); }
.btn-upload { cursor: pointer; }
/* Solid CIBG-blue button; the .btn-upload ::before folder glyph is the icon, so
drop its redundant centred background-image folder. */
.btn-upload { cursor: pointer; background-image: none; }
.btn-upload.disabled { cursor: not-allowed; }
/* The input is visually hidden but still focusable; surface its focus on the button. */
input:focus-visible + .btn-upload { outline: var(--rhc-border-width-md) solid var(--rhc-color-foreground-link); outline-offset: 2px; }
@@ -48,7 +50,7 @@ const TYPE_LABELS: Record<string, string> = {
[multiple]="multiple()"
[disabled]="disabled()"
(change)="onChange($event)" />
<label class="btn btn-outline-primary btn-upload" [class.disabled]="disabled()" [attr.for]="inputId()">
<label class="btn btn-primary btn-upload" [class.disabled]="disabled()" [attr.for]="inputId()">
{{ buttonText() }}
</label>
</div>