复制按钮的无障碍名加分隔符

- export/tabs/xiaohongshu/CopyButton.tsx 的 aria-label 在状态词与字段名之间补空格,不再读成「已复制小工具名称」这类连读短语
This commit is contained in:
2026-10-06 18:58:03 +08:00
parent f27aface7a
commit b9c0cd369a
2 changed files with 11 additions and 9 deletions
@@ -27,7 +27,7 @@ export function CopyButton({ value, label }: { value: string; label: string }) {
return (
<button
type="button"
aria-label={`${text}${label}`}
aria-label={`${text} ${label}`}
title={
state === 'failed' ? `复制${label}失败,请手动复制` : `复制${label}`
}
@@ -214,32 +214,34 @@ describe('面板左半', () => {
it('复制按钮把字段值写进剪贴板', async () => {
renderPane();
fireEvent.click(screen.getByRole('button', { name: '复制小工具名称' }));
fireEvent.click(screen.getByRole('button', { name: '复制 小工具名称' }));
await waitFor(() => expect(writeText).toHaveBeenCalledWith('小工具'));
// 成功态也写进无障碍名,用户与读屏都看得到「已复制」。
await screen.findByRole('button', { name: '已复制小工具名称' });
await screen.findByRole('button', { name: '已复制 小工具名称' });
});
it('复制失败不静默吞掉,按钮自己说一声', async () => {
vi.mocked(writeText).mockRejectedValue(new Error('剪贴板不可用'));
renderPane();
fireEvent.click(screen.getByRole('button', { name: '复制小工具名称' }));
fireEvent.click(screen.getByRole('button', { name: '复制 小工具名称' }));
await screen.findByRole('button', { name: '复制失败小工具名称' });
await screen.findByRole('button', { name: '复制失败 小工具名称' });
});
it('路径不给复制入口:图标与代码包都只给下载', () => {
renderPane(fakeMinitool({ artifactReady: true }));
// 图标是文件、代码包是压缩包,把项目内路径复制出去没有意义。
expect(screen.queryByRole('button', { name: '复制图标' })).toBeNull();
expect(screen.queryByRole('button', { name: '复制代码包位置' })).toBeNull();
expect(screen.queryByRole('button', { name: '复制 图标' })).toBeNull();
expect(
screen.queryByRole('button', { name: '复制 代码包位置' }),
).toBeNull();
expect(screen.queryByText(XHS_MINITOOL_ARTIFACT_RELATIVE_PATH)).toBeNull();
// 名称与介绍仍可复制:它们是要粘贴到小红书上传页的文字。
screen.getByRole('button', { name: '复制小工具名称' });
screen.getByRole('button', { name: '复制一句话介绍' });
screen.getByRole('button', { name: '复制 小工具名称' });
screen.getByRole('button', { name: '复制 一句话介绍' });
// 两个下载入口都还在。
screen.getByRole('button', { name: '下载图标文件' });
screen.getByRole('button', { name: '下载代码包' });