cruldra
ec34ace7cf
VS Code 1.139 带的 Electron 43 在 macOS 上只在鼠标压着带 title 的元素自身边缘时才弹原生提示， 停在它里面的图标、文字上不弹（electron/electron#49843，Electron 38 起）。种类图标 20px 的框 几乎被 16px 的图形占满，所以基本看不到种类名；块右上角按钮同样受影响。页面上核对过：图标中心点 命中的是图标里的线条，没有盖在上面的东西。 - components/ui/tooltip.tsx 改成整页只挂一次的 TooltipHost：元素只写 data-tooltip，事件统一交给它； 样子照 VS Code 悬停框（editorHoverWidget 那组变量、widget-shadow 阴影），停 500ms 才弹、弹着时换元素 立刻换，移开 / 按下 / 按键 / 滚动收起；键盘聚焦立刻弹，提示不是元素自己的名字时挂 aria-describedby - 代码阅读里所有 title（种类图标、块按钮、筛选栏、问答区、中文名的「原名」）改成 data-tooltip； SelectMenu 的 title 属性改名 tooltip；看板工单详情原来包一层的 Tooltip 也改成 data-tooltip - 何时弹 / 收的规则抽成纯函数加测试；更新代码阅读 spec
35 lines
1.7 KiB
TypeScript
35 lines
1.7 KiB
TypeScript
import { renderToStaticMarkup } from 'react-dom/server'
|
|
import { describe, expect, it } from 'vitest'
|
|
import { BlockTools } from './BlockTools'
|
|
|
|
function render(editing: boolean, ask?: { asking: boolean }): string {
|
|
return renderToStaticMarkup(<BlockTools editing={editing} onToggleEdit={() => {}} {...(ask && { asking: ask.asking, onToggleAsk: () => {} })} />)
|
|
}
|
|
|
|
/** 标签之间的字：图标（svg）没有字，按钮上有字就会出现在这里 */
|
|
const visibleText = (html: string): string => html.replace(/<[^>]*>/g, '').trim()
|
|
|
|
describe('块右上角的图标按钮', () => {
|
|
it.each([[false, '编辑'], [true, '预览']] as const)('编辑中 = %s：只有图标不带字，名字在悬停提示和 aria-label 里', (editing, label) => {
|
|
const html = render(editing)
|
|
expect(html).toMatch(/^<div[^>]* role="group" aria-label="块操作"/)
|
|
expect(visibleText(html)).toBe('')
|
|
expect(html.match(/<button/g)).toHaveLength(1)
|
|
expect(html).toContain(`data-tooltip="${label}" aria-label="${label}"`)
|
|
expect(html).not.toContain(' title=')
|
|
expect(html).toMatch(/<button[^>]*><svg/)
|
|
expect(html.includes('data-active')).toBe(editing)
|
|
})
|
|
|
|
it.each([false, true])('「问 AI」排在编辑前面，只有图标；问答区展开着 = %s 时带按下标记', (asking) => {
|
|
const html = render(false, { asking })
|
|
expect(visibleText(html)).toBe('')
|
|
const buttons = [...html.matchAll(/<button[^>]*>/g)].map(match => match[0])
|
|
expect(buttons).toHaveLength(2)
|
|
expect(buttons[0]).toContain('data-tooltip="问 AI" aria-label="问 AI"')
|
|
expect(buttons[0]).toContain(`aria-expanded="${asking}"`)
|
|
expect(buttons[0].includes('data-active')).toBe(asking)
|
|
expect(buttons[1]).toContain('data-tooltip="编辑"')
|
|
})
|
|
})
|