diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx index 2b12de615..3ee538262 100644 --- a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx +++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx @@ -110,6 +110,42 @@ describe("TreeNodeComponent", () => { expect(component).toMatchSnapshot(); }); + it("sets aria-selected=true on a selected selectable node", () => { + const node = generateTestNode("root", { + isSelected: () => true, + }); + const component = shallow(); + expect(component.find(TreeItem).first().props()["aria-selected"]).toBe(true); + }); + + it("sets aria-selected=false on an unselected selectable node", () => { + const node = generateTestNode("root", { + isSelected: () => false, + }); + const component = shallow(); + expect(component.find(TreeItem).first().props()["aria-selected"]).toBe(false); + }); + + it("does not set aria-selected on a non-selectable (grouping) node", () => { + const node = generateTestNode("root"); + delete node.isSelected; + const component = shallow(); + expect(component.find(TreeItem).first().props()["aria-selected"]).toBeUndefined(); + }); + + it("sets aria-selected=false on a selected parent when a descendant is selected", () => { + const node = generateTestNode("root", { + isSelected: () => true, + children: [ + generateTestNode("child1", { + isSelected: () => true, + }), + ], + }); + const component = shallow(); + expect(component.find(TreeItem).first().props()["aria-selected"]).toBe(false); + }); + it("renders an icon if the node has one", () => { const node = generateTestNode("root", { iconSrc: "the-icon.svg", diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx index 74a717b68..d4312bd14 100644 --- a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx +++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx @@ -172,6 +172,9 @@ export const TreeNodeComponent: React.FC = ({ itemType={isBranch ? "branch" : "leaf"} onOpenChange={onOpenChange} className={treeStyles.treeItem} + // Expose selection state to screen readers for selectable nodes so they announce "selected"/"not selected". + // Pure grouping nodes (no isSelected) omit the attribute, matching the ARIA single-select tree pattern. + aria-selected={node.isSelected ? shouldShowAsSelected : undefined} >