fix(admin): polish categories

Add accessible names to select-all, per-row select, and per-row
visibility-toggle checkboxes in the table view — none had them,
including the visibility toggle whose <label> wrapped only the input
with no text content (empty accessible name). Tree/grid views already
had aria-label on their row checkboxes; table view was the gap.

New adminCategories.selectAllRows/selectRow/toggleVisibility keys
added across en/ru/hy.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-19 23:57:49 +04:00
parent 8956cd00d7
commit a0d3f086c1
5 changed files with 15 additions and 3 deletions

View File

@@ -129,7 +129,7 @@
<app-table [class.density-compact]="density === 'compact'"> <app-table [class.density-compact]="density === 'compact'">
<thead> <thead>
<tr> <tr>
<th><input type="checkbox" (change)="selectAll.emit($any($event.target).checked)" /></th> <th><input type="checkbox" [attr.aria-label]="'adminCategories.selectAllRows' | translate" (change)="selectAll.emit($any($event.target).checked)" /></th>
<th>{{ 'adminCategories.title' | translate }}</th> <th>{{ 'adminCategories.title' | translate }}</th>
@if (visibleColumns.includes('slug')) { <th>{{ 'adminCategories.slug' | translate }}</th> } @if (visibleColumns.includes('slug')) { <th>{{ 'adminCategories.slug' | translate }}</th> }
@if (visibleColumns.includes('items')) { <th>{{ 'adminCategories.items' | translate }}</th> } @if (visibleColumns.includes('items')) { <th>{{ 'adminCategories.items' | translate }}</th> }
@@ -142,7 +142,7 @@
<tbody> <tbody>
@for (category of flatCategories; track category.id) { @for (category of flatCategories; track category.id) {
<tr [class.deleted]="category.deletedAt"> <tr [class.deleted]="category.deletedAt">
<td><input type="checkbox" [checked]="isSelected(category.id)" (change)="selectionChange.emit({ id: category.id, checked: $any($event.target).checked })" /></td> <td><input type="checkbox" [checked]="isSelected(category.id)" [attr.aria-label]="('adminCategories.selectRow' | translate) + ': ' + category.title" (change)="selectionChange.emit({ id: category.id, checked: $any($event.target).checked })" /></td>
<td>{{ category.icon }} {{ category.title }}</td> <td>{{ category.icon }} {{ category.title }}</td>
@if (visibleColumns.includes('slug')) { <td>{{ category.slug }}</td> } @if (visibleColumns.includes('slug')) { <td>{{ category.slug }}</td> }
@if (visibleColumns.includes('items')) { <td>{{ category.itemsCount }}</td> } @if (visibleColumns.includes('items')) { <td>{{ category.itemsCount }}</td> }
@@ -150,7 +150,7 @@
<td><app-badge [variant]="category.status === 'published' ? 'success' : 'neutral'">{{ ('adminCategories.status.' + category.status) | translate }}</app-badge></td> <td><app-badge [variant]="category.status === 'published' ? 'success' : 'neutral'">{{ ('adminCategories.status.' + category.status) | translate }}</app-badge></td>
} }
@if (visibleColumns.includes('visibility')) { @if (visibleColumns.includes('visibility')) {
<td><label class="check"><input type="checkbox" [checked]="category.visible" (change)="toggleVisible.emit({ id: category.id, visible: $any($event.target).checked })" /></label></td> <td><label class="check"><input type="checkbox" [checked]="category.visible" [attr.aria-label]="('adminCategories.toggleVisibility' | translate) + ': ' + category.title" (change)="toggleVisible.emit({ id: category.id, visible: $any($event.target).checked })" /></label></td>
} }
<td class="health-cell"><app-category-health-widget [items]="healthItems(category)" [completionPercent]="health(category).completionPercent" [compact]="true" /></td> <td class="health-cell"><app-category-health-widget [items]="healthItems(category)" [completionPercent]="health(category).completionPercent" [compact]="true" /></td>
<td class="actions"> <td class="actions">

View File

@@ -1448,6 +1448,9 @@ export const en: Translations = {
replaceImage: 'Replace image', replaceImage: 'Replace image',
search: 'Search categories…', search: 'Search categories…',
showDeleted: 'Show deleted', showDeleted: 'Show deleted',
selectAllRows: 'Select all categories',
selectRow: 'Select category',
toggleVisibility: 'Toggle visibility',
create: 'Create category', create: 'Create category',
edit: 'Edit category', edit: 'Edit category',
title: 'Title', title: 'Title',

View File

@@ -1443,6 +1443,9 @@ export const hy: Translations = {
replaceImage: 'Փոխարինել պատկերը', replaceImage: 'Փոխարինել պատկերը',
search: 'Փնտրել կատեգորիաներ…', search: 'Փնտրել կատեգորիաներ…',
showDeleted: 'Ցույց տալ ջնջվածները', showDeleted: 'Ցույց տալ ջնջվածները',
selectAllRows: 'Ընտրել բոլոր կատեգորիաները',
selectRow: 'Ընտրել կատեգորիան',
toggleVisibility: 'Փոխել տեսանելիությունը',
create: 'Ստեղծել կատեգորիա', create: 'Ստեղծել կատեգորիա',
edit: 'Խմբագրել կատեգորիան', edit: 'Խմբագրել կատեգորիան',
title: 'Անուն', title: 'Անուն',

View File

@@ -1443,6 +1443,9 @@ export const ru: Translations = {
replaceImage: 'Заменить изображение', replaceImage: 'Заменить изображение',
search: 'Поиск категорий…', search: 'Поиск категорий…',
showDeleted: 'Показать удалённые', showDeleted: 'Показать удалённые',
selectAllRows: 'Выбрать все категории',
selectRow: 'Выбрать категорию',
toggleVisibility: 'Переключить видимость',
create: 'Создать категорию', create: 'Создать категорию',
edit: 'Редактировать категорию', edit: 'Редактировать категорию',
title: 'Название', title: 'Название',

View File

@@ -1456,6 +1456,9 @@ export interface Translations {
replaceImage: string; replaceImage: string;
search: string; search: string;
showDeleted: string; showDeleted: string;
selectAllRows: string;
selectRow: string;
toggleVisibility: string;
create: string; create: string;
edit: string; edit: string;
title: string; title: string;