feat: add aria-disabled and logic to disable childs

mui · Jul 25, 2020 · 333dec7 · 333dec7
1 parent 35af73f
commit 333dec7
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 4 deletions.
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -100,7 +100,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
     collapseIcon,
     endIcon,
     expandIcon,
-    disabled,
+    disabled: disabledProp,
     icon: iconProp,
     id: idProp,
     label,
@@ -123,6 +123,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
     isExpanded,
     isFocused,
     isSelected,
+    isDisabled,
     multiSelect,
     mapFirstChar,
     unMapFirstChar,
@@ -159,6 +160,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
   const expanded = isExpanded ? isExpanded(nodeId) : false;
   const focused = isFocused ? isFocused(nodeId) : false;
   const selected = isSelected ? isSelected(nodeId) : false;
+  const disabled = isDisabled ? isDisabled(nodeId) : false;
   const icons = contextIcons || {};
 
   if (!icon) {
@@ -178,6 +180,10 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
   }
 
   const handleClick = (event) => {
+    if (disabled) {
+      return;
+    }
+
     if (!focused) {
       focus(event, nodeId);
     }
@@ -291,6 +297,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
       role="treeitem"
       aria-expanded={expandable ? expanded : null}
       aria-selected={ariaSelected}
+      aria-disabled={disabled}
       ref={handleRef}
       id={id}
       tabIndex="-1"

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -222,6 +222,32 @@ describe('<TreeItem />', () => {
       });
     });
 
+    describe('aria-disabled', () => {
+      it('should have the attribute `aria-disabled=false` if disabled is false', () => {
+        const { getByTestId } = render(
+          <TreeView>
+            <TreeItem nodeId="test" label="test" data-testid="test">
+              <TreeItem nodeId="test2" label="test2" />
+            </TreeItem>
+          </TreeView>,
+        );
+
+        expect(getByTestId('test')).to.have.attribute('aria-disabled', 'false');
+      });
+
+      it('should have the attribute `aria-disabled=true` if disabled', () => {
+        const { getByTestId } = render(
+          <TreeView defaultExpanded={['test']}>
+            <TreeItem nodeId="test" label="test" disabled data-testid="test">
+              <TreeItem nodeId="test2" label="test2" />
+            </TreeItem>
+          </TreeView>,
+        );
+
+        expect(getByTestId('test')).to.have.attribute('aria-disabled', 'true');
+      });
+    });
+
     describe('aria-selected', () => {
       describe('single-select', () => {
         it('should not have the attribute `aria-selected` if not selected', () => {
@@ -1434,17 +1460,33 @@ describe('<TreeItem />', () => {
     });
   });
 
-  describe('prop: deleted', () => {
+  describe('prop: disabled', () => {
     it('should disable treeItem', () => {
       const { getByTestId } = render(
-        <TreeView multiSelect>
+        <TreeView>
           <TreeItem nodeId="one" label="one" disabled data-testid="one" />
           <TreeItem nodeId="two" label="two" data-testid="two" />
         </TreeView>,
       );
 
       expect(getByTestId('one')).to.have.class(classes.disabled);
     });
+
+    it('should disable child items when parent item is disabled', () => {
+      const { getByTestId } = render(
+        <TreeView defaultExpanded={['one']}>
+          <TreeItem nodeId="one" label="one" disabled data-testid="one">
+            <TreeItem nodeId="two" label="two" data-testid="two" />
+            <TreeItem nodeId="three" label="three" data-testid="three" />
+          </TreeItem>
+        </TreeView>,
+      );
+
+      expect(getByTestId('two')).to.have.class(classes.disabled);
+      expect(getByTestId('two')).to.have.attribute('aria-disabled', 'true');
+      expect(getByTestId('three')).to.have.class(classes.disabled);
+      expect(getByTestId('three')).to.have.attribute('aria-disabled', 'true');
+    });
   });
 
   it('should be able to type in an child input', () => {

diff --git a/packages/material-ui-lab/src/TreeView/TreeView.js b/packages/material-ui-lab/src/TreeView/TreeView.js
@@ -117,6 +117,23 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
     [selected],
   );
 
+  const isDisabled = (id) => {
+    let node = nodeMap.current[id];
+
+    if (node.disabled) {
+      return true;
+    }
+
+    while (node.parentId != null) {
+      if (node.disabled) {
+        return true;
+      }
+      node = nodeMap.current[node.parentId];
+    }
+
+    return false;
+  };
+
   const isFocused = (id) => focusedNodeId === id;
 
   /*
@@ -587,7 +604,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
     let flag = false;
     const key = event.key;
 
-    if (event.altKey || event.currentTarget !== event.target) {
+    if (event.altKey || event.currentTarget !== event.target || isDisabled(focusedNodeId)) {
       return;
     }
 
@@ -707,6 +724,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
         isExpanded,
         isFocused,
         isSelected,
+        isDisabled,
         selectNode: disableSelection ? noopSelection : selectNode,
         selectRange: disableSelection ? noopSelection : selectRange,
         multiSelect,