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>

src/app/features/project-editor/sections/footer-section.component.html

@@ -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">&times;</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">&times;</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">&times;</button>
+                  </div>
                 </div>
               }
             </div>