Skip to content

Introduce CSS classes for a variety of focus states #9044

@BenHenning

Description

@BenHenning

Check for duplicates

  • I have searched for similar issues before opening a new one.

Problem

Some various states of styling in the keyboard navigation plugin are difficult today, see: google/blockly-keyboard-experimentation#511.

Request

Many of the 'has' styling cases (and some of the other existing, unsolved problems) could benefit from having a few new CSS classes that properly represent different state situations:

  • blocklyTreeHasActiveFocus for cases when a tree has a node with active focus that isn't the tree root.
  • blocklyTreeHasPassiveFocus for cases when a tree has a node with passive focus that isn't the tree root.
  • blocklySubtreeHasActiveFocus for cases when a tree has a subtree (such as the flyout's workspace) has a node with active focus that isn't the subtree root.
  • blocklySubtreeHasPassiveFocus for cases when a tree has a subtree (such as the flyout's workspace) has a node with passive focus that isn't the subtree root.
  • blocklyFieldHasEditorOpen for cases when a field is being actively edited.

Alternatives considered

Using the :has() CSS pseudo-class, however this requires a version of Safari that may introduce compatibility issues for Blockly & Blockly applications. It also may not be sufficient to solve all known styling problems that have been identified in the keyboard navigation plugin.

Additional context

No response

Metadata

Metadata

Assignees

Labels

issue: feature requestDescribes a new feature and why it should be added

Projects

Status

On Hold

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions