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 -
{ this.tile = tile; }} style={tileStyle} className={classes} + aria-expanded={isExpanded} + title={isExpanded ? tileExpandedIconText : tileCollapsedIconText} {...other} onClick={this.handleClick} - onKeyPress={this.handleKeyDown} tabIndex={tabIndex}>
{ @@ -563,17 +564,12 @@ export class ExpandableTile extends Component { className={`${prefix}--tile-content`}> {childrenAsArray[0]}
- +
{childrenAsArray[1]}
- + ); } }