Which controls can be focused? How to skin for focus?
kevinfoley opened this issue · comments
I think I am missing or have forgotten something about broad support for focus in a Feathers app.
Background: We have an app with a custom theme. The project was originally designed for mobile and didn't support focus. Recently the decision was made to add support for focus. It's easy enough to turn on the FocusManager, but I need to update the theme so that the control skins have a "focused" state.
Where I'm hung up is that there is no FOCUSED state in the ButtonState constants. Do we need to use TextInputState.FOCUSED even for controls that aren't text inputs, such as Button? Which controls support focus?
I don't see answers to these questions in https://feathersui.com/help/focus.html . Apologies if this is covered in another help page that I'm missing.
Components that implement the IFocusDisplayObject or IFocusContainer interfaces are the ones that support focus.
Button does not have a special state for when it is focused. Only the states defined in ButtonState are supported. Things get complicated when you consider that focused states would need to be treated similarly to how selected states are treated with ToggleButton. For example, you'd probably want DOWN_AND_FOCUSED and HOVER_AND_FOCUSED to have their own look that's different than just DOWN and HOVER. ToggleButton would need states like DOWN_AND_FOCUSED_AND_SELECTED too, so we're talking possibly up to 8 new button states. I couldn't come up with a solution that I liked to handle all of the possible variations. Since there is a generic way to style any focused component, I stuck with that.
All focus components support a focusIndicatorSkin. This skin may be used to provide an outline around a component when it is focused. The example themes use this on both desktop and mobile.
Ah, that is a good solution. It would be helpful if you could mention it in the https://feathersui.com/help/focus.html article. Thanks for the help!
Yeah, I'll add a section about styling.
One more question: when I set the focus programmatically, it seems to work internally, but it does not display the focus indicator skin. For example, if I do this:
var focusManager:IFocusManager = FocusManager.getFocusManagerForStage( Starling.current.stage );
focusManager.focus = button;
the focus indicator skin does not display, but I can still activate the button by pressing spacebar. However, when I change focus by pressing Tab, the focus indicator skin does display. Is there something else I need to do when setting focus programatically? (This is in Feathers 3.5)
This behavior is by design and I copied it from other environments. I'm pretty sure that Flex behaves this way too, and I think that I observed it in native platforms.
After setting the focus programatically, you can manually call showFocus().
Gotcha, thanks. That would be good to mention in the help article as well.