已禁用项的工具提示可访问性

复制件

• 我查了一下现在的问题

最新版本

• [X]我已经测试了最新版本

页:1

我很难知道如何让无障碍 与工具提示 与残废物品。

如果我遵循文件:

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? "Tooltip标题="删除" 宽度 < 已禁用 Icon 按钮 > < 删除Icon /> </Icon按钮> </ span > (日语) (英语).

然后Tolotip将标签添加到间距上而不是按钮,我从Axe和Lighthouse等无障碍工具得到警告,一个间距元素可能不应该有"aria-label",而按钮没有"aria-label".

我可以重复标签来谈第二个问题:

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?
"Tooltip标题="删除"
宽度
< IconButton aria- label= “ 删除” 已禁用 >
< 删除Icon />
</Icon按钮>
</ span > (日语)
</Tooltip> (英语).

但是后来我不得不重复文本,我有两个内容,有相同的标签,这可能引入其他的无障碍问题. (例如React Testing Library的'screen.findByLabelText'已经不高兴了,我想一些屏幕阅读者会阅读两次. )

有没有一个干净的方法来解决这个问题? 我所能想到的唯一解决办法是,Tolotip增加某种包装 ' 或残疾障碍 ' 或残废组件'道具,使其使用包装'本身;这样,它可以知道“真正的”孩子,并在那里打上标签或说明,同时仍然有它需要的包装器,使其与残疾儿童一起工作。

实例

例如,见https://codesandbox.io/s/lucid-sound-oh0mnx?file=/src/App.tsx。

动机

见上.