diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.js b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.js index 5d96033afc7..cb61dcad9f6 100644 --- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.js +++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.js @@ -52,8 +52,8 @@ class AboutModal extends React.Component { static propTypes = propTypes; static defaultProps = defaultProps; - ariaLabelledbyId = `pf-about-modal-title-${currentId++}`; - ariaDescribedById = `pf-about-modal-content-${currentId++}`; + ariaLabelledBy = `pf-about-modal-title-${currentId++}`; + ariaDescribedBy = `pf-about-modal-content-${currentId++}`; handleEscKeyClick = event => { if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) { @@ -96,8 +96,8 @@ class AboutModal extends React.Component { return ReactDOM.createPortal( , this.container ); diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.test.js b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.test.js index d98f61c08d0..43cd1c7c2f4 100644 --- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.test.js +++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.test.js @@ -48,11 +48,11 @@ test('modal does not call onClose for esc key if it is not open', () => { expect(props.onClose).not.toBeCalled(); }); -test('Each modal is given new ariaDescribedById and ariaLablledbyId', () => { +test('Each modal is given new aria-describedby and aria-labelledby', () => { const first = shallow( Test About Modal ); const second = shallow( Test About Modal ); - expect(first.props().ariaLabelledbyId).not.toBe(second.props().ariaLabelledbyId); - expect(first.props().ariaDescribedById).not.toBe(second.props().ariaDescribedById); + expect(first.props()['aria-labelledby']).not.toBe(second.props()['aria-labelledby']); + expect(first.props()['aria-describedby']).not.toBe(second.props()['aria-describedby']); }); test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => { diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.js b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.js index 6763067c314..40f988413ee 100644 --- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.js +++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.js @@ -31,9 +31,9 @@ const propTypes = { /** the alternate text of the Logo image. */ logoImageAlt: PropTypes.string.isRequired, /** id to use for About Modal Box aria labeled by */ - ariaLabelledbyId: PropTypes.string.isRequired, + 'aria-labelledby': PropTypes.string.isRequired, /** id to use for About Modal Box aria described by */ - ariaDescribedById: PropTypes.string.isRequired, + 'aria-describedby': PropTypes.string.isRequired, /** Additional props are spread to the AboutModalBoxContent component */ '': PropTypes.any }; @@ -55,8 +55,8 @@ const ModalContent = ({ brandImageAlt, logoImageSrc, logoImageAlt, - ariaLabelledbyId, - ariaDescribedById, + 'aria-labelledby': ariaLabelledBy, + 'aria-describedby': ariaDescribedBy, ...props }) => { if (!isOpen) { @@ -65,11 +65,11 @@ const ModalContent = ({ return ( - + - - + + {children} diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.test.js b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.test.js index 2c396770fcf..620fedbea60 100644 --- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.test.js +++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.test.js @@ -10,8 +10,8 @@ const props = { brandImageAlt: 'Brand Image', logoImageSrc: 'logoImg...', logoImageAlt: 'AboutModal Logo', - ariaLabelledbyId: 'ariaLablledbyId', - ariaDescribedById: 'ariaDescribedById' + 'aria-labelledby': 'ariaLabelledBy', + 'aria-describedby': 'ariaDescribedBy' }; test('About Modal Container Test simple', () => { const view = shallow(This is ModalBox content); diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.js.snap b/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.js.snap index 666d84a0590..358c4a98930 100644 --- a/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.js.snap @@ -9,8 +9,8 @@ exports[`About Modal Container Test isOpen 1`] = ` component="div" > diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.js b/packages/patternfly-4/react-core/src/components/Alert/Alert.js index c63389e714c..969e54a5acd 100644 --- a/packages/patternfly-4/react-core/src/components/Alert/Alert.js +++ b/packages/patternfly-4/react-core/src/components/Alert/Alert.js @@ -33,7 +33,7 @@ const propTypes = { }; const defaultProps = { - 'aria-label': undefined, + 'aria-label': '', action: null, children: '', className: '', @@ -72,7 +72,9 @@ const Alert = ({ )} {action && ( -
{React.cloneElement(action, { title, variantLabel })}
+
+ {React.cloneElement(action, { title, variantLabel })} +
)} ); diff --git a/packages/patternfly-4/react-core/src/components/Alert/AlertActionCloseButton.js b/packages/patternfly-4/react-core/src/components/Alert/AlertActionCloseButton.js index 7ff94816628..55803031178 100644 --- a/packages/patternfly-4/react-core/src/components/Alert/AlertActionCloseButton.js +++ b/packages/patternfly-4/react-core/src/components/Alert/AlertActionCloseButton.js @@ -20,7 +20,15 @@ const defaultProps = { onClose: () => undefined }; -const AlertActionCloseButton = ({ className, onClose, 'aria-label': ariaLabel, title, variantLabel, ...props }) => ( +const AlertActionCloseButton = ({ + className, + onClose, + 'aria-label': ariaLabel, + title, + variant, + variantLabel, + ...props +}) => ( diff --git a/packages/patternfly-4/react-core/src/components/Alert/AlertBody.js b/packages/patternfly-4/react-core/src/components/Alert/AlertBody.js index d32690603de..9991522d52b 100644 --- a/packages/patternfly-4/react-core/src/components/Alert/AlertBody.js +++ b/packages/patternfly-4/react-core/src/components/Alert/AlertBody.js @@ -10,7 +10,7 @@ const propTypes = { children: PropTypes.node, className: PropTypes.string, onClose: PropTypes.func, - closeButtonAriaLabel: PropTypes.string + 'aria-label-button': PropTypes.string }; const defaultProps = { @@ -18,13 +18,13 @@ const defaultProps = { children: '', className: '', onClose: undefined, - closeButtonAriaLabel: 'Close' + 'aria-label': 'Close' }; -const AlertBody = ({ title, className, children, onClose, closeButtonAriaLabel, ...props }) => ( +const AlertBody = ({ title, className, children, onClose, 'aria-label-button': ariaLabel, ...props }) => (
{onClose && ( - )} diff --git a/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap b/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap index 2e252bce718..2704dfe582b 100644 --- a/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.js.snap @@ -9,13 +9,14 @@ exports[`Alert - danger Action Close Button 1`] = ` onClose={[MockFunction]} /> } + aria-label="" className="" title="" variant="danger" variantLabel={null} >
} + aria-label="" className="" title="" variant="danger" variantLabel={null} >
@@ -251,13 +249,14 @@ exports[`Alert - danger Action and Title 1`] = ` test } + aria-label="" className="" title="Some title" variant="danger" variantLabel={null} >
@@ -439,10 +434,8 @@ exports[`Alert - danger Custom aria label 1`] = ` isDisabled={false} isFocus={false} isHover={false} - title="Some title" type="button" variant="link" - variantLabel="Danger" > @@ -466,13 +457,14 @@ exports[`Alert - danger Custom aria label 1`] = ` exports[`Alert - danger Description 1`] = `
} + aria-label="" className="" title="" variant="info" variantLabel={null} >
} + aria-label="" className="" title="" variant="info" variantLabel={null} >
@@ -847,13 +838,14 @@ exports[`Alert - info Action and Title 1`] = ` test } + aria-label="" className="" title="Some title" variant="info" variantLabel={null} >
@@ -1035,10 +1023,8 @@ exports[`Alert - info Custom aria label 1`] = ` isDisabled={false} isFocus={false} isHover={false} - title="Some title" type="button" variant="link" - variantLabel="Info" > @@ -1062,13 +1046,14 @@ exports[`Alert - info Custom aria label 1`] = ` exports[`Alert - info Description 1`] = `
} + aria-label="" className="" title="" variant="success" variantLabel={null} >
} + aria-label="" className="" title="" variant="success" variantLabel={null} >
@@ -1443,13 +1427,14 @@ exports[`Alert - success Action and Title 1`] = ` test } + aria-label="" className="" title="Some title" variant="success" variantLabel={null} >
@@ -1631,10 +1612,8 @@ exports[`Alert - success Custom aria label 1`] = ` isDisabled={false} isFocus={false} isHover={false} - title="Some title" type="button" variant="link" - variantLabel="Success" > @@ -1658,13 +1635,14 @@ exports[`Alert - success Custom aria label 1`] = ` exports[`Alert - success Description 1`] = `
} + aria-label="" className="" title="" variant="warning" variantLabel={null} >
} + aria-label="" className="" title="" variant="warning" variantLabel={null} >
@@ -2039,13 +2016,14 @@ exports[`Alert - warning Action and Title 1`] = ` test } + aria-label="" className="" title="Some title" variant="warning" variantLabel={null} >
@@ -2227,10 +2201,8 @@ exports[`Alert - warning Custom aria label 1`] = ` isDisabled={false} isFocus={false} isHover={false} - title="Some title" type="button" variant="link" - variantLabel="Warning" > @@ -2254,13 +2224,14 @@ exports[`Alert - warning Custom aria label 1`] = ` exports[`Alert - warning Description 1`] = `
@@ -69,16 +67,16 @@ class ApplicationLauncher extends React.Component { }} > {Children.map( - + - , + , oneToggle => cloneElement(oneToggle, { parentRef: this.parentRef, id: randomId, isOpen, isPlain: true, - ariaHasPopup: true, + 'aria-haspopup': 'true', onEnter: this.onEnter }) )} diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherToggle.js similarity index 100% rename from packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js rename to packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherToggle.js diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/Chip.js b/packages/patternfly-4/react-core/src/components/ChipGroup/Chip.js index ba3f056bdd0..ba86993de40 100644 --- a/packages/patternfly-4/react-core/src/components/ChipGroup/Chip.js +++ b/packages/patternfly-4/react-core/src/components/ChipGroup/Chip.js @@ -7,6 +7,30 @@ import { TimesCircleIcon } from '@patternfly/react-icons'; import styles from '@patternfly/patternfly/components/Chip/chip.css'; import GenerateId from '../../helpers/GenerateId/GenerateId'; +const propTypes = { + /** Content rendered inside the chip text */ + children: PropTypes.node, + /** Aria Label for close button */ + 'aria-label-button': PropTypes.string, + /** Additional classes added to the chip item */ + className: PropTypes.string, + /** Flag indicating if the chip has overflow */ + isOverflowChip: PropTypes.bool, + /** Function that is called when clicking on the chip button */ + onClick: PropTypes.func, + /** Position of the tooltip which is displayed if text is longer */ + tooltipPosition: PropTypes.oneOf(Object.values(TooltipPosition)) +}; + +const defaultProps = { + children: null, + 'aria-label-button': 'close', + className: '', + isOverflowChip: false, + tooltipPosition: 'top', + onClick: () => { } +}; + class Chip extends React.Component { span = React.createRef(); state = { isTooltipVisible: false }; @@ -29,7 +53,7 @@ class Chip extends React.Component { }; renderChip = randomId => { - const { children, closeBtnAriaLabel, tooltipPosition, className, onClick } = this.props; + const { children, 'aria-label-button': ariaLabel, tooltipPosition, className, onClick } = this.props; if (this.state.isTooltipVisible) { return ( @@ -39,7 +63,7 @@ class Chip extends React.Component { @@ -56,7 +80,7 @@ class Chip extends React.Component { @@ -73,28 +97,8 @@ class Chip extends React.Component { ); } } -Chip.propTypes = { - /** Content rendered inside the chip text */ - children: PropTypes.node, - /** Aria Label for close button */ - closeBtnAriaLabel: PropTypes.string, - /** Additional classes added to the chip item */ - className: PropTypes.string, - /** Flag indicating if the chip has overflow */ - isOverflowChip: PropTypes.bool, - /** Function that is called when clicking on the chip button */ - onClick: PropTypes.func, - /** Position of the tooltip which is displayed if text is longer */ - tooltipPosition: PropTypes.oneOf(Object.values(TooltipPosition)) -}; -Chip.defaultProps = { - children: null, - closeBtnAriaLabel: 'close', - className: '', - isOverflowChip: false, - tooltipPosition: 'top', - onClick: () => {} -}; +Chip.propTypes = propTypes; +Chip.defaultProps = defaultProps; export default Chip; diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/ChipButton.js b/packages/patternfly-4/react-core/src/components/ChipGroup/ChipButton.js index 73a3a37e1d9..443c9e51f25 100644 --- a/packages/patternfly-4/react-core/src/components/ChipGroup/ChipButton.js +++ b/packages/patternfly-4/react-core/src/components/ChipGroup/ChipButton.js @@ -1,18 +1,10 @@ import React from 'react'; -import { css } from '@patternfly/react-styles'; import PropTypes from 'prop-types'; -import styles from '@patternfly/patternfly/components/Chip/chip.css'; import { Button } from '../Button'; -const ChipButton = ({ ariaLabel, children, className, onClick, ...props }) => ( - -); - -ChipButton.propTypes = { +const propTypes = { /** Aria label for chip button */ - ariaLabel: PropTypes.string, + 'aria-label': PropTypes.string, /** Content rendered inside the chip item */ children: PropTypes.node, /** Additional classes added to the chip item */ @@ -21,11 +13,20 @@ ChipButton.propTypes = { onClick: PropTypes.func }; -ChipButton.defaultProps = { - ariaLabel: 'close', +const defaultProps = { + 'aria-label': 'close', children: null, className: '', - onClick: () => {} + onClick: () => { } }; +const ChipButton = ({ children, ...props }) => ( + +); + +ChipButton.propTypes = propTypes; +ChipButton.defaultProps = defaultProps; + export default ChipButton; diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.js b/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.js index 7a613a52485..3af35536e33 100644 --- a/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.js +++ b/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.js @@ -5,6 +5,29 @@ import styles from '@patternfly/patternfly/components/ChipGroup/chip-group.css'; import { Chip } from '@patternfly/react-core'; import { fillTemplate } from '../../helpers'; +const propTypes = { + /** Content rendered inside the chip text */ + children: PropTypes.node, + /** Additional classes added to the chip item */ + className: PropTypes.string, + /** Customizable "Show Less" text string */ + expandedText: PropTypes.string, + /** + * Customizeable template string. Use variable "${remaining}" for the overflow chip count. + */ + collapsedText: PropTypes.string, + /** Flag for grouping with a toolbar & category name */ + withToolbar: PropTypes.bool +}; + +const defaultProps = { + children: null, + className: '', + expandedText: 'Show Less', + collapsedText: '${remaining} more', + withToolbar: false +}; + class ChipGroup extends React.Component { state = { isOpen: false @@ -64,27 +87,7 @@ const InnerChipGroup = props => { ); }; -ChipGroup.propTypes = { - /** Content rendered inside the chip text */ - children: PropTypes.node, - /** Additional classes added to the chip item */ - className: PropTypes.string, - /** Customizable "Show Less" text string */ - expandedText: PropTypes.string, - /** - * Customizeable template string. Use variable "${remaining}" for the overflow chip count. - */ - collapsedText: PropTypes.string, - /** Flag for grouping with a toolbar & category name */ - withToolbar: PropTypes.bool -}; - -ChipGroup.defaultProps = { - children: null, - className: '', - expandedText: 'Show Less', - collapsedText: '${remaining} more', - withToolbar: false -}; +ChipGroup.propTypes = propTypes; +ChipGroup.defaultProps = defaultProps; export default ChipGroup; diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/__snapshots__/ChipGroup.test.js.snap b/packages/patternfly-4/react-core/src/components/ChipGroup/__snapshots__/ChipGroup.test.js.snap index 461b12432b1..a4c78a09250 100644 --- a/packages/patternfly-4/react-core/src/components/ChipGroup/__snapshots__/ChipGroup.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/ChipGroup/__snapshots__/ChipGroup.test.js.snap @@ -13,8 +13,8 @@ exports[`ChipGroup chip group default 1`] = ` withToolbar={false} > {}, - onSelect: () => {}, + onToggle: () => { }, + onSelect: () => { }, screenReaderLabel: '', toggleText: '', - searchButtonAriaLabel: 'Search menu items', + 'aria-label-search': 'Search menu items', searchInputValue: '', - onSearchInputChange: () => {}, + onSearchInputChange: () => { }, searchInputPlaceholder: 'Search', - onSearchButtonClick: () => {} + onSearchButtonClick: () => { } }; class ContextSelector extends React.Component { @@ -79,7 +79,7 @@ class ContextSelector extends React.Component { onSelect, screenReaderLabel, toggleText, - searchButtonAriaLabel, + 'aria-label-search': ariaLabel, searchInputValue, onSearchInputChange, searchInputPlaceholder, @@ -121,7 +121,7 @@ class ContextSelector extends React.Component { /> ); diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js b/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js index a14bca29525..823299fd1a5 100644 --- a/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js +++ b/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js @@ -4,6 +4,24 @@ import PropTypes from 'prop-types'; import styles from '@patternfly/patternfly/components/DataList/data-list.css'; import { Dropdown, DropdownPosition, KebabToggle } from '../Dropdown'; +const propTypes = { + /** Content rendered inside the DataList list */ + children: PropTypes.node, + /** Additional classes added to the DataList list */ + className: PropTypes.string, + /** DataList actions to show in the dropdown */ + actions: PropTypes.arrayOf(PropTypes.node).isRequired, + /** Identify the DataList toggle number */ + id: PropTypes.string.isRequired, + /** Additional props are spread to the container
*/ + '': PropTypes.any +}; + +const defaultProps = { + children: null, + className: '' +}; + class DataListAction extends React.Component { constructor(props) { super(props); @@ -28,48 +46,27 @@ class DataListAction extends React.Component { actions, className, id, - 'aria-label': ariaLabel, - 'aria-labelledby': ariaLabelledBy, ...props } = this.props; return children ? ( children ) : ( -
- } - dropdownItems={actions} - /> -
- ); +
+ } + dropdownItems={actions} + /> +
+ ); } } -DataListAction.propTypes = { - /** Content rendered inside the DataList list */ - children: PropTypes.node, - /** Additional classes added to the DataList list */ - className: PropTypes.string, - /** DataList actions to show in the dropdown */ - actions: PropTypes.arrayOf(PropTypes.node).isRequired, - /** Identify the DataList toggle number */ - id: PropTypes.string.isRequired, - /** Adds accessible text to the DataList item */ - 'aria-labelledby': PropTypes.string.isRequired, - /** Adds accessible text to the DataList item */ - 'aria-label': PropTypes.string.isRequired, - /** Additional props are spread to the container
*/ - '': PropTypes.any -}; - -DataListAction.defaultProps = { - children: null, - className: '' -}; +DataListAction.propTypes = propTypes; +DataListAction.defaultProps = defaultProps; export default DataListAction; diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListContent.js b/packages/patternfly-4/react-core/src/components/DataList/DataListContent.js index 551ef6dce55..0137fb884f4 100644 --- a/packages/patternfly-4/react-core/src/components/DataList/DataListContent.js +++ b/packages/patternfly-4/react-core/src/components/DataList/DataListContent.js @@ -3,19 +3,7 @@ import PropTypes from 'prop-types'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/patternfly/components/DataList/data-list.css'; -const DataListContent = ({ className, children, id, isHidden, 'aria-label': ariaLabel, rowid, ...props }) => ( - -); - -DataListContent.propTypes = { +const propTypes = { /** Content rendered inside the DataList item */ children: PropTypes.node, /** Additional classes added to the DataList cell */ @@ -24,16 +12,30 @@ DataListContent.propTypes = { id: PropTypes.string, /** Flag to show if the expanded content of the DataList item is visible */ isHidden: PropTypes.bool, - /** Adds accessible text to the DataList toggle */ + /** Adds accessible text to the expandable context section */ 'aria-label': PropTypes.string.isRequired, /** Additional props are spread to the container
*/ '': PropTypes.any }; -DataListContent.defaultProps = { +const defaultProps = { className: '', id: '', isHidden: false }; +const DataListContent = ({ className, children, id, isHidden, rowid, ...props }) => ( + +); + +DataListContent.propTypes = propTypes; +DataListContent.defaultProps = defaultProps; + export default DataListContent; diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListItem.js b/packages/patternfly-4/react-core/src/components/DataList/DataListItem.js index 58fb7c791fa..d434fb7b934 100644 --- a/packages/patternfly-4/react-core/src/components/DataList/DataListItem.js +++ b/packages/patternfly-4/react-core/src/components/DataList/DataListItem.js @@ -3,21 +3,7 @@ import { css } from '@patternfly/react-styles'; import PropTypes from 'prop-types'; import styles from '@patternfly/patternfly/components/DataList/data-list.css'; -const DataListItem = ({ children, className, isExpanded, 'aria-labelledby': ariaLabelledBy, ...props }) => ( -
  • - {React.Children.map(children, child => - React.isValidElement(child) && React.cloneElement(child, { - rowid: ariaLabelledBy - }) - )} -
    • -); - -DataListItem.propTypes = { +const propTypes = { /** Flag to show if the expanded content of the DataList item is visible */ isExpanded: PropTypes.bool, /** Content rendered inside the DataList item */ @@ -30,10 +16,27 @@ DataListItem.propTypes = { '': PropTypes.any }; -DataListItem.defaultProps = { +const defaultProps = { isExpanded: false, children: null, className: '' }; +const DataListItem = ({ children, className, isExpanded, 'aria-labelledby': ariaLabelledBy, ...props }) => ( +
  • + {React.Children.map(children, child => + React.isValidElement(child) && React.cloneElement(child, { + rowid: ariaLabelledBy + }) + )} +
    • +); + +DataListItem.propTypes = propTypes; +DataListItem.defaultProps = defaultProps; + export default DataListItem; diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListToggle.js b/packages/patternfly-4/react-core/src/components/DataList/DataListToggle.js index a5820af0344..65d857365be 100644 --- a/packages/patternfly-4/react-core/src/components/DataList/DataListToggle.js +++ b/packages/patternfly-4/react-core/src/components/DataList/DataListToggle.js @@ -5,41 +5,24 @@ import { AngleRightIcon } from '@patternfly/react-icons'; import styles from '@patternfly/patternfly/components/DataList/data-list.css'; import { Button, ButtonVariant } from '../Button'; -const DataListToggle = ({ - className, - isExpanded, - 'aria-controls': ariaControls, - 'aria-label': ariaLabel, - 'aria-labelledby': ariaLabelledBy, - rowid, - id, - ...props -}) => ( -
    - -
    -); - -DataListToggle.propTypes = { +const propTypes = { /** Additional classes added to the DataList cell */ className: PropTypes.string, /** Flag to show if the expanded content of the DataList item is visible */ isExpanded: PropTypes.bool, /** Identify the DataList toggle number */ id: PropTypes.string.isRequired, - /** Adds accessible text to the DataList toggle */ - 'aria-labelledby': PropTypes.string, - /** Adds accessible text to the DataList toggle */ - 'aria-label': PropTypes.string, /** 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, + /** Adds accessible text to the DataList toggle */ + 'aria-label': PropTypes.string, + /** Adds accessible text to the DataList toggle */ + 'aria-labelledby': PropTypes.string, /** Additional props are spread to the container
    */ '': PropTypes.any }; -DataListToggle.defaultProps = { +const defaultProps = { 'aria-controls': '', 'aria-label': 'Details', 'aria-labelledby': '', @@ -47,4 +30,37 @@ DataListToggle.defaultProps = { isExpanded: false }; +const DataListToggle = ({ + className, + isExpanded, + 'aria-controls': ariaControls, + 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledBy, + rowid, + id, + ...props +}) => { + if (ariaLabel === "Details") { + ariaLabelledBy = `${rowid} ${id}`; + } + + return ( +
    + +
    + ); +} + +DataListToggle.propTypes = propTypes; +DataListToggle.defaultProps = defaultProps; + export default DataListToggle; diff --git a/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap b/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap index c5fbc4809b0..19b7893f05a 100644 --- a/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap @@ -37,6 +37,8 @@ exports[`DataList DataListAction button 1`] = ` exports[`DataList DataListAction dropdown 1`] = `
    Link, diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/KebabToggle.js b/packages/patternfly-4/react-core/src/components/Dropdown/KebabToggle.js index 56d50d01563..7f1e40860d5 100644 --- a/packages/patternfly-4/react-core/src/components/Dropdown/KebabToggle.js +++ b/packages/patternfly-4/react-core/src/components/Dropdown/KebabToggle.js @@ -3,15 +3,7 @@ import PropTypes from 'prop-types'; import { EllipsisVIcon } from '@patternfly/react-icons'; import Toggle from './Toggle'; -const defaultAriaLabel = 'Actions'; - -const Kebab = ({ ...props }) => ( - - - -); - -Kebab.propTypes = { +const propTypes = { /** HTML ID of dropdown toggle */ id: PropTypes.string, /** Anything which can be rendered as dropdown toggle */ @@ -39,12 +31,13 @@ Kebab.propTypes = { /** Additional props are spread to the container component */ '': PropTypes.any }; -Kebab.defaultProps = { + +const defaultProps = { id: '', children: null, className: '', isOpen: false, - 'aria-label': defaultAriaLabel, + 'aria-label': 'Actions', parentRef: null, isFocused: false, isHovered: false, @@ -54,4 +47,13 @@ Kebab.defaultProps = { onToggle: Function.prototype }; +const Kebab = ({ ...props }) => ( + + + +); + +Kebab.propTypes = propTypes; +Kebab.defaultProps = defaultProps; + export default Kebab; diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js b/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js index 1cde485c004..67341752872 100644 --- a/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js +++ b/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js @@ -35,13 +35,13 @@ const defaultProps = { children: null, className: '', isOpen: false, + onToggle: Function.prototype, parentRef: null, isFocused: false, isHovered: false, isActive: false, isDisabled: false, - isPlain: false, - onToggle: Function.prototype + isPlain: false }; class DropdownToggle extends Component { @@ -99,7 +99,6 @@ class DropdownToggle extends Component { isHovered, isDisabled, isPlain, - ariaHasPopup, onToggle, onEnter, parentRef, @@ -126,7 +125,6 @@ class DropdownToggle extends Component { type={type || 'button'} onClick={_event => onToggle && onToggle(!isOpen)} aria-expanded={isOpen} - aria-haspopup={ariaHasPopup} onKeyDown={this.onKeyDown} disabled={isDisabled} > diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap index 64b28d9249e..c7bdd404022 100644 --- a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap @@ -29,8 +29,8 @@ exports[`KebabToggle basic 1`] = ` className="pf-c-dropdown pf-m-expanded" >