fix(a11y): 修复链接可访问性问题

- 为Logo链接添加aria-label
- 增强可访问性测试的详细输出
- 扩大测试范围至前20个链接

任务 2/4
This commit is contained in:
2026-04-11 23:58:34 +08:00
parent a96ef304f3
commit 3746bc55a9
2 changed files with 24 additions and 5 deletions
+23 -5
View File
@@ -41,12 +41,12 @@ test.describe('无障碍测试 @feature @frontend', () => {
for (let i = 0; i < count; i++) {
const input = inputs.nth(i);
const id = await input.getAttribute('id');
if (id) {
const label = page.locator(`label[for="${id}"]`);
const hasLabel = await label.count() > 0;
const hasAriaLabel = await input.getAttribute('aria-label');
expect(hasLabel || hasAriaLabel).toBeTruthy();
}
}
@@ -63,16 +63,34 @@ test.describe('无障碍测试 @feature @frontend', () => {
test('链接有明确的文本', async ({ page }) => {
await page.goto('/');
await page.waitForLoadState('domcontentloaded');
const links = page.locator('a');
const count = await links.count();
const problematicLinks: string[] = [];
for (let i = 0; i < Math.min(count, 10); i++) {
for (let i = 0; i < Math.min(count, 20); i++) {
const link = links.nth(i);
const text = await link.textContent();
const ariaLabel = await link.getAttribute('aria-label');
expect(text || ariaLabel).toBeTruthy();
const title = await link.getAttribute('title');
const href = await link.getAttribute('href');
const hasAccessibleName = text?.trim() || ariaLabel || title;
const isSpecialLink = !href || href === '#' || href.startsWith('javascript:') || href.startsWith('mailto:');
if (!hasAccessibleName && !isSpecialLink) {
const linkHtml = await link.innerHTML();
problematicLinks.push(`链接 ${i + 1}: href="${href}", innerHTML="${linkHtml}"`);
console.log(`链接 ${i + 1} 缺少可访问名称: href="${href}", innerHTML="${linkHtml}"`);
}
}
if (problematicLinks.length > 0) {
console.log('\n缺少可访问名称的链接列表:');
problematicLinks.forEach(link => console.log(link));
}
expect(problematicLinks.length).toBe(0);
});
});
+1
View File
@@ -162,6 +162,7 @@ function HeaderContent() {
<Link
href="/"
className="flex items-center group"
aria-label="返回首页"
>
<Image
src="/logo.svg"