Update `Tree` and `TreeNode` for SLDS2 #473

msmx-mnakagawa · 2025-06-02T07:19:03Z

What I did

update markups
update classnames
improve a11y

Reference

https://v1.lightningdesignsystem.com/components/trees/

reg-suit · 2025-06-02T07:21:49Z

reg-suit detected visual differences.

Check this report, and review them.

🔴

🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

What do the circles mean?

The number of circles represent the number of changed images.
🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.

stomita · 2025-06-05T23:45:12Z

src/scripts/Tree.tsx

@@ -1,4 +1,10 @@
-import React, { HTMLAttributes, createContext, FC, useMemo } from 'react';
+import React, {
+  useId,


If you are going to use useId, be sure to remove 17.0 from the peerDependency in package.json.

@stomita
I got it.
I created a PR #487 doing so.

Could you confirm it as well?

stomita · 2025-06-05T23:47:23Z

src/scripts/TreeNode.tsx

          aria-controls=''
+          aria-hidden='true'
+          tabIndex={-1}


Setting tabIndex to -1 should be carefully determined, as the current implementation might be utilizing the node to be focused by the users.

Same as #473 (comment).

@msmx-mnakagawa
As the current tree item toggle is allowing tab focus, It would break existing implementations.
If you are going to change it, be care about the effects caused by the change.

@stomita
I got it. Thank you for pointing out.
In d4cb683, I removed tabIndexes that differ from the existing implementation.

stomita · 2025-06-05T23:50:08Z

src/scripts/TreeNode.tsx

          type='icon-bare'
          icon={icon}
-          iconSize='small'
+          iconSize='x-small'


Setting iconSize of toggling button to x-small makes the rendered result much smaller than the LDS catalog.

LDS doc:

@stomita
I am so sorry that the doc uses the small size that is same as before. 🙇‍♂️
I reverted it in 91c971f.

stomita · 2025-06-05T23:54:05Z

src/scripts/TreeNode.tsx

          onClick={onToggle}
+          title={typeof label === 'string' ? `Expand ${label}` : undefined}


Implicit title setting would not be required in the lib layer.

@stomita
Though markups in the reference receive the titles..., I got it.
I removed the prop in f9c5166.

stomita · 2025-06-05T23:58:45Z

src/scripts/TreeNode.tsx

-        {ItemRender ? <ItemRender {...props} /> : label}
-      </a>
+      <span className='slds-has-flexi-truncate'>
+        {onLabelClick ? (


Is this switch required ? It might be ok with current '' rendering even if there is not defined onLabelClick handler.

@stomita
I got it.
I unified them into the a tag in d9d94d4.

stomita · 2025-06-06T00:02:54Z

src/scripts/TreeNode.tsx

+        {onLabelClick ? (
+          <a
+            className='slds-tree__item-label slds-truncate'
+            tabIndex={-1}


Add title prop if you are going to show the label value automatically like here

@stomita
I added the title into the unified a tag in a97270c.

stomita · 2025-06-06T00:08:49Z

src/scripts/TreeNode.tsx

          aria-controls=''
+          aria-hidden='true'


The aria-hidden is set to true, even it is surely displayed.

@stomita

Well, the reference says that adding aria-hidden="true" and tabindex="-1" is must thing.
Following this spec, how can we do...?

https://v1.lightningdesignsystem.com/components/trees/#About-Trees

In our example, we are using a chevron icon on tree branches to help indicate to the user what action clicking the tree branch will perform, whether opening or closing it. The effect of rotating the icon 90° to indicate open/closed status is achieved by applying the ARIA attribute aria-expanded to the treeitem. aria-hidden="true" and tabindex="-1" must be placed on the toggle button.

@msmx-mnakagawa
In the LDS documentation, this toggle button is used solely to open or close a tree node, and the same action is triggered when the node itself is clicked. In other words, the LDS example assumes that the tree item behaves identically to the toggle button, which may not always be guaranteed. If the toggle button is not exposed to assistive technologies, users with disabilities have no way to determine or control whether the node is open or closed — especially if there is no guarantee that clicking the node itself performs the same action as the toggle button.

@stomita
I got your opinion.
In 1ce5ad3, I removed area-hidden that may prevent a11y, just in case that the tree item doesn't always behave identically to the toggle button.

stomita · 2025-06-09T01:39:28Z

src/scripts/TreeNode.tsx

          aria-controls=''
+          aria-hidden='true'
+          tabIndex={-1}


@msmx-mnakagawa
As the current tree item toggle is allowing tab focus, It would break existing implementations.
If you are going to change it, be care about the effects caused by the change.

stomita · 2025-06-09T01:47:35Z

src/scripts/TreeNode.tsx

          aria-controls=''
+          aria-hidden='true'


@msmx-mnakagawa
In the LDS documentation, this toggle button is used solely to open or close a tree node, and the same action is triggered when the node itself is clicked. In other words, the LDS example assumes that the tree item behaves identically to the toggle button, which may not always be guaranteed. If the toggle button is not exposed to assistive technologies, users with disabilities have no way to determine or control whether the node is open or closed — especially if there is no guarantee that clicking the node itself performs the same action as the toggle button.

…ntation

msmx-mnakagawa added 4 commits June 2, 2025 16:12

(Tree): improve a11y

4f2d7cd

(Tree): update classnames

41f517c

(TreeNode): improve a11y

aa717e4

(TreeNode): update markups

4d3af82

msmx-mnakagawa self-assigned this Jun 2, 2025

msmx-mnakagawa requested a review from stomita June 2, 2025 07:23

msmx-mnakagawa marked this pull request as ready for review June 2, 2025 07:23

msmx-mnakagawa mentioned this pull request Jun 5, 2025

Support SLDS2 #485

Draft

42 tasks

stomita requested changes Jun 6, 2025

View reviewed changes

msmx-mnakagawa mentioned this pull request Jun 6, 2025

Remove React 17 support from peerDependencies #487

Merged

msmx-mnakagawa added 5 commits June 6, 2025 16:54

Merge branch 'support-slds-2' into support-slds-2-tree-tree-node

93a666a

(TreeNode): revert mistakenly added button size

91c971f

(TreeNode): remove a switch that wouldn't be required

d9d94d4

(TreeNode): add title prop to item label

a97270c

(TreeNode): remove implicit title setting

f9c5166

msmx-mnakagawa requested a review from stomita June 6, 2025 08:50

stomita requested changes Jun 9, 2025

View reviewed changes

msmx-mnakagawa added 3 commits June 9, 2025 14:18

Merge branch 'support-slds-2' into support-slds-2-tree-tree-node

202c804

(TreeNode): remove the aria-hidden that may prevent a11y improvement

1ce5ad3

(TreeNode): remove tabIndexes that differ from the existing impleme…

d4cb683

…ntation

msmx-mnakagawa requested a review from stomita June 9, 2025 05:31

stomita approved these changes Jun 12, 2025

View reviewed changes

stomita merged commit c85f24a into support-slds-2 Jun 12, 2025
2 checks passed

msmx-mnakagawa mentioned this pull request Jun 12, 2025

Update Tabs for SLDS2 #479

Merged

		onClick={onToggle}
		title={typeof label === 'string' ? `Expand ${label}` : undefined}

Update Tree and TreeNode for SLDS2 #473

Update Tree and TreeNode for SLDS2 #473

Uh oh!

Conversation

msmx-mnakagawa commented Jun 2, 2025

What I did

Reference

Uh oh!

reg-suit bot commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Update `Tree` and `TreeNode` for SLDS2 #473

Update `Tree` and `TreeNode` for SLDS2 #473

reg-suit bot commented Jun 2, 2025 •

edited

Loading