diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js index 1b3c568b7cff2f..461f51551362da 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 (
  • ', () => { }); describe('aria-selected', () => { - it('should have the attribute `aria-selected=false` if not selected', () => { - const { getByTestId } = render( - - - , - ); + describe('single-select', () => { + it('should not have the attribute `aria-selected` if not selected', () => { + const { getByTestId } = render( + + + , + ); - 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( - - - , - ); + it('should have the attribute `aria-selected=true` if selected', () => { + const { getByTestId } = render( + + + , + ); - 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( - - - , - ); + describe('multi-select', () => { + it('should have the attribute `aria-selected=false` if not selected', () => { + const { getByTestId } = render( + + + , + ); + + expect(getByTestId('test')).to.have.attribute('aria-selected', 'false'); + }); + it('should have the attribute `aria-selected=true` if selected', () => { + const { getByTestId } = render( + + + , + ); + + expect(getByTestId('test')).to.have.attribute('aria-selected', 'true'); + }); + + it('should have the attribute `aria-selected` if disableSelection is true', () => { + const { getByTestId } = render( + + + , + ); - expect(getByTestId('test')).to.not.have.attribute('aria-selected'); + expect(getByTestId('test')).to.have.attribute('aria-selected', 'false'); + }); }); }); @@ -695,7 +718,7 @@ describe('', () => { ); 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'); }); @@ -709,7 +732,7 @@ describe('', () => { , ); - 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('', () => { const { getByTestId, getByText } = render(); - 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'); });