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 }) => (
*/
'': PropTypes.any
};
@@ -38,7 +38,8 @@ AccordionContent.defaultProps = {
className: '',
id: '',
isHidden: false,
- isFixed: false
+ isFixed: false,
+ 'aria-label': ''
};
export default AccordionContent;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.d.ts b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.d.ts
index 7565096e063..57f4dbc7158 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.d.ts
@@ -3,9 +3,6 @@ import { Omit } from '../../typeUtils';
export interface AccordionToggleProps extends Omit, 'aria-labelledby' | 'aria-label' | 'id'> {
isExpanded: boolean;
- 'aria-controls'?: string;
- 'aria-labelledby'?: string;
- 'aria-label'?: string;
id: string;
}
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
index 74a9ec319de..6ceb8d0c81b 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
+++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
@@ -3,13 +3,9 @@ import PropTypes from 'prop-types';
import { css } from '@patternfly/react-styles';
import { AngleRightIcon } from '@patternfly/react-icons';
import styles from '@patternfly/patternfly/components/Accordion/accordion.css';
-import { Button } from '@patternfly/react-core';
const AccordionToggle = ({
className,
- 'aria-controls': ariaControls,
- 'aria-label': ariaLabel,
- 'aria-labelledby': ariaLabelledBy,
id,
isExpanded,
children,
@@ -17,21 +13,18 @@ const AccordionToggle = ({
}) => (
-
{children}
-
+
);
@@ -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';