n8design/htwoo

Focus styling for buttons

Opened this issue · 4 comments

Is your feature request related to a problem? Please describe.
Unlike, Fluent UI, htwoo allows for tab navigation between cmdbar buttons. There is however no styling indicating that a button has focus.

Describe the solution you'd like
Maybe a border like on flyout menu items.

Additional context
I am by no means an expert on web accessibility. If this is "by design", please just let me know.

Regular buttons also seem to be missing focus styling. Updated the title to reflect this. In this case however Fabric React adds an internal border.

I realize that there are some complications with how it is done in Fabric React as it seem to require extra markup. Personally I would not mind if the style for :focus was the same as for :hover or just used the user agent style.

I realize that there are some complications with how it is done in Fabric React as it seem to require extra markup. Personally I would not mind if the style for :focus was the same as for :hover or just used the user agent style.

It has the user agent style which means that none of the button ever has a focus style. Tested in Safari, Firefox, Chrome, Edge. I guess I need some futher investigation.

I see I incorrectly assumed that buttons had an outline in desktop browsers. Sorry for the confusion.

Nothing to be sorry about they were there and somehow are gone now. Could be a general browser bug or a specification change. I will investigate this further and see what I'll find out.