如何只在用键盘而不是鼠标导航时聚焦extjs中的元素?

mspsb9vt  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(121)

我试图使用extjs中的“聚焦”元素,但我们的UX希望只有当我们使用键盘聚焦时才有“边框”,而不是总是在“点击”元素时。有人知道一些配置来实现这一点吗?我现在已经使用了这个配置,但我不太喜欢它们,因为当我将鼠标移动到点击的按钮外时,边框就可以看到了:

// sass/var/Ext/button/Button.scss
$button-default-inner-border-width-focus: dynamic(1px);
$button-default-inner-border-color-focus: dynamic(#008d56);
$button-default-inner-border-color-over: dynamic(#25BD59);
$button-default-inner-border-color-focus-over: dynamic(#25BD59);
$button-default-inner-border-color-pressed: dynamic(#2AA65B);
$button-default-inner-border-color-focus-pressed: dynamic(#2AA65B);

$button-toolbar-inner-border-width-focus: dynamic(1px);
$button-toolbar-inner-border-color-focus: dynamic(#008d56);
$button-toolbar-inner-border-color-over: dynamic(#E1E7EB);
$button-toolbar-inner-border-color-focus-over: dynamic(#E1E7EB); // tmp hack to hide "focus"
$button-toolbar-inner-border-color-pressed: dynamic(#B4B8BC);//use same color as button
$button-toolbar-inner-border-color-focus-pressed: dynamic(#B4B8BC); // tmp hack to hide "focus"
// sass/var/Ext/view/Table.scss
$grid-row-cell-focus-border-width : dynamic(1px);
// sass/var/Ext/tab/Tab.scss
$tab-outline-width-focus: dynamic(1px);
9vw9lbht

9vw9lbht1#

ExtJS配置'enableKeyboardMode' -当设置为true时-应该如下运行:

  • “当键盘被用于聚焦元素时,焦点样式将是可见的,但当元素以其他方式被聚焦时则不可见(例如使用鼠标、触摸或编程方式)。"*

此模式在标签上设置一个类(x-keyboard-mode)。然而,当前此功能存在一个错误。即使启用了enableKeyboardMode,该类也始终存在,并且无论用户使用的是键盘还是定点设备,都会显示焦点样式。
我在23年2月1日向 Sencha 提交了一个关于这个问题的错误,他们已经承认了(#57524无障碍键盘模式),但没有关于何时修复的ETA。
我试着用css手动完成这个任务,但是它变得非常复杂。这取决于你对YMMV主题做了多少自定义。

相关问题