Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focus styling for buttons #112

Open
gabbsmo opened this issue Feb 27, 2024 · 4 comments
Open

Focus styling for buttons #112

gabbsmo opened this issue Feb 27, 2024 · 4 comments
Labels
needs triage Needs to be reviewed

Comments

@gabbsmo
Copy link

gabbsmo commented Feb 27, 2024

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 gabbsmo changed the title Focus styling for cmdbar buttons Focus styling for buttons Mar 20, 2024
@gabbsmo
Copy link
Author

gabbsmo commented Mar 20, 2024

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
Copy link
Contributor

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.

@StfBauer StfBauer added the needs triage Needs to be reviewed label Mar 28, 2024
@gabbsmo
Copy link
Author

gabbsmo commented Mar 28, 2024

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

@StfBauer
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage Needs to be reviewed
Projects
None yet
Development

No branches or pull requests

2 participants