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:
@@ -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">
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
@@ -1443,6 +1443,9 @@ export const hy: Translations = {
|
|||||||
replaceImage: 'Փոխարինել պատկերը',
|
replaceImage: 'Փոխարինել պատկերը',
|
||||||
search: 'Փնտրել կատեգորիաներ…',
|
search: 'Փնտրել կատեգորիաներ…',
|
||||||
showDeleted: 'Ցույց տալ ջնջվածները',
|
showDeleted: 'Ցույց տալ ջնջվածները',
|
||||||
|
selectAllRows: 'Ընտրել բոլոր կատեգորիաները',
|
||||||
|
selectRow: 'Ընտրել կատեգորիան',
|
||||||
|
toggleVisibility: 'Փոխել տեսանելիությունը',
|
||||||
create: 'Ստեղծել կատեգորիա',
|
create: 'Ստեղծել կատեգորիա',
|
||||||
edit: 'Խմբագրել կատեգորիան',
|
edit: 'Խմբագրել կատեգորիան',
|
||||||
title: 'Անուն',
|
title: 'Անուն',
|
||||||
|
|||||||
@@ -1443,6 +1443,9 @@ export const ru: Translations = {
|
|||||||
replaceImage: 'Заменить изображение',
|
replaceImage: 'Заменить изображение',
|
||||||
search: 'Поиск категорий…',
|
search: 'Поиск категорий…',
|
||||||
showDeleted: 'Показать удалённые',
|
showDeleted: 'Показать удалённые',
|
||||||
|
selectAllRows: 'Выбрать все категории',
|
||||||
|
selectRow: 'Выбрать категорию',
|
||||||
|
toggleVisibility: 'Переключить видимость',
|
||||||
create: 'Создать категорию',
|
create: 'Создать категорию',
|
||||||
edit: 'Редактировать категорию',
|
edit: 'Редактировать категорию',
|
||||||
title: 'Название',
|
title: 'Название',
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user