As a user, when I select a tag I want leaves with that tag to be highlighted and other leaves to not be interactive, so I can browse only leaves with that tag.

[rlskoeser]

dev notes

When a tag is active, leaves without that tag should be deactivated; not clickable, not interactive, disabled; implement deactivated leaf style from Figma. Should be able to do with some kind of class or toggle on the container and css styles

inactive leaves should also be ignored when using keyboard to tab-navigate through the tree (postponed; handle as part of accessibility issue)

link to figma file showing highlighted leaves

link to the entire tag functionality on the time tree page

[rlskoeser]

@gissoo @jhimpele I have a question about what should happen to the labels for inactive leaves when a tag is selected — it's not clear in Gissoo's designs in Figma because the tree in her mockup doesn't have any labels.

Here are two screenshots of this feature in progress showing two options: labels at 40% opacity like the inactive leaves, and labels hidden entirely. (Remember there will be branches drawn under the leaves.)

Please let me know which option you prefer.

[jhimpele]

@rlskoeser This is a really good question! The second option looks cleaner and clarifies the relationships, whereas the first one retains the other leaves as context....I would lean toward the first because it does let you view the tree both ways....Do we still have plans to limit the glow? That is reduce the extent of the glow beyond the leaf edges.

[rlskoeser]

Interesting! I like the second better because it looks cleaner; hadn't thought about the value of the labels as context. I'm not sure how readable the low opacity labels are (they probably don't pass accessibility checks, actually, which might be a deciding factor here... 🤔 ).

I did decrease the size of the glow by half, but Gissoo says the colors are not quite right. She is still planning to adjust the glow styles (colors and maybe size also) — she said she hoped to get to it next week. (We're tracking that on #105.)

[jhimpele]

Let's see what the accessibility checker says, and follow their lead!

[gissoo]

@rlskoeser @jhimpele I also was leaning towards the first option for the context! I think there is value in keeping the labels, even behaviorally it is more consistent. But if it's a no no from the accessibility perspective then I'm fine with removing them.

[rlskoeser]

reviewed and tested as part of #141