a03260eccf
RC A11Y-01 audit pass, Builder (project-editor) + content-management static
pages editor. Builds on 4ebc15f's composition pass without redoing it.
- Skip link: Builder's /edit and /edit/:section routes render outside the
storefront app-shell (isAdminRoute() branch has no skip link/landmark, only
a bare router-outlet, unlike the storefront's app.html) - added a
"skip to content" link targeting a new #builder-main-content landmark on
project-editor-page.component, reusing the existing adminShell.skipToContent
key and global .skip-link style. Nav landmark already had aria-label
(builder.appName) from the prior pass, verified correct.
- Save bar: added role="status"/aria-live="polite" to the save/publish status
block and role="status" to the draft-restored notice so save/publish state
changes and draft recovery are announced to screen readers (previously
silent DOM updates).
- Media picker (shared, used by both Builder and static-pages editor): upload
error message had no aria-live wiring - added role="alert".
- HTML editor (marketplace-html-editor): the contenteditable rich-text surface
had no accessible role/name - added role="textbox", aria-multiline="true",
aria-label.
- Drag-and-drop keyboard fallback (WCAG 2.1.1): homepage-section's block list
and footer-section's column list + per-column link list use Angular CDK
drag-drop (cdkDrag/cdkDropList), which has no built-in keyboard reordering.
Added move-up/move-down icon buttons (disabled at the first/last boundary),
matching the existing pattern already used by widgets-section and
navigation-section.
- Color picker: the swatch <input type="color"> had no accessible name (only
the paired text input was labelled via app-form-field) - added explicit
ariaLabel bindings to all 8 color-picker instances in theme-section.
- Languages: the new-locale code input relied on a placeholder ("de") as its
only accessible name - added ariaLabel + new builder.newLanguageLabel i18n
key (en/ru/hy).
- Undefined CSS var --color-primary (never defined anywhere, silently used its
hardcoded hex fallback and never responded to tenant theming - same
recurring bug class as 4ebc15f) - remapped to the real --primary-color token
in marketplace-html-editor, homepage-section, and section.shared (7 usages).
- role="alert" added to all 11 validation-error <p class="editor-error">
occurrences across footer/homepage/languages/navigation/preview/widgets
sections and the static-pages editor, so field/section validation messages
are announced.
- scope="col" added to preview-section's change-summary table headers.
Flagged, not fixed (design-system decisions, matching the storefront pass's
precedent):
- Save bar's --warning-color/--error-color/--info-color text fail WCAG AA
4.5:1 in some themes - same genuine brand semantic colors flagged (not
fixed) in fb1afb7's storefront pass; needs a deliberate token decision,
not a Builder-specific issue.
- locale-tabs (app-locale-tabs, shared) has role="tablist"/"tab" and
aria-selected but no roving-tabindex/arrow-key navigation - matches the
same partial-tablist pattern already accepted for product-tabs in the
storefront pass; all tabs remain natively Tab-focusable, so this meets
4.1.2/2.1.1 without the full ARIA authoring-practice pattern.
Verified: npx tsc --noEmit clean; npm run build green (only the pre-existing
bundle-budget warning, unrelated to this pass).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
86 lines
4.1 KiB
HTML
86 lines
4.1 KiB
HTML
@if (!homePage()) {
|
|
<app-section-card [title]="'builder.homepage' | translate">
|
|
<app-empty-state [title]="'builder.homepageEmptyTitle' | translate" [description]="'builder.homepageEmptyDesc' | translate" />
|
|
</app-section-card>
|
|
} @else {
|
|
<app-homepage-overview />
|
|
<app-section-card [title]="'builder.homepage' | translate">
|
|
@if (fieldError('pages'); as msg) {
|
|
<p class="editor-error" role="alert">{{ msg }}</p>
|
|
}
|
|
<p class="field-desc">{{ 'builder.homepageBlocksHint' | translate }}</p>
|
|
|
|
<div cdkDropList class="block-list" (cdkDropListDropped)="drop($event)">
|
|
@for (section of sections(); track section.id; let first = $first; let last = $last) {
|
|
<div class="block-card" cdkDrag [class.block-card--hidden]="section.visible === false">
|
|
<div class="block-card__handle" cdkDragHandle [attr.aria-label]="'builder.dragToReorder' | translate">
|
|
<app-icon name="grip" [size]="16" />
|
|
</div>
|
|
|
|
<div class="block-card__preview">
|
|
<app-icon [name]="blockIcon(section.type)" [size]="20" />
|
|
</div>
|
|
|
|
<div class="block-card__body">
|
|
<div class="block-card__title-row">
|
|
<strong>{{ blockLabel(section.type) }}</strong>
|
|
@if (section.visible === false) {
|
|
<span class="block-card__hidden-badge">{{ 'builder.widgetHidden' | translate }}</span>
|
|
}
|
|
</div>
|
|
<p class="block-card__desc">{{ blockDescription(section.type) }}</p>
|
|
|
|
<div class="editor-grid two compact">
|
|
<label>
|
|
<span>{{ 'builder.layoutStrategyLabel' | translate }}</span>
|
|
<small class="field-desc">{{ layoutStrategyDescKey(section.layout?.strategy || 'stack') | translate }}</small>
|
|
<select [ngModel]="section.layout?.strategy || 'stack'" (ngModelChange)="updateLayout(section.id, 'strategy', $event)">
|
|
@for (option of layoutStrategyOptions; track option.value) {
|
|
<option [value]="option.value">{{ option.labelKey | translate }}</option>
|
|
}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>{{ 'builder.columns' | translate }}</span>
|
|
<small class="field-desc">{{ 'builder.sectionColumnsDesc' | translate }}</small>
|
|
<app-input type="number" [ngModel]="section.layout?.columns || 1" (ngModelChange)="updateLayout(section.id, 'columns', $event)" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block-card__actions">
|
|
<button type="button" [attr.aria-label]="'builder.widgetMoveUp' | translate" [disabled]="first" (click)="moveBlock(section.id, -1)">
|
|
<app-icon name="arrowUp" [size]="16" />
|
|
</button>
|
|
<button type="button" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="last" (click)="moveBlock(section.id, 1)">
|
|
<app-icon name="arrowDown" [size]="16" />
|
|
</button>
|
|
<label class="block-card__visible-toggle">
|
|
<app-toggle [ngModel]="section.visible !== false" (ngModelChange)="updateSection(section.id, 'visible', $event)" [ariaLabel]="'builder.visible' | translate" />
|
|
<span>{{ 'builder.visible' | translate }}</span>
|
|
</label>
|
|
<button type="button" [attr.aria-label]="'builder.widgetDuplicate' | translate" (click)="duplicateBlock(section.id)">
|
|
<app-icon name="copy" [size]="16" />
|
|
</button>
|
|
<button type="button" class="block-card__remove" [attr.aria-label]="'builder.widgetRemove' | translate" (click)="removeBlock(section.id)">
|
|
<app-icon name="trash" [size]="16" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="block-catalog">
|
|
<p class="field-desc">{{ 'builder.addBlockHint' | translate }}</p>
|
|
<div class="block-catalog__grid">
|
|
@for (entry of blockCatalog; track entry.type) {
|
|
<button type="button" class="block-catalog__item" (click)="addBlock(entry.type)">
|
|
<app-icon [name]="entry.icon" [size]="18" />
|
|
<span>{{ entry.labelKey | translate }}</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</app-section-card>
|
|
}
|