无障碍

无障碍名称

没有 title 的图标处于 aria-hidden 状态，屏幕阅读器会跳过它。如果按钮或链接的内容只有一个图标，需要为该控件提供无障碍名称，可以在控件上设置 aria-label，也可以在图标上设置 title：

import { Settings } from "kubai-icons-react";

<button aria-label="Settings"><Settings /></button>

<button><Settings title="Settings" /></button>

<kubai-icon> Web Component从 label 属性获取无障碍名称。

输入与动效

• 设置了 prefers-reduced-motion 时，图标不播放动画，直接进入结束状态。
• 使用 trigger="parent" 时，键盘聚焦会像悬停一样播放动效；鼠标点击后留下的焦点则不会。
• 在触摸屏上，点按时动效先正向播放，再反向播放回原位。切换型图标则会切换状态。
• Bookmark 等切换型图标只通过颜色和形状表示状态。请在图标旁添加可见文字，或在按钮上设置 aria-pressed，以便屏幕阅读器读出当前状态。