Why elements that aren't focused have data-focus?

[babakfp]

Hi

Screenshot from: https://zagjs.com/components/react/radio-group

data-part="item" has data-focus because it's focused. data-part="item-control" also has data-focus when data-part="item" is focused. Why is this? data-part="item-control" itself isn't focused, so why does it have data-focus?

Also, this is problematic when trying to style focused elements, because all the children as described above gets the same focus attribute and all get the same focus style. A workaround I used was to do [data-part=item][data-focus]. Is there a better way to do this?

Thanks.

[anubra266]

@babakfp It's because it's part of the item. When an item is focused, everything within is considered focused, your workaround is the expected way to target just the item.

[babakfp]

Why is it done this way? What is the use case?

[anubra266]

The reason for propagating data-states to child elements is to support context-aware styling and accessibility. Some key cases I can point out:

Unified interaction
In components like (menus, dropdowns, or list items with multiple controls), propagating allows all parts of the item to visually respond to the state.
e.g. A focused dropdown item might highlight both the label and its checkbox or icon.

Keyboard Navigation
Accessibility specs often treat the entire item (and its parts) as a single focusable entity for keyboard navigation (e.g., Tab or ArrowKey focus). Propagating data-focus ensures consistent styling or interaction feedback.

Interdependent Styling
Some designs require child elements to visually reflect the state of the parent when it’s focused (e.g., an arrow icon in a focused dropdown item might change color, or the transform of an accordion item trigger).