# Seller Management — UX Review

Review pass over the Phase 1 UI (`admin-seller-management-page.component.*`)
against the rest of the Backoffice. Two real issues found and fixed; the
rest of the checklist was verified as already consistent because the page
is built entirely from existing shared components.

## Fixed this pass

1. **Missing label association on the Message field (real a11y bug).**
   `app-input` self-wires `id`/`aria-describedby` from its injected
   `FormFieldContext` (confirmed in `input.component.html`); the raw
   `<textarea>` used for the optional Message field — no dedicated textarea
   component exists yet anywhere in the app — never received that wiring.
   The visible label's `for` pointed at an id the textarea never got, so a
   screen reader wouldn't announce "Message" on focus via the label
   association (proximity only). Fixed with an explicit `[attr.aria-label]`
   bound to the same translation key already used for the visible label —
   correct regardless of the broken `for` linkage.

2. **Native browser bullets in the Learn More dialog (visual inconsistency).**
   No global `list-style: none` reset exists for plain `<ul>` anywhere in
   `src/styles.scss` (only `details > summary` gets one, for the expander
   chevron). The feature list would have rendered default browser discs —
   the one place in this page not reusing an existing shared visual
   language. Replaced with `checkCircle` icon + text rows (`app-icon`,
   `--success-color` token), consistent with how the rest of the app pairs
   icons with status/list meaning rather than bare bullets.

## Verified already consistent (no change needed)

- **Empty state usage**: every other empty-state consumer in the app
  (`admin-products-list`, `media-library-page`, `admin-reviews-list`, etc.)
  uses `app-empty-state` bare — no card wrapper. This page matches that. It
  is the only one filling the `icon` slot (a subtle primary-tinted circle
  behind a `store` icon); no other page does this, but this page is also
  the only one that's *entirely* an empty state as its whole content
  (every other example sits inside a page that also has a toolbar/table),
  so a slightly more deliberate visual treatment for the "coming soon"
  moment is a reasonable, isolated deviation rather than drift.
  `app-empty-state`'s own description already caps at `max-width: 32rem` —
  no extra width-constraint code needed.
- **Icon reuse**: `store` (empty-state) and `checkCircle` (feature list) —
  neither icon is reused with a conflicting meaning elsewhere in the app
  (checked against `icon-registry.ts`'s existing 85-icon map from the prior
  icon audit).
- **Buttons/dialogs/inputs/hover/focus**: 100% shared components
  (`app-button`, `app-dialog`, `app-input`, `app-form-field`, `app-badge`).
  Hover, focus-visible, disabled, and loading states are whatever those
  components already define — verified by inspecting each component's own
  `.scss`, not re-implemented here. Same reasoning covers contrast (reused
  tokens, not new color decisions) and dark-theme readiness (every value in
  this page's own `.scss` is `var(--token, fallback)`, same fallback values
  already used in `input.component.scss` — nothing hardcoded that a future
  dark theme couldn't override).
- **Dialog accessibility**: `app-dialog` provides `role="dialog"`,
  `aria-modal="true"`, Tab/Shift+Tab focus trap, Escape-to-close, and
  focus-restore-on-close — confirmed via the accessibility tree
  (`role=dialog`, correct `aria-label` matching each dialog's title) and by
  live-testing focus behavior, not assumed.
- **Merchant wording**: every string matches the original brief's exact
  business-facing copy (Company/Email/Message, "Coming Soon", capability
  bullets in plain language) — no developer terminology introduced.
- **Responsive**: re-verified at 1280px, and at 375px mobile (button rows
  stack full-width per the existing breakpoint in this page's `.scss`,
  dialog/list content re-rendered correctly, no layout break).
- **Translations**: all new keys (`adminShell.nav.partnersGroup`,
  `adminShell.nav.sellerManagement`, `adminShell.pages.sellerManagement`,
  and the full `adminSellerManagement.*` namespace) exist in `en.ts`,
  `ru.ts`, `hy.ts`, and `translations.ts` (types) — verified by exact-count
  grep across all three locale files, no hardcoded string found in the
  component's template or TypeScript.

## Verification

`tsc --noEmit` clean. `arch:check` (boundaries + cycles) clean. Live-tested
(ru locale, `devBypassAdmin`, desktop 1280px + mobile 375px): Learn More
dialog now shows all 6 items with a check icon each (confirmed via DOM
query - `svg` present on every `<li>`), Message textarea confirmed to carry
`aria-label="Сообщение"`, no console errors at any point.