fix(tile): change expandable tile to button (#5609)

* fix(tile): make tile button to copy accordion patter * chore(tile): update tests
carbon-design-system · Mar 25, 2020 · fbab6c0 · fbab6c0
1 parent 054b4f7
commit fbab6c0
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 20 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -22763,6 +22763,14 @@ Tile styles
     }
   }
 
+  .#{$prefix}--tile--expandable {
+    width: inherit;
+    color: inherit;
+    font-size: inherit;
+    text-align: left;
+    border: 0;
+  }
+
   .#{$prefix}--tile--expandable {
     overflow: hidden;
     transition: max-height $duration--moderate-01 motion(standard, productive);

diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
@@ -62,6 +62,11 @@
     }
   }
 
+  // Removes Firefox automatic border on buttons
+  .#{$prefix}--tile--expandable::-moz-focus-inner {
+    border: 0;
+  }
+
   .#{$prefix}--tile--clickable {
     @include reset;
     @include type-style('body-short-01');
@@ -118,6 +123,14 @@
     }
   }
 
+  .#{$prefix}--tile--expandable {
+    width: 100%;
+    color: inherit;
+    font-size: inherit;
+    text-align: left;
+    border: 0;
+  }
+
   .#{$prefix}--tile--expandable {
     overflow: hidden;
     transition: max-height $duration--moderate-01 motion(standard, productive);

diff --git a/packages/react/src/components/Tile/Tile-test.js b/packages/react/src/components/Tile/Tile-test.js
@@ -290,17 +290,14 @@ describe('Tile', () => {
 
       // Force the expanded tile to be collapsed.
       wrapper.setState({ expanded: false });
-      const collapsedDescription = wrapper.find('button').getElements()[0]
-        .props['aria-label'];
+      const collapsedDescription = wrapper.find('button').prop('title');
       expect(collapsedDescription).toEqual(defaultCollapsedIconText);
 
       // click on the item to expand it.
       wrapper.simulate('click');
 
       // Validate the description change
-      const expandedDescription = wrapper.find('button').getElements()[0].props[
-        'aria-label'
-      ];
+      const expandedDescription = wrapper.find('button').prop('title');
       expect(expandedDescription).toEqual(defaultExpandedIconText);
     });
 
@@ -313,17 +310,15 @@ describe('Tile', () => {
 
       // Force the expanded tile to be collapsed.
       wrapper.setState({ expanded: false });
-      const collapsedDescription = wrapper.find('button').getElements()[0]
-        .props['aria-label'];
+      const collapsedDescription = wrapper.find('button').prop('title');
+
       expect(collapsedDescription).toEqual(tileCollapsedIconText);
 
       // click on the item to expand it.
       wrapper.simulate('click');
 
       // Validate the description change
-      const expandedDescription = wrapper.find('button').getElements()[0].props[
-        'aria-label'
-      ];
+      const expandedDescription = wrapper.find('button').prop('title');
       expect(expandedDescription).toEqual(tileExpandedIconText);
     });
 

diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js
@@ -542,15 +542,16 @@ export class ExpandableTile extends Component {
 
     return (
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-      <div
+      <button
         ref={tile => {
           this.tile = tile;
         }}
         style={tileStyle}
         className={classes}
+        aria-expanded={isExpanded}
+        title={isExpanded ? tileExpandedIconText : tileCollapsedIconText}
         {...other}
         onClick={this.handleClick}
-        onKeyPress={this.handleKeyDown}
         tabIndex={tabIndex}>
         <div
           ref={tileContent => {
@@ -563,17 +564,12 @@ export class ExpandableTile extends Component {
             className={`${prefix}--tile-content`}>
             {childrenAsArray[0]}
           </div>
-          <button
-            aria-expanded={isExpanded}
-            aria-label={
-              isExpanded ? tileExpandedIconText : tileCollapsedIconText
-            }
-            className={`${prefix}--tile__chevron`}>
+          <div className={`${prefix}--tile__chevron`}>
             <ChevronDown16 />
-          </button>
+          </div>
           <div className={`${prefix}--tile-content`}>{childrenAsArray[1]}</div>
         </div>
-      </div>
+      </button>
     );
   }
 }