From 370c274205e84bceee8f65f9aa53de6ebc03e8ac Mon Sep 17 00:00:00 2001
From: Tony Hallett <tonyhallett74@gmail.com>
Date: Sun, 22 Mar 2020 11:24:11 +0000
Subject: [PATCH] [TreeItem] correct single-select aria-selected (#20102)

---
 .../material-ui-lab/src/TreeItem/TreeItem.js  | 10 ++-
 .../src/TreeItem/TreeItem.test.js             | 71 ++++++++++++-------
 .../src/TreeView/TreeView.test.js             |  8 +--
 3 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
index 973bd9edda4f32..d6f8a835eed085 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -365,6 +365,14 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
     }
   }, [focused]);
 
+  let ariaSelected;
+  if (multiSelect) {
+    ariaSelected = selected;
+  } else if (selected) {
+    // single-selection trees unset aria-selected
+    ariaSelected = true;
+  }
+
   return (
     <li
       className={clsx(classes.root, className, {
@@ -375,7 +383,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
       onKeyDown={handleKeyDown}
       onFocus={handleFocus}
       aria-expanded={expandable ? expanded : null}
-      aria-selected={!selectionDisabled && isSelected ? isSelected(nodeId) : undefined}
+      aria-selected={ariaSelected}
       ref={handleRef}
       tabIndex={tabbable ? 0 : -1}
       {...other}
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
index 734e82968b2fdc..a9c2dbe1db6e6e 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -199,34 +199,57 @@ describe('<TreeItem />', () => {
     });
 
     describe('aria-selected', () => {
-      it('should have the attribute `aria-selected=false` if not selected', () => {
-        const { getByTestId } = render(
-          <TreeView>
-            <TreeItem nodeId="test" label="test" data-testid="test" />
-          </TreeView>,
-        );
+      describe('single-select', () => {
+        it('should not have the attribute `aria-selected` if not selected', () => {
+          const { getByTestId } = render(
+            <TreeView>
+              <TreeItem nodeId="test" label="test" data-testid="test" />
+            </TreeView>,
+          );
 
-        expect(getByTestId('test')).to.have.attribute('aria-selected', 'false');
-      });
+          expect(getByTestId('test')).to.not.have.attribute('aria-selected');
+        });
 
-      it('should have the attribute `aria-selected=true` if selected', () => {
-        const { getByTestId } = render(
-          <TreeView defaultSelected={'test'}>
-            <TreeItem nodeId="test" label="test" data-testid="test" />
-          </TreeView>,
-        );
+        it('should have the attribute `aria-selected=true` if selected', () => {
+          const { getByTestId } = render(
+            <TreeView defaultSelected={'test'}>
+              <TreeItem nodeId="test" label="test" data-testid="test" />
+            </TreeView>,
+          );
 
-        expect(getByTestId('test')).to.have.attribute('aria-selected', 'true');
+          expect(getByTestId('test')).to.have.attribute('aria-selected', 'true');
+        });
       });
 
-      it('should not have the attribute `aria-selected` if disableSelection is true', () => {
-        const { getByTestId } = render(
-          <TreeView disableSelection>
-            <TreeItem nodeId="test" label="test" data-testid="test" />
-          </TreeView>,
-        );
+      describe('multi-select', () => {
+        it('should have the attribute `aria-selected=false` if not selected', () => {
+          const { getByTestId } = render(
+            <TreeView multiSelect>
+              <TreeItem nodeId="test" label="test" data-testid="test" />
+            </TreeView>,
+          );
+
+          expect(getByTestId('test')).to.have.attribute('aria-selected', 'false');
+        });
+        it('should have the attribute `aria-selected=true` if selected', () => {
+          const { getByTestId } = render(
+            <TreeView multiSelect defaultSelected={'test'}>
+              <TreeItem nodeId="test" label="test" data-testid="test" />
+            </TreeView>,
+          );
+
+          expect(getByTestId('test')).to.have.attribute('aria-selected', 'true');
+        });
+
+        it('should have the attribute `aria-selected` if disableSelection is true', () => {
+          const { getByTestId } = render(
+            <TreeView multiSelect disableSelection>
+              <TreeItem nodeId="test" label="test" data-testid="test" />
+            </TreeView>,
+          );
 
-        expect(getByTestId('test')).to.not.have.attribute('aria-selected');
+          expect(getByTestId('test')).to.have.attribute('aria-selected', 'false');
+        });
       });
     });
 
@@ -685,7 +708,7 @@ describe('<TreeItem />', () => {
           );
 
           getByTestId('one').focus();
-          expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
+          expect(getByTestId('one')).to.not.have.attribute('aria-selected');
           fireEvent.keyDown(document.activeElement, { key: ' ' });
           expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
         });
@@ -699,7 +722,7 @@ describe('<TreeItem />', () => {
             </TreeView>,
           );
 
-          expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
+          expect(getByTestId('one')).to.not.have.attribute('aria-selected');
           fireEvent.click(getByText('one'));
           expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
         });
diff --git a/packages/material-ui-lab/src/TreeView/TreeView.test.js b/packages/material-ui-lab/src/TreeView/TreeView.test.js
index 2e785dfb28bc32..a679b09641b9e9 100644
--- a/packages/material-ui-lab/src/TreeView/TreeView.test.js
+++ b/packages/material-ui-lab/src/TreeView/TreeView.test.js
@@ -106,13 +106,13 @@ describe('<TreeView />', () => {
 
     const { getByTestId, getByText } = render(<MyComponent />);
 
-    expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
-    expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
+    expect(getByTestId('one')).to.not.have.attribute('aria-selected');
+    expect(getByTestId('two')).to.not.have.attribute('aria-selected');
     fireEvent.click(getByText('one'));
     expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
-    expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
+    expect(getByTestId('two')).to.not.have.attribute('aria-selected');
     fireEvent.click(getByText('two'));
-    expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
+    expect(getByTestId('one')).to.not.have.attribute('aria-selected');
     expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
   });