Skip to content

[Tree] Turn indent lines off by default and improve color contrast #2598

@DanielleRameau

Description

@DanielleRameau

Provide a general summary of the issue here

Description:
The indent lines in the Tree component currently have a contrast ratio of 1.4:1 (light mode) and 1.5:1 (dark mode). This is below the recommended 3:1 contrast ratio for non-text elements.

Image

Proposed fix:

  • turn indent lines off by default in code and figma
  • create guidelines based on best practices: when to show the indent lines, what is the purpose? and add to tree documentation on documentation website
  • Replaceborder.plain with border.bold for the indent lines in figma and code

UX Guidelines:

1. Only Show Guides When They Add Value

  • Show indent lines only for nodes that have visible children (i.e., expandable/collapsible folders or groups).
  • Do not show guides for single-level items or leaf nodes unless they are within a visible nested structure.

2. Show Guides for Nested Levels

  • Start showing guides from the second level (i.e., when a node is a child of another node).
  • Do not show guides for top-level nodes, these are already visually distinct.

Impact:

  • Improves accessibility and compliance with WCAG contrast guidelines.
  • Ensures indent lines remain visible and usable for all users.

👤 Your name

DR

🧢 Your Product/Team

SLDS

Metadata

Metadata

Assignees

Labels

Type

Projects

Status

✈️ Released

Relationships

None yet

Development

No branches or pull requests

Issue actions