fix(admin): Seller Management UX review - a11y label fix, icon list, review doc
Reviewed the Phase 1 UI against every other Backoffice page. Found and fixed 2 real issues; everything else verified already consistent (built entirely from shared components, so hover/focus/dialog-a11y/ dark-readiness/contrast come from those components, not reinvented). Fixed: - Message textarea had no id/aria-describedby wiring (app-input self-wires this via injected FormFieldContext; the raw textarea - no dedicated textarea component exists yet - never got it, so the visible label's `for` pointed nowhere). Added explicit aria-label bound to the same translation key as the visible label. - Learn More dialog's feature list would render native browser bullets (no global list-style reset exists outside details>summary in styles.scss). Replaced with checkCircle icon + text rows, consistent with how the rest of the app pairs icons with list/status meaning. Added docs/architecture/foundation/Seller-Management-UX-Review.md documenting both fixes plus everything checked and confirmed already consistent (empty-state usage, icon reuse, translations completeness across en/ru/hy, responsive at 1280px/375px, dialog a11y verified via accessibility tree not assumed). tsc --noEmit clean, arch:check (boundaries + cycles) clean. Live- verified: Learn More dialog shows all 6 items each with an icon (confirmed via DOM query), textarea aria-label confirmed "Сообщение", no console errors.
This commit is contained in:
@@ -53,6 +53,7 @@
|
||||
class="admin-seller-management-page__textarea"
|
||||
rows="4"
|
||||
[placeholder]="'adminSellerManagement.requestDialog.messagePlaceholder' | translate"
|
||||
[attr.aria-label]="'adminSellerManagement.requestDialog.messageLabel' | translate"
|
||||
[ngModel]="form().message"
|
||||
(ngModelChange)="updateMessage($event)"
|
||||
name="message"
|
||||
@@ -92,12 +93,12 @@
|
||||
>
|
||||
<app-badge variant="info">{{ 'adminSellerManagement.learnMoreDialog.comingSoonBadge' | translate }}</app-badge>
|
||||
<ul class="admin-seller-management-page__feature-list">
|
||||
<li>{{ 'adminSellerManagement.learnMoreDialog.features.sellerDashboards' | translate }}</li>
|
||||
<li>{{ 'adminSellerManagement.learnMoreDialog.features.sellerStorefronts' | translate }}</li>
|
||||
<li>{{ 'adminSellerManagement.learnMoreDialog.features.sellerPermissions' | translate }}</li>
|
||||
<li>{{ 'adminSellerManagement.learnMoreDialog.features.sellerAnalytics' | translate }}</li>
|
||||
<li>{{ 'adminSellerManagement.learnMoreDialog.features.productOwnership' | translate }}</li>
|
||||
<li>{{ 'adminSellerManagement.learnMoreDialog.features.marketplaceAdministration' | translate }}</li>
|
||||
@for (featureKey of learnMoreFeatureKeys; track featureKey) {
|
||||
<li class="admin-seller-management-page__feature-item">
|
||||
<app-icon name="checkCircle" [size]="18" />
|
||||
<span>{{ ('adminSellerManagement.learnMoreDialog.features.' + featureKey) | translate }}</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
<div class="admin-seller-management-page__dialog-actions">
|
||||
<app-button variant="primary" (click)="closeLearnMoreDialog()">
|
||||
|
||||
@@ -70,11 +70,23 @@
|
||||
.admin-seller-management-page__feature-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs, 0.375rem);
|
||||
gap: var(--space-sm, 0.5rem);
|
||||
margin: var(--space-md, 1rem) 0 0;
|
||||
padding-inline-start: var(--space-md, 1rem);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.admin-seller-management-page__feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm, 0.5rem);
|
||||
color: var(--text-primary, #1f322d);
|
||||
font-size: var(--font-size-md, 0.9375rem);
|
||||
|
||||
app-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--success-color, #2e7d32);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -59,6 +59,15 @@ export class AdminSellerManagementPageComponent {
|
||||
|
||||
protected readonly form = signal<SellerAccessRequest>({ company: '', email: '', message: '' });
|
||||
|
||||
protected readonly learnMoreFeatureKeys = [
|
||||
'sellerDashboards',
|
||||
'sellerStorefronts',
|
||||
'sellerPermissions',
|
||||
'sellerAnalytics',
|
||||
'productOwnership',
|
||||
'marketplaceAdministration'
|
||||
] as const;
|
||||
|
||||
protected openRequestDialog(): void {
|
||||
this.form.set({ company: '', email: '', message: '' });
|
||||
this.requestDialogOpen.set(true);
|
||||
|
||||
Reference in New Issue
Block a user