-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Icon focus styling is impacted by default opacity for icons #9267
Description
The outline around a comment icon (just as an example icon) is very different colour to the normal selection outline and much less clear:
This is because of this CSS rule from blockly (css.ts), which I found surprising:
.blocklyIconGroup:not(:hover), .blocklyIconGroupReadonly {
opacity: .6;
}
So .blocklyIconGroup only uses its colours as defined when you hover and otherwise shows generally more muted colours influenced by the block colour behind. It was surprising to me that the icon would be different colours for different blocks in this way and I'm curious to know any background.
Assuming this is intentional, or at least hard to change at this point, I think it would be good to prevent the effect on the focus outline.
Having focus behave like hover seems reasonable. This fix could perhaps be made in blockly (by treating :focus like :hover) or done in a similar way to the workaround we have in MakeCode but in the plugin. MakeCode's CSS:
.blocklyKeyboardNavigation .blocklyIconGroup:is(.blocklyActiveFocus, .blocklyPassiveFocus) {
// Unless you hover the icon group has opacity 0.6 which makes
// the focus indicator unclear.
opacity: 1;
}