[Tree] Selected item indicator has too low contrast #2602
Description
Provide a general summary of the issue here
Description:
In the Single Select variant of the Tree component, the color indicator for the selected item has insufficient contrast.
- Current contrast ratio: 1.1:1 (light mode) / 1.3:1 (dark mode)
- Required minimum: 3:1
The same problem exists in other Tree variants that support selection.
Proposed solution:
- Replace the current low-contrast indicator with a stripe indicator (border) at the start of the row.
- Use a bold border for the selected state to meet or exceed 3:1 contrast ratio.
- Apply this solution in both Figma and code to keep design and implementation aligned.
Impact:
- Selected state is difficult to perceive, especially for users with low vision.
- Fails WCAG non-text contrast requirements.
- Reduces usability of the Tree component in all selection modes.
Acceptance criteria:
- Selected row indicator meets at least 3:1 contrast in both light and dark modes.
- Stripe indicator (bold border at row start) is used consistently across all selection variants.
- Figma component and code implementation are updated accordingly.
👤 Your name
DR
🧢 Your Product/Team
SLDS