n8design / htwoo

hTWOo - a better Fluent UI framework.
http://my.n8d.at/hTWOo
MIT License
91 stars 9 forks source link

Focus styling for buttons #112

Open gabbsmo opened 4 months ago

gabbsmo commented 4 months ago

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.

gabbsmo commented 4 months ago

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.

StfBauer commented 3 months ago

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.

gabbsmo commented 3 months ago

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

StfBauer commented 3 months ago

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.