0

I'm trying to see the "focused" elements in extjs using, but our UX wants to have that "border" only when we focus using keyboards, not always when "click" on elements for example. does someone knows some configs to achieve this? I've used this config for now, but don't really like them, because when i'm moving mouse outside clicked button, the border is then visible:

// 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);
matei.nick
  • 161
  • 1
  • 5
  • I need this behavior for all elements, buttons, grids cell... etc. Jira has this behavior when you press "Tab" buttons have a border, but not when click on them. – matei.nick Aug 20 '20 at 10:02
  • 1
    Do you mean this? https://stackoverflow.com/questions/31402576/enable-focus-only-on-keyboard-use-or-tab-press – Arthur Rubens Aug 20 '20 at 10:42
  • yes... Thanks, but I need for extjs (sencha) themes. I don't want to manually style all components. but the link is a good starting point. – matei.nick Aug 26 '20 at 12:26

1 Answers1

1

The ExtJS config 'enableKeyboardMode' - when set to true - is supposed to function as follows:

"when keyboard was used to focus an element, focus styling will be visible but not when element was focused otherwise (e.g. with mouse, touch, or programmatically)."

This mode sets a class (x-keyboard-mode) on the <body> tag. There is currently a bug with this functionality however. Even when enableKeyboardMode is enabled, this class is always present and the focus styling is shown whether the user is using the keyboard or a pointing device.

I filed a bug with Sencha regarding this on 2/1/23, which they've acknowledged (#57524 Accessibility Keyboard Mode), but no ETA on when a fix might be coming.

I've tried to do this manually with css, but it gets complex pretty fast. Depending on how much customization you've done to the theme YMMV.

tvachon
  • 21
  • 2