From ed96fef43e3b12864c2df4468f8d38829a104956 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Mon, 23 Mar 2020 10:49:28 -0500
Subject: [PATCH] fix(tile): change expandable tile to button (#5609)

* fix(tile): make tile button to copy accordion patter

* chore(tile): update tests
---
 packages/components/docs/sass.md                 |  8 ++++++++
 .../components/src/components/tile/_tile.scss    | 13 +++++++++++++
 packages/react/src/components/Tile/Tile-test.js  | 15 +++++----------
 packages/react/src/components/Tile/Tile.js       | 16 ++++++----------
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index aac14544f209..6f825a07ceac 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -22864,6 +22864,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
index d5ab4b0ccdb9..eaf06da8e644 100644
--- 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
index fe1f1e57a0d6..5065aeb9e91d 100644
--- 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
index 0517a0f4a6ed..f8e14a82306d 100644
--- 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>
     );
   }
 }