修复(AGC模型): 锁定模型项不再进入 Tab 序列
- 去掉锁定项的 tabIndex,原因改由 aria-label 与 hover 提示暴露,避免键盘停在不可选项 - 移除锁定项失效的 :focus-visible 样式与旧注释 - 更新单测:断言锁定项不可 Tab 聚焦且 aria-label 带原因
This commit is contained in:
+6
-2
@@ -84,7 +84,7 @@ afterEach(() => {
|
||||
});
|
||||
|
||||
describe('ConversationModelSelect 锁定模型', () => {
|
||||
it('不可用模型渲染为不可点、可聚焦的原因项', async () => {
|
||||
it('不可用模型渲染为不可点、可悬停查看原因且不进入 Tab 序列', async () => {
|
||||
mockConfig('basic-model', true);
|
||||
render(<ConversationModelSelect disabled={false} />);
|
||||
// 等挂载时的目录同步落地,避免把异步状态更新留到断言之后。
|
||||
@@ -96,8 +96,12 @@ describe('ConversationModelSelect 锁定模型', () => {
|
||||
const planLocked = screen.getByText('专业模型').closest('[role="option"]');
|
||||
expect(planLocked?.tagName).toBe('DIV');
|
||||
expect(planLocked?.getAttribute('aria-disabled')).toBe('true');
|
||||
expect(planLocked?.getAttribute('tabindex')).toBe('0');
|
||||
// 非焦点项:不进入 Tab 序列,避免键盘在不可选项上停留。
|
||||
expect(planLocked?.getAttribute('tabindex')).toBeNull();
|
||||
expect(planLocked?.getAttribute('data-reason')).toBe('plan_required');
|
||||
expect(planLocked?.getAttribute('aria-label')).toBe(
|
||||
'专业模型:订阅计划不支持',
|
||||
);
|
||||
expect(planLocked?.getAttribute('data-tooltip')).toBe('订阅计划不支持');
|
||||
|
||||
const disabledLocked = screen
|
||||
|
||||
+2
-2
@@ -475,7 +475,8 @@ export function ConversationModelSelect({
|
||||
) : null}
|
||||
</button>
|
||||
))}
|
||||
{/* 目录里存在但当前档位不可用的模型:不可点,仅 hover / 键盘 focus 出原因。 */}
|
||||
{/* 目录里存在但当前档位不可用的模型:不可点;原因通过 aria-label 与 hover 提示暴露,
|
||||
且刻意不进入 Tab 序列,避免键盘用户在不可选项上停留。 */}
|
||||
{unavailableModels.map((model) => {
|
||||
const reasonLabel = unavailableModelReasonLabel(model.reason);
|
||||
return (
|
||||
@@ -485,7 +486,6 @@ export function ConversationModelSelect({
|
||||
aria-selected={false}
|
||||
aria-disabled="true"
|
||||
aria-label={`${model.displayName}:${reasonLabel}`}
|
||||
tabIndex={0}
|
||||
className="conversation-model-menu-option conversation-model-menu-option-locked"
|
||||
data-reason={model.reason}
|
||||
data-tooltip={reasonLabel}
|
||||
|
||||
@@ -11349,12 +11349,11 @@ button.design-workspace-tree__entry:hover,
|
||||
position: relative;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.conversation-model-menu-option-locked:hover,
|
||||
.conversation-model-menu-option-locked:focus-visible {
|
||||
.conversation-model-menu-option-locked:hover {
|
||||
background: var(--platform-button-ghost-fill, #f3f4f6);
|
||||
outline: none;
|
||||
}
|
||||
/* 锁定项的原因提示:仅 hover / 键盘 focus 出现(AGC 桌面端,无移动端适配)。 */
|
||||
/* 锁定项的原因提示:仅 hover 出现;锁定项不进入 Tab 序列,不再有键盘 focus 态。 */
|
||||
.conversation-model-menu-option-locked[data-tooltip]::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
@@ -11373,8 +11372,7 @@ button.design-workspace-tree__entry:hover,
|
||||
white-space: normal;
|
||||
pointer-events: none;
|
||||
}
|
||||
.conversation-model-menu-option-locked[data-tooltip]:hover::after,
|
||||
.conversation-model-menu-option-locked[data-tooltip]:focus-visible::after {
|
||||
.conversation-model-menu-option-locked[data-tooltip]:hover::after {
|
||||
display: block;
|
||||
}
|
||||
.conversation-model-menu-loading {
|
||||
|
||||
Reference in New Issue
Block a user