fix(builder): WCAG 2.1 AA accessibility fixes
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>
This commit is contained in:
sdarbinyan
@@ -1,6 +1,6 @@
|
||||
<app-section-card>
|
||||
@if (fieldError('staticPages'); as msg) {
|
||||
<p class="editor-error">{{ msg }}</p>
|
||||
<p class="editor-error" role="alert">{{ msg }}</p>
|
||||
}
|
||||
|
||||
@if (editingPage(); as page) {
|
||||
|
||||
@@ -45,6 +45,9 @@
|
||||
class="html-editor-surface"
|
||||
[hidden]="showCode()"
|
||||
contenteditable="true"
|
||||
role="textbox"
|
||||
aria-multiline="true"
|
||||
[attr.aria-label]="'builder.htmlEditorCode' | translate"
|
||||
(input)="onInput()"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
.pi { font-size: var(--font-size-sm, 0.8125rem); }
|
||||
|
||||
&:hover { background: var(--bg-tertiary, #e8ecea); }
|
||||
&:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 1px; }
|
||||
&:focus-visible { outline: 2px solid var(--primary-color, #2f8f5b); outline-offset: 1px; }
|
||||
}
|
||||
|
||||
.html-editor-toolbar__btn--bold { font-weight: var(--font-weight-bold, 700); }
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<div class="project-editor-save-bar">
|
||||
@if (draftRestored()) {
|
||||
<div class="project-editor-save-bar-notice">
|
||||
<div class="project-editor-save-bar-notice" role="status">
|
||||
<span>{{ 'builder.draftRestored' | translate }}</span>
|
||||
<app-button variant="ghost" size="sm" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</app-button>
|
||||
</div>
|
||||
}
|
||||
<div class="project-editor-save-bar-status">
|
||||
<div class="project-editor-save-bar-status" role="status" aria-live="polite">
|
||||
<span>{{ (status() === 'published' ? 'builder.statusPublished' : 'builder.statusDraft') | translate }}</span>
|
||||
@if (dirty()) {
|
||||
<span class="project-editor-save-bar-dirty">{{ 'builder.unsavedChanges' | translate }}</span>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<div class="project-editor-layout" [class.project-editor-layout--drawer-open]="mobileDrawerOpen()">
|
||||
<a class="skip-link" href="#builder-main-content">{{ 'adminShell.skipToContent' | translate }}</a>
|
||||
@if (mobileDrawerOpen()) {
|
||||
<div class="project-editor-layout__backdrop" (click)="closeMobileDrawer()"></div>
|
||||
}
|
||||
@@ -15,7 +16,7 @@
|
||||
<app-project-editor-nav (linkClicked)="closeMobileDrawer()" />
|
||||
</aside>
|
||||
|
||||
<main class="project-editor-layout__content">
|
||||
<main id="builder-main-content" class="project-editor-layout__content" tabindex="-1">
|
||||
<header class="project-editor-layout__header">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<div class="full">
|
||||
<label><span>{{ 'builder.paymentIcons' | translate }}</span><small class="field-desc">{{ 'builder.paymentIconsDesc' | translate }}</small></label>
|
||||
@if (fieldError('footer.paymentIcons'); as msg) {
|
||||
<p class="editor-error">{{ msg }}</p>
|
||||
<p class="editor-error" role="alert">{{ msg }}</p>
|
||||
}
|
||||
<app-key-value-editor
|
||||
[rows]="paymentIconRows()"
|
||||
@@ -56,7 +56,7 @@
|
||||
<div class="full">
|
||||
<label><span>{{ 'builder.socialLinks' | translate }}</span><small class="field-desc">{{ 'builder.socialLinksDesc' | translate }}</small></label>
|
||||
@if (fieldError('footer.socialLinks'); as msg) {
|
||||
<p class="editor-error">{{ msg }}</p>
|
||||
<p class="editor-error" role="alert">{{ msg }}</p>
|
||||
}
|
||||
<app-key-value-editor
|
||||
[rows]="socialLinkRows()"
|
||||
@@ -86,16 +86,22 @@
|
||||
<label><span>{{ 'builder.footerColumns' | translate }}</span><small class="field-desc">{{ 'builder.footerColumnsDesc' | translate }}</small></label>
|
||||
|
||||
<div class="footer-columns" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropColumn($event)">
|
||||
@for (column of columns(); track column.id) {
|
||||
@for (column of columns(); track column.id; let firstColumn = $first; let lastColumn = $last) {
|
||||
<div class="footer-column" cdkDrag>
|
||||
<div class="footer-column__head" cdkDragHandle>
|
||||
<app-icon name="grip" [size]="16" class="footer-column__grip" />
|
||||
<app-input [ngModel]="column.title" (ngModelChange)="updateColumnTitle(column.id, $event)" [placeholder]="'builder.footerColumnTitlePlaceholder' | translate" />
|
||||
<button type="button" class="footer-column__reorder" [attr.aria-label]="'builder.widgetMoveUp' | translate" [disabled]="firstColumn" (click)="moveColumn(column.id, -1)">
|
||||
<app-icon name="arrowUp" [size]="14" />
|
||||
</button>
|
||||
<button type="button" class="footer-column__reorder" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="lastColumn" (click)="moveColumn(column.id, 1)">
|
||||
<app-icon name="arrowDown" [size]="14" />
|
||||
</button>
|
||||
<button type="button" class="footer-column__remove" (click)="removeColumn(column.id)" [attr.aria-label]="'builder.removeColumn' | translate">×</button>
|
||||
</div>
|
||||
|
||||
<div class="footer-column__links" cdkDropList [cdkDropListData]="column.links" (cdkDropListDropped)="dropLink(column.id, $event)">
|
||||
@for (link of column.links; track link.id) {
|
||||
@for (link of column.links; track link.id; let firstLink = $first; let lastLink = $last) {
|
||||
<div class="footer-link" cdkDrag>
|
||||
<app-icon name="grip" [size]="14" cdkDragHandle class="footer-link__grip" />
|
||||
<app-input [ngModel]="link.label" (ngModelChange)="updateLink(column.id, link.id, { label: $event })" [placeholder]="'builder.footerLinkLabelPlaceholder' | translate" />
|
||||
@@ -115,7 +121,15 @@
|
||||
<app-input type="url" [ngModel]="link.url" (ngModelChange)="updateLink(column.id, link.id, { url: $event })" placeholder="https://" />
|
||||
}
|
||||
|
||||
<button type="button" class="footer-link__remove" (click)="removeLink(column.id, link.id)" [attr.aria-label]="'builder.removeColumnLink' | translate">×</button>
|
||||
<div class="footer-link__actions">
|
||||
<button type="button" [attr.aria-label]="'builder.widgetMoveUp' | translate" [disabled]="firstLink" (click)="moveLink(column.id, link.id, -1)">
|
||||
<app-icon name="arrowUp" [size]="14" />
|
||||
</button>
|
||||
<button type="button" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="lastLink" (click)="moveLink(column.id, link.id, 1)">
|
||||
<app-icon name="arrowDown" [size]="14" />
|
||||
</button>
|
||||
<button type="button" class="footer-link__remove" (click)="removeLink(column.id, link.id)" [attr.aria-label]="'builder.removeColumnLink' | translate">×</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -47,6 +47,20 @@
|
||||
|
||||
.footer-column__grip { cursor: grab; color: var(--text-secondary, #6b7280); }
|
||||
|
||||
.footer-column__reorder {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary, #6b7280);
|
||||
|
||||
&:hover:not(:disabled) { color: var(--text-primary, #1e3c38); }
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-column__remove {
|
||||
border: none;
|
||||
background: transparent;
|
||||
@@ -83,8 +97,25 @@
|
||||
|
||||
.footer-link__grip { grid-area: grip; cursor: grab; color: var(--text-secondary, #6b7280); }
|
||||
.footer-link app-input:first-of-type { grid-area: label; }
|
||||
.footer-link__remove {
|
||||
.footer-link__actions {
|
||||
grid-area: remove;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary, #6b7280);
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-link__remove {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -127,6 +127,18 @@ export class ProjectEditorFooterSectionComponent {
|
||||
this.setColumns(columns);
|
||||
}
|
||||
|
||||
/** Keyboard-operable fallback for the drag-and-drop column reorder above (WCAG 2.1.1). */
|
||||
moveColumn(columnId: string, direction: -1 | 1): void {
|
||||
const columns = [...this.columns()];
|
||||
const index = columns.findIndex(column => column.id === columnId);
|
||||
const targetIndex = index + direction;
|
||||
if (index === -1 || targetIndex < 0 || targetIndex >= columns.length) {
|
||||
return;
|
||||
}
|
||||
moveItemInArray(columns, index, targetIndex);
|
||||
this.setColumns(columns);
|
||||
}
|
||||
|
||||
addLink(columnId: string): void {
|
||||
const link: FooterLinkConfig = { id: `link-${Date.now()}`, label: '', pageKey: this.availablePages()[0]?.id ?? '', url: '' };
|
||||
this.setColumns(this.columns().map(column => column.id === columnId ? { ...column, links: [...column.links, link] } : column));
|
||||
@@ -152,6 +164,22 @@ export class ProjectEditorFooterSectionComponent {
|
||||
this.setColumns(this.columns().map(c => c.id === columnId ? { ...c, links } : c));
|
||||
}
|
||||
|
||||
/** Keyboard-operable fallback for the drag-and-drop link reorder above (WCAG 2.1.1). */
|
||||
moveLink(columnId: string, linkId: string, direction: -1 | 1): void {
|
||||
const column = this.columns().find(c => c.id === columnId);
|
||||
if (!column) {
|
||||
return;
|
||||
}
|
||||
const links = [...column.links];
|
||||
const index = links.findIndex(link => link.id === linkId);
|
||||
const targetIndex = index + direction;
|
||||
if (index === -1 || targetIndex < 0 || targetIndex >= links.length) {
|
||||
return;
|
||||
}
|
||||
moveItemInArray(links, index, targetIndex);
|
||||
this.setColumns(this.columns().map(c => c.id === columnId ? { ...c, links } : c));
|
||||
}
|
||||
|
||||
linkSourceMode(link: FooterLinkConfig): 'page' | 'custom' {
|
||||
return link.pageKey ? 'page' : 'custom';
|
||||
}
|
||||
|
||||
@@ -6,12 +6,12 @@
|
||||
<app-homepage-overview />
|
||||
<app-section-card [title]="'builder.homepage' | translate">
|
||||
@if (fieldError('pages'); as msg) {
|
||||
<p class="editor-error">{{ msg }}</p>
|
||||
<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) {
|
||||
@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" />
|
||||
@@ -49,6 +49,12 @@
|
||||
</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>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-2xl, 1.25rem);
|
||||
color: var(--color-primary, #2f8f5b);
|
||||
color: var(--primary-color, #2f8f5b);
|
||||
}
|
||||
|
||||
.block-card__title-row { display: flex; align-items: center; gap: 8px; }
|
||||
@@ -58,7 +58,12 @@
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary, #6b7280);
|
||||
|
||||
&:hover { color: var(--text-primary, #1e3c38); }
|
||||
&:hover:not(:disabled) { color: var(--text-primary, #1e3c38); }
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,10 +91,10 @@
|
||||
font-size: var(--font-size-sm, 0.8125rem);
|
||||
color: var(--text-primary, #1e3c38);
|
||||
|
||||
.pi { font-size: var(--font-size-2xl, 1.25rem); color: var(--color-primary, #2f8f5b); }
|
||||
.pi { font-size: var(--font-size-2xl, 1.25rem); color: var(--primary-color, #2f8f5b); }
|
||||
|
||||
&:hover { border-color: var(--color-primary, #2f8f5b); background: #fff; }
|
||||
&:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
|
||||
&:hover { border-color: var(--primary-color, #2f8f5b); background: #fff; }
|
||||
&:focus-visible { outline: 2px solid var(--primary-color, #2f8f5b); outline-offset: 2px; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
@@ -93,6 +93,18 @@ export class ProjectEditorHomepageSectionComponent {
|
||||
this.replaceSections(sections.map((section, index) => ({ ...section, order: index + 1 })));
|
||||
}
|
||||
|
||||
/** Keyboard-operable fallback for the drag-and-drop block reorder above (WCAG 2.1.1). */
|
||||
moveBlock(sectionId: string, direction: -1 | 1): void {
|
||||
const sections = [...this.sections()];
|
||||
const index = sections.findIndex(section => section.id === sectionId);
|
||||
const targetIndex = index + direction;
|
||||
if (index === -1 || targetIndex < 0 || targetIndex >= sections.length) {
|
||||
return;
|
||||
}
|
||||
moveItemInArray(sections, index, targetIndex);
|
||||
this.replaceSections(sections.map((section, i) => ({ ...section, order: i + 1 })));
|
||||
}
|
||||
|
||||
updateSection(sectionId: string, field: 'visible' | 'type', value: unknown): void {
|
||||
this.replaceSections(this.sections().map(section => section.id !== sectionId ? section : ({
|
||||
...section,
|
||||
|
||||
@@ -2,19 +2,20 @@
|
||||
<app-locale-tabs [locales]="supportedLocales()" [defaultLocale]="tenantDefaultLocale()" (activeLocale)="onActiveLocaleChange($event)" />
|
||||
<small class="field-desc">{{ 'builder.languagesTabDesc' | translate }}</small>
|
||||
@if (fieldError('localization.supportedLocales'); as msg) {
|
||||
<p class="editor-error">{{ msg }}</p>
|
||||
<p class="editor-error" role="alert">{{ msg }}</p>
|
||||
}
|
||||
|
||||
<div class="editor-actions">
|
||||
<app-input
|
||||
[ngModel]="newLocale()"
|
||||
(ngModelChange)="updateNewLocale($event)"
|
||||
[ariaLabel]="'builder.newLanguageLabel' | translate"
|
||||
placeholder="de"
|
||||
/>
|
||||
<app-button variant="primary" (click)="addLocale()">{{ 'builder.addLanguage' | translate }}</app-button>
|
||||
</div>
|
||||
@if (addLocaleError(); as addError) {
|
||||
<p class="editor-error">{{ addError }}</p>
|
||||
<p class="editor-error" role="alert">{{ addError }}</p>
|
||||
} @else {
|
||||
<small class="field-desc">{{ 'builder.newLanguageDesc' | translate }}</small>
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<app-section-card [title]="'builder.navigationHeader' | translate">
|
||||
<app-locale-tabs [locales]="supportedLocales()" [defaultLocale]="defaultLocale()" (activeLocale)="onActiveLocaleChange($event)" />
|
||||
@if (fieldError('navigation.header'); as msg) {
|
||||
<p class="editor-error">{{ msg }}</p>
|
||||
<p class="editor-error" role="alert">{{ msg }}</p>
|
||||
}
|
||||
|
||||
<div class="editor-actions">
|
||||
@@ -68,6 +68,6 @@
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<p class="editor-error">{{ 'builder.navigationFooterGrouped' | translate }}</p>
|
||||
<p class="editor-error" role="alert">{{ 'builder.navigationFooterGrouped' | translate }}</p>
|
||||
}
|
||||
</app-section-card>
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
<table class="preview-changes">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ 'builder.previewChangeField' | translate }}</th>
|
||||
<th>{{ 'builder.previewChangeBefore' | translate }}</th>
|
||||
<th>{{ 'builder.previewChangeAfter' | translate }}</th>
|
||||
<th scope="col">{{ 'builder.previewChangeField' | translate }}</th>
|
||||
<th scope="col">{{ 'builder.previewChangeBefore' | translate }}</th>
|
||||
<th scope="col">{{ 'builder.previewChangeAfter' | translate }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -40,7 +40,7 @@
|
||||
<app-button variant="secondary" (click)="importDraft()">{{ 'builder.importBootstrap' | translate }}</app-button>
|
||||
</div>
|
||||
@if (importError()) {
|
||||
<p class="editor-error">{{ importError()! | translate }}</p>
|
||||
<p class="editor-error" role="alert">{{ importError()! | translate }}</p>
|
||||
}
|
||||
<label>
|
||||
<span>{{ 'builder.exportedBootstrap' | translate }}</span>
|
||||
|
||||
@@ -238,6 +238,6 @@ button.secondary {
|
||||
font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-semibold, 600);
|
||||
em { font-style: normal; font-weight: var(--font-weight-normal, 400); font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #6b7280); }
|
||||
}
|
||||
.languages-summary__chip--default { border-color: var(--color-primary, #2f8f5b); }
|
||||
.languages-summary__chip--default { border-color: var(--primary-color, #2f8f5b); }
|
||||
.languages-summary__manage { font-size: var(--font-size-sm, 0.8125rem); text-decoration: underline; color: var(--text-primary, #1e3c38); }
|
||||
.languages-summary__manage:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
|
||||
.languages-summary__manage:focus-visible { outline: 2px solid var(--primary-color, #2f8f5b); outline-offset: 2px; }
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
@if (bootstrap(); as bootstrap) {
|
||||
<app-section-card [title]="'builder.theme' | translate">
|
||||
<div class="editor-grid two">
|
||||
<app-form-field [label]="'builder.primaryColor' | translate" [hint]="'builder.primaryColorDesc' | translate" [error]="fieldError('theme.palette.primary')"><app-color-picker [ngModel]="bootstrap.theme.palette.primary" (ngModelChange)="updatePalette('primary', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.secondaryColor' | translate" [hint]="'builder.secondaryColorDesc' | translate" [error]="fieldError('theme.palette.secondary')"><app-color-picker [ngModel]="bootstrap.theme.palette.secondary" (ngModelChange)="updatePalette('secondary', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.backgroundColor' | translate" [hint]="'builder.backgroundColorDesc' | translate" [error]="fieldError('theme.palette.backgroundPrimary')"><app-color-picker [ngModel]="bootstrap.theme.palette.backgroundPrimary" (ngModelChange)="updatePalette('backgroundPrimary', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.surfaceColor' | translate" [hint]="'builder.surfaceColorDesc' | translate" [error]="fieldError('theme.palette.backgroundSecondary')"><app-color-picker [ngModel]="bootstrap.theme.palette.backgroundSecondary" (ngModelChange)="updatePalette('backgroundSecondary', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.textColor' | translate" [hint]="'builder.textColorDesc' | translate" [error]="fieldError('theme.palette.textPrimary')"><app-color-picker [ngModel]="bootstrap.theme.palette.textPrimary" (ngModelChange)="updatePalette('textPrimary', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.successColor' | translate" [hint]="'builder.successColorDesc' | translate" [error]="fieldError('theme.palette.success')"><app-color-picker [ngModel]="bootstrap.theme.palette.success" (ngModelChange)="updatePalette('success', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.warningColor' | translate" [hint]="'builder.warningColorDesc' | translate" [error]="fieldError('theme.palette.warning')"><app-color-picker [ngModel]="bootstrap.theme.palette.warning" (ngModelChange)="updatePalette('warning', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.dangerColor' | translate" [hint]="'builder.dangerColorDesc' | translate" [error]="fieldError('theme.palette.danger')"><app-color-picker [ngModel]="bootstrap.theme.palette.danger" (ngModelChange)="updatePalette('danger', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.primaryColor' | translate" [hint]="'builder.primaryColorDesc' | translate" [error]="fieldError('theme.palette.primary')"><app-color-picker [ariaLabel]="'builder.primaryColor' | translate" [ngModel]="bootstrap.theme.palette.primary" (ngModelChange)="updatePalette('primary', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.secondaryColor' | translate" [hint]="'builder.secondaryColorDesc' | translate" [error]="fieldError('theme.palette.secondary')"><app-color-picker [ariaLabel]="'builder.secondaryColor' | translate" [ngModel]="bootstrap.theme.palette.secondary" (ngModelChange)="updatePalette('secondary', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.backgroundColor' | translate" [hint]="'builder.backgroundColorDesc' | translate" [error]="fieldError('theme.palette.backgroundPrimary')"><app-color-picker [ariaLabel]="'builder.backgroundColor' | translate" [ngModel]="bootstrap.theme.palette.backgroundPrimary" (ngModelChange)="updatePalette('backgroundPrimary', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.surfaceColor' | translate" [hint]="'builder.surfaceColorDesc' | translate" [error]="fieldError('theme.palette.backgroundSecondary')"><app-color-picker [ariaLabel]="'builder.surfaceColor' | translate" [ngModel]="bootstrap.theme.palette.backgroundSecondary" (ngModelChange)="updatePalette('backgroundSecondary', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.textColor' | translate" [hint]="'builder.textColorDesc' | translate" [error]="fieldError('theme.palette.textPrimary')"><app-color-picker [ariaLabel]="'builder.textColor' | translate" [ngModel]="bootstrap.theme.palette.textPrimary" (ngModelChange)="updatePalette('textPrimary', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.successColor' | translate" [hint]="'builder.successColorDesc' | translate" [error]="fieldError('theme.palette.success')"><app-color-picker [ariaLabel]="'builder.successColor' | translate" [ngModel]="bootstrap.theme.palette.success" (ngModelChange)="updatePalette('success', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.warningColor' | translate" [hint]="'builder.warningColorDesc' | translate" [error]="fieldError('theme.palette.warning')"><app-color-picker [ariaLabel]="'builder.warningColor' | translate" [ngModel]="bootstrap.theme.palette.warning" (ngModelChange)="updatePalette('warning', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.dangerColor' | translate" [hint]="'builder.dangerColorDesc' | translate" [error]="fieldError('theme.palette.danger')"><app-color-picker [ariaLabel]="'builder.dangerColor' | translate" [ngModel]="bootstrap.theme.palette.danger" (ngModelChange)="updatePalette('danger', $event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.themeModeLabel' | translate" [hint]="'builder.themeModeDesc' | translate">
|
||||
<app-select [options]="themeModeSelectOptions()" [ngModel]="bootstrap.theme.mode" (ngModelChange)="updateThemeMode($event)" />
|
||||
</app-form-field>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
} @else {
|
||||
<app-section-card [title]="'builder.widgets' | translate">
|
||||
@if (fieldError('pages'); as msg) {
|
||||
<p class="editor-error">{{ msg }}</p>
|
||||
<p class="editor-error" role="alert">{{ msg }}</p>
|
||||
}
|
||||
<div class="stack-list widget-list">
|
||||
@for (entry of widgets(); track entry.widget.id; let first = $first; let last = $last) {
|
||||
@@ -98,7 +98,7 @@
|
||||
<small class="field-desc">{{ 'builder.widgetJsonDesc' | translate }}</small>
|
||||
<textarea rows="8" [ngModel]="widgetJsonValue(entry.widget.id, entry.widget.props)" (ngModelChange)="updateJson(entry.widget.id, $event)"></textarea>
|
||||
@if (widgetJsonError(entry.widget.id); as jsonError) {
|
||||
<p class="editor-error">{{ jsonError }}</p>
|
||||
<p class="editor-error" role="alert">{{ jsonError }}</p>
|
||||
}
|
||||
</label>
|
||||
</details>
|
||||
|
||||
Reference in New Issue
Block a user