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

Focused button that represents active command has no extra focus css visuals #1801

Open
engineering-this opened this issue Mar 15, 2018 · 2 comments
Labels
accessibility Issue related to accessibility. status:confirmed An issue confirmed by the development team. support:2 An issue reported by a commercially licensed client. type:bug A bug.

Comments

@engineering-this
Copy link
Contributor

Bug

If you focus button that has css class cke_button_on it has no extra styling, so it looks same as unfocused. This might be misleading when using keyboard to focus various buttons.

Actual:
screenshot--2018 03 15-15-21-07

Expected:
screenshot--2018 03 15-15-21-51

@Comandeer
Copy link
Member

IMO the focus indicator should be the same as for inactive buttons, see WICG/focus-visible#128 for more context.

@Comandeer Comandeer added status:confirmed An issue confirmed by the development team. accessibility Issue related to accessibility. labels Mar 15, 2018
@mlewand mlewand added the target:minor Any docs related issue that can be merged into a master or major branch. label Mar 22, 2018
@f1ames f1ames removed the target:minor Any docs related issue that can be merged into a master or major branch. label Nov 12, 2019
@lslowikowska lslowikowska added the support:2 An issue reported by a commercially licensed client. label May 27, 2020
@f1ames
Copy link
Contributor

f1ames commented May 27, 2020

This depends on the skin used and it's default styling but can be easily adjusted by providing additional CSS to the editor.

As @Comandeer mentioned, the focus indicator for both inactive and active buttons could be aligned or customized so each state can be distinguished visually. See this codepen example:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Issue related to accessibility. status:confirmed An issue confirmed by the development team. support:2 An issue reported by a commercially licensed client. type:bug A bug.
Projects
None yet
Development

No branches or pull requests

5 participants