From a03260eccfc50809caa9ac21f958a5d85f894835 Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Fri, 24 Jul 2026 09:01:38 +0400 Subject: [PATCH] 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 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

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 --- .../static-pages-editor.component.html | 2 +- .../marketplace-html-editor.component.html | 3 ++ .../marketplace-html-editor.component.scss | 2 +- .../project-editor-save-bar.component.html | 4 +-- .../pages/project-editor-page.component.html | 3 +- .../sections/footer-section.component.html | 24 +++++++++++--- .../sections/footer-section.component.scss | 33 ++++++++++++++++++- .../sections/footer-section.component.ts | 28 ++++++++++++++++ .../sections/homepage-section.component.html | 10 ++++-- .../sections/homepage-section.component.scss | 15 ++++++--- .../sections/homepage-section.component.ts | 12 +++++++ .../sections/languages-section.component.html | 5 +-- .../navigation-section.component.html | 4 +-- .../sections/preview-section.component.html | 8 ++--- .../sections/section.shared.scss | 4 +-- .../sections/theme-section.component.html | 16 ++++----- .../sections/widgets-section.component.html | 4 +-- src/app/i18n/en.ts | 1 + src/app/i18n/hy.ts | 1 + src/app/i18n/ru.ts | 1 + src/app/i18n/translations.ts | 1 + .../media-picker/media-picker.component.html | 2 +- 22 files changed, 144 insertions(+), 39 deletions(-) diff --git a/src/app/features/content-management/components/static-pages-editor.component.html b/src/app/features/content-management/components/static-pages-editor.component.html index e08627d..f3992db 100644 --- a/src/app/features/content-management/components/static-pages-editor.component.html +++ b/src/app/features/content-management/components/static-pages-editor.component.html @@ -1,6 +1,6 @@ @if (fieldError('staticPages'); as msg) { -

{{ msg }}

+ } @if (editingPage(); as page) { diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html index 3fb7181..6951746 100644 --- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html +++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html @@ -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()" > diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss index 9690c4a..67e070b 100644 --- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss +++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss @@ -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); } diff --git a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html index cd89441..4b06b3e 100644 --- a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html +++ b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html @@ -1,11 +1,11 @@
@if (draftRestored()) { -
+
{{ 'builder.draftRestored' | translate }} {{ 'builder.dismiss' | translate }}
} -
+
{{ (status() === 'published' ? 'builder.statusPublished' : 'builder.statusDraft') | translate }} @if (dirty()) { {{ 'builder.unsavedChanges' | translate }} diff --git a/src/app/features/project-editor/pages/project-editor-page.component.html b/src/app/features/project-editor/pages/project-editor-page.component.html index 4ad42ac..76cbf36 100644 --- a/src/app/features/project-editor/pages/project-editor-page.component.html +++ b/src/app/features/project-editor/pages/project-editor-page.component.html @@ -1,4 +1,5 @@
+ @if (mobileDrawerOpen()) {
} @@ -15,7 +16,7 @@ -
+
+
- @for (link of column.links; track link.id) { + @for (link of column.links; track link.id; let firstLink = $first; let lastLink = $last) {
@@ -115,7 +121,15 @@ } - +
+ + + +
}
diff --git a/src/app/features/project-editor/sections/footer-section.component.scss b/src/app/features/project-editor/sections/footer-section.component.scss index 03e4fda..4e0899e 100644 --- a/src/app/features/project-editor/sections/footer-section.component.scss +++ b/src/app/features/project-editor/sections/footer-section.component.scss @@ -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; diff --git a/src/app/features/project-editor/sections/footer-section.component.ts b/src/app/features/project-editor/sections/footer-section.component.ts index 7c59316..e28d862 100644 --- a/src/app/features/project-editor/sections/footer-section.component.ts +++ b/src/app/features/project-editor/sections/footer-section.component.ts @@ -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'; } diff --git a/src/app/features/project-editor/sections/homepage-section.component.html b/src/app/features/project-editor/sections/homepage-section.component.html index dbf3d5f..a3e338c 100644 --- a/src/app/features/project-editor/sections/homepage-section.component.html +++ b/src/app/features/project-editor/sections/homepage-section.component.html @@ -6,12 +6,12 @@ @if (fieldError('pages'); as msg) { -

{{ msg }}

+ }

{{ 'builder.homepageBlocksHint' | translate }}

- @for (section of sections(); track section.id) { + @for (section of sections(); track section.id; let first = $first; let last = $last) {
@@ -49,6 +49,12 @@
+ +