fix(bulk-upload): announce error chip status to screen readers
The ! indicator was aria-hidden with no sr-only fallback, making failed uploads invisible to assistive technology. Added sr-only span with bulk_file_error_chip_label before the visual indicator. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -103,6 +103,7 @@ $effect(() => {
|
|||||||
>
|
>
|
||||||
<span class="max-w-[8rem] truncate" title={entry.title}>{entry.title}</span>
|
<span class="max-w-[8rem] truncate" title={entry.title}>{entry.title}</span>
|
||||||
{#if entry.status === 'error'}
|
{#if entry.status === 'error'}
|
||||||
|
<span class="sr-only">{m.bulk_file_error_chip_label()}</span>
|
||||||
<span aria-hidden="true" class="ml-0.5 font-extrabold text-red-600">!</span>
|
<span aria-hidden="true" class="ml-0.5 font-extrabold text-red-600">!</span>
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -78,6 +78,27 @@ describe('FileSwitcherStrip', () => {
|
|||||||
expect(errBtn).not.toBeNull();
|
expect(errBtn).not.toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('error chip contains a screen-reader-only error label', async () => {
|
||||||
|
const files: FileEntry[] = [
|
||||||
|
{
|
||||||
|
id: 'e1',
|
||||||
|
file: new File([''], 'bad.pdf'),
|
||||||
|
title: 'Bad file',
|
||||||
|
status: 'error',
|
||||||
|
previewUrl: ''
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const { container } = render(FileSwitcherStrip, {
|
||||||
|
files,
|
||||||
|
activeId: 'e1',
|
||||||
|
onSelect: vi.fn(),
|
||||||
|
onRemove: vi.fn()
|
||||||
|
});
|
||||||
|
const errBtn = container.querySelector('[data-status="error"]');
|
||||||
|
const srOnly = errBtn?.querySelector('.sr-only');
|
||||||
|
expect(srOnly).not.toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
it('ArrowRight moves focus to next chip without leaving strip', async () => {
|
it('ArrowRight moves focus to next chip without leaving strip', async () => {
|
||||||
const files = makeFiles(3);
|
const files = makeFiles(3);
|
||||||
const { container } = render(FileSwitcherStrip, {
|
const { container } = render(FileSwitcherStrip, {
|
||||||
|
|||||||
Reference in New Issue
Block a user