diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js index 94a8281e343..d294f2e3501 100644 --- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js +++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js @@ -15,14 +15,15 @@ Accordion.propTypes = { /** Additional classes added to the Accordion */ className: PropTypes.string, /** Adds accessible text to the Accordion */ - 'aria-label': PropTypes.string.isRequired, + 'aria-label': PropTypes.string, /** Additional props are spread to the container
*/ '': PropTypes.any }; Accordion.defaultProps = { children: null, - className: '' + className: '', + 'aria-label': '' }; export default Accordion; diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md.tmp b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md similarity index 85% rename from packages/patternfly-4/react-core/src/components/Accordion/Accordion.md.tmp rename to packages/patternfly-4/react-core/src/components/Accordion/Accordion.md index f92e3665476..1e8805c23b4 100644 --- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md.tmp +++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md @@ -27,18 +27,16 @@ class SimpleAccordion extends React.Component { }; return ( - - + + toggle('ex-toggle1')} isExpanded={this.state.expanded.includes('ex-toggle1')} id="ex-toggle1" - aria-controls="ex-expand1" > Item One @@ -48,17 +46,15 @@ class SimpleAccordion extends React.Component {

- + toggle('ex-toggle2')} isExpanded={this.state.expanded.includes('ex-toggle2')} id="ex-toggle2" - aria-controls="ex-expand2" > Item Two @@ -68,34 +64,30 @@ class SimpleAccordion extends React.Component {

- + toggle('ex-toggle3')} isExpanded={this.state.expanded.includes('ex-toggle3')} id="ex-toggle3" - aria-controls="ex-expand3" > Item Three

Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

- + toggle('ex-toggle4')} isExpanded={this.state.expanded.includes('ex-toggle4')} id="ex-toggle4" - aria-controls="ex-expand4" > Item Four @@ -110,17 +102,15 @@ class SimpleAccordion extends React.Component {

- + toggle('ex-toggle5')} isExpanded={this.state.expanded.includes('ex-toggle5')} id="ex-toggle5" - aria-controls="ex-expand5" > Item Five @@ -156,18 +146,16 @@ class FixedAccordion extends React.Component { }; return ( - - + + toggle('ex-toggle1')} isExpanded={this.state.expanded.includes('ex-toggle1')} id="ex-toggle1" - aria-controls="ex-expand1" > Item One - + toggle('ex-toggle2')} isExpanded={this.state.expanded.includes('ex-toggle2')} id="ex-toggle2" - aria-controls="ex-expand2" > Item Two - + toggle('ex-toggle3')} isExpanded={this.state.expanded.includes('ex-toggle3')} id="ex-toggle3" - aria-controls="ex-expand3" > Item Three Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

- + toggle('ex-toggle4')} isExpanded={this.state.expanded.includes('ex-toggle4')} id="ex-toggle4" - aria-controls="ex-expand4" > Item Four - + toggle('ex-toggle5')} isExpanded={this.state.expanded.includes('ex-toggle5')} id="ex-toggle5" - aria-controls="ex-expand5" > Item Five { test('Accordion default', () => { const view = shallow(); - expect(view).toMatchSnapshot(); + expect(view.render()).toMatchSnapshot(); }); - test('Toggle default with aria label', () => { + test('It should pass optional aria props', () => { const view = mount( ); - - expect(view.find(Button).props()['aria-label']).toBe('Toggle details for'); - expect(view.find(Button).props()['aria-labelledby']).toBe(null); - expect(view.find(Button).props()['aria-expanded']).toBe(false); - expect(view.find(Button).props().id).toBe('ex-toggle2'); - expect(view.find(Button).props().id).toBe('ex-toggle2'); + const button = view.find('button[id="ex-toggle2"]').getElement(); + expect(button.props['aria-label']).toBe('Toggle details for'); + expect(button.props['aria-labelledby']).toBe('ex-toggle2 ex-item2'); + expect(button.props['aria-expanded']).toBe(false); }); test('Toggle expanded', () => { const view = mount(); - expect(view.find(Button).props()['aria-expanded']).toBe(true); + const button = view.find('button[id="ex-toggle2"]').getElement(); + expect(button.props['aria-expanded']).toBe(true); + expect(button.props.className).toContain('pf-m-expanded'); }); }); diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.js b/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.js index 8743b077fea..cdeb55cdbdc 100644 --- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.js +++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.js @@ -6,7 +6,7 @@ import styles from '@patternfly/patternfly/components/Accordion/accordion.css'; const AccordionContent = ({ className, children, id, isHidden, isFixed, 'aria-label': ariaLabel, ...props }) => (

- +

); @@ -43,20 +36,11 @@ AccordionToggle.propTypes = { isExpanded: PropTypes.bool, /** Identify the Accordion toggle number */ id: PropTypes.string.isRequired, - /** Adds accessible text to the Accordion toggle */ - 'aria-labelledby': PropTypes.string.isRequired, - /** Adds accessible text to the Accordion toggle */ - 'aria-label': PropTypes.string.isRequired, - /** Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them. */ - 'aria-controls': PropTypes.string, /** Additional props are spread to the container
*/ '': PropTypes.any }; AccordionToggle.defaultProps = { - 'aria-controls': '', - 'aria-label': 'Details', - 'aria-labelledby': '', className: '', isExpanded: false }; diff --git a/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.js.snap b/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.js.snap index 80955249858..8b5b87cfc40 100644 --- a/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.js.snap @@ -3,6 +3,6 @@ exports[`Accordion Accordion default 1`] = `
`; diff --git a/packages/patternfly-4/react-core/src/components/index.ts b/packages/patternfly-4/react-core/src/components/index.ts index 2f6c23d21b8..a5985cb6753 100644 --- a/packages/patternfly-4/react-core/src/components/index.ts +++ b/packages/patternfly-4/react-core/src/components/index.ts @@ -1,6 +1,6 @@ /** Keep alphabetically sorted */ export * from './AboutModal'; -// export * from './Accordion'; Don't release this yet +export * from './Accordion'; export * from './Alert'; export * from './ApplicationLauncher'; export * from './Avatar';