Skip to content

Icon focus styling is impacted by default opacity for icons #9267

@microbit-matt-hillsdon

Description

@microbit-matt-hillsdon

The outline around a comment icon (just as an example icon) is very different colour to the normal selection outline and much less clear:

Image

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;
}

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions