Focus styling for buttons

[gabbsmo]

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]

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]

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]

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

[StfBauer]

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.

[gabbsmo]

Took another look at this and found that there is a style in htwoo-core that removes the outline on focused cmdbar buttons.

div.hoo-buttoncmd a.hoo-buttoncmd:focus, div.hoo-cmdbar a.hoo-buttoncmd:focus, div.hoo-buttoncmd a.hoo-cmdbar:focus, div.hoo-cmdbar a.hoo-cmdbar:focus, div.hoo-buttoncmd button.hoo-buttoncmd:focus, div.hoo-cmdbar button.hoo-buttoncmd:focus, div.hoo-buttoncmd button.hoo-cmdbar:focus, div.hoo-cmdbar button.hoo-cmdbar:focus {
    outline: none;
}

You should be able to reproduce by toggling the :focus and :focus-visible states with DevTool here: https://lab.n8d.studio/htwoo/htwoo-core/?p=molecules-cmdbar

[StfBauer]

Thanks for that as always!