fix(aria): make aria-* component props consistent

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(
       <AboutModalContainer
         {...this.props}
-        ariaLabelledbyId={this.ariaLabelledbyId}
-        ariaDescribedById={this.ariaDescribedById}
+        aria-labelledby={this.ariaLabelledBy}
+        aria-describedby={this.ariaDescribedBy}
       />,
       this.container
     );

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(<AboutModal {...props}> Test About Modal </AboutModal>);
   const second = shallow(<AboutModal {...props}> Test About Modal </AboutModal>);
-  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', () => {

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 (
     <Backdrop>
       <Bullseye>
-        <AboutModalBox className={className} aria-labelledby={ariaLabelledbyId} aria-describedby={ariaDescribedById}>
+        <AboutModalBox className={className} aria-labelledby={ariaLabelledBy} aria-describedby={ariaDescribedBy}>
           <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
           <AboutModalBoxCloseButton onClose={onClose} />
-          <AboutModalBoxHeader id={ariaLabelledbyId} productName={productName} />
-          <AboutModalBoxContent {...props} trademark={trademark} id={ariaDescribedById}>
+          <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />
+          <AboutModalBoxContent {...props} trademark={trademark} id={ariaDescribedBy}>
             {children}
           </AboutModalBoxContent>
           <AboutModalBoxHero />

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(<AboutModalContainer {...props}>This is ModalBox content</AboutModalContainer>);

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"
   >
     <AboutModalBox
-      aria-describedby="ariaDescribedById"
-      aria-labelledby="ariaLablledbyId"
+      aria-describedby="ariaDescribedBy"
+      aria-labelledby="ariaLabelledBy"
       className=""
     >
       <AboutModalBoxBrand
@@ -24,12 +24,12 @@ exports[`About Modal Container Test isOpen 1`] = `
       />
       <AboutModalBoxHeader
         className=""
-        id="ariaLablledbyId"
+        id="ariaLabelledBy"
         productName="Product Name"
       />
       <AboutModalBoxContent
         className=""
-        id="ariaDescribedById"
+        id="ariaDescribedBy"
         title="Test Modal Container title"
         trademark="Trademark and copyright information here"
       >

packages/patternfly-4/react-core/src/components/Alert/Alert.js

@@ -72,7 +72,9 @@ const Alert = ({
         </div>
       )}
       {action && (
-        <div className={css(styles.alertAction, className)}>{React.cloneElement(action, { title, variantLabel })}</div>
+        <div className={css(styles.alertAction, className)}>
+          {React.cloneElement(action, { title, variantLabel })}
+        </div>
       )}
     </div>
   );

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
+}) => (
   <Button
     variant={ButtonVariant.plain}
     onClick={onClose}

packages/patternfly-4/react-core/src/components/Alert/AlertActionLink.js

@@ -16,7 +16,14 @@ const defaultProps = {
   className: ''
 };
 
-const AlertActionLink = ({ className, children, ...props }) => (
+const AlertActionLink = ({
+  className,
+  title,
+  variant,
+  variantLabel,
+  children,
+  ...props
+}) => (
   <Button variant={ButtonVariant.link} {...props}>
     {children}
   </Button>

packages/patternfly-4/react-core/src/components/Alert/AlertBody.js

@@ -10,21 +10,21 @@ const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   onClose: PropTypes.func,
-  closeButtonAriaLabel: PropTypes.string
+  'aria-label': PropTypes.string
 };
 
 const defaultProps = {
   title: null,
   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': ariaLabel, ...props }) => (
   <div {...props} className={className}>
     {onClose && (
-      <Button variant={ButtonVariant.plain} onClick={onClose} aria-label={closeButtonAriaLabel}>
+      <Button variant={ButtonVariant.plain} onClick={onClose} aria-label={ariaLabel}>
         <TimesIcon />
       </Button>
     )}