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-lablledby', () => {
   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,11 +20,11 @@ const defaultProps = {
   onClose: () => undefined
 };
 
-const AlertActionCloseButton = ({ className, onClose, 'aria-label': ariaLabel, title, variantLabel, ...props }) => (
+const AlertActionCloseButton = ({ className, onClose, variantLabel, 'aria-label': ariaLabel, title, variant, ...props }) => (
   <Button
     variant={ButtonVariant.plain}
     onClick={onClose}
-    aria-label={ariaLabel === '' ? `Close ${variantLabel} alert: ${title}` : ariaLabel}
+    aria-label={ariaLabel === '' ? `Close ${variant} alert: ${title}` : ariaLabel}
     {...props}
   >
     <TimesIcon />

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

@@ -16,7 +16,7 @@ const defaultProps = {
   className: ''
 };
 
-const AlertActionLink = ({ className, children, ...props }) => (
+const AlertActionLink = ({ className, 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>
     )}

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

@@ -221,7 +221,6 @@ exports[`Alert - danger Action Link 1`] = `
           title=""
           type="button"
           variant="link"
-          variantLabel="Danger"
         >
           <button
             aria-disabled={null}
@@ -231,7 +230,6 @@ exports[`Alert - danger Action Link 1`] = `
             tabIndex={null}
             title=""
             type="button"
-            variantLabel="Danger"
           >
             test
           </button>
@@ -331,7 +329,6 @@ exports[`Alert - danger Action and Title 1`] = `
           title="Some title"
           type="button"
           variant="link"
-          variantLabel="Danger"
         >
           <button
             aria-disabled={null}
@@ -341,7 +338,6 @@ exports[`Alert - danger Action and Title 1`] = `
             tabIndex={null}
             title="Some title"
             type="button"
-            variantLabel="Danger"
           >
             test
           </button>
@@ -442,7 +438,6 @@ exports[`Alert - danger Custom aria label 1`] = `
           title="Some title"
           type="button"
           variant="link"
-          variantLabel="Danger"
         >
           <button
             aria-disabled={null}
@@ -452,7 +447,6 @@ exports[`Alert - danger Custom aria label 1`] = `
             tabIndex={null}
             title="Some title"
             type="button"
-            variantLabel="Danger"
           >
             test
           </button>
@@ -817,7 +811,6 @@ exports[`Alert - info Action Link 1`] = `
           title=""
           type="button"
           variant="link"
-          variantLabel="Info"
         >
           <button
             aria-disabled={null}
@@ -827,7 +820,6 @@ exports[`Alert - info Action Link 1`] = `
             tabIndex={null}
             title=""
             type="button"
-            variantLabel="Info"
           >
             test
           </button>
@@ -927,7 +919,6 @@ exports[`Alert - info Action and Title 1`] = `
           title="Some title"
           type="button"
           variant="link"
-          variantLabel="Info"
         >
           <button
             aria-disabled={null}
@@ -937,7 +928,6 @@ exports[`Alert - info Action and Title 1`] = `
             tabIndex={null}
             title="Some title"
             type="button"
-            variantLabel="Info"
           >
             test
           </button>
@@ -1038,7 +1028,6 @@ exports[`Alert - info Custom aria label 1`] = `
           title="Some title"
           type="button"
           variant="link"
-          variantLabel="Info"
         >
           <button
             aria-disabled={null}
@@ -1048,7 +1037,6 @@ exports[`Alert - info Custom aria label 1`] = `
             tabIndex={null}
             title="Some title"
             type="button"
-            variantLabel="Info"
           >
             test
           </button>
@@ -1413,7 +1401,6 @@ exports[`Alert - success Action Link 1`] = `
           title=""
           type="button"
           variant="link"
-          variantLabel="Success"
         >
           <button
             aria-disabled={null}
@@ -1423,7 +1410,6 @@ exports[`Alert - success Action Link 1`] = `
             tabIndex={null}
             title=""
             type="button"
-            variantLabel="Success"
           >
             test
           </button>
@@ -1523,7 +1509,6 @@ exports[`Alert - success Action and Title 1`] = `
           title="Some title"
           type="button"
           variant="link"
-          variantLabel="Success"
         >
           <button
             aria-disabled={null}
@@ -1533,7 +1518,6 @@ exports[`Alert - success Action and Title 1`] = `
             tabIndex={null}
             title="Some title"
             type="button"
-            variantLabel="Success"
           >
             test
           </button>
@@ -1634,7 +1618,6 @@ exports[`Alert - success Custom aria label 1`] = `
           title="Some title"
           type="button"
           variant="link"
-          variantLabel="Success"
         >
           <button
             aria-disabled={null}
@@ -1644,7 +1627,6 @@ exports[`Alert - success Custom aria label 1`] = `
             tabIndex={null}
             title="Some title"
             type="button"
-            variantLabel="Success"
           >
             test
           </button>
@@ -2009,7 +1991,6 @@ exports[`Alert - warning Action Link 1`] = `
           title=""
           type="button"
           variant="link"
-          variantLabel="Warning"
         >
           <button
             aria-disabled={null}
@@ -2019,7 +2000,6 @@ exports[`Alert - warning Action Link 1`] = `
             tabIndex={null}
             title=""
             type="button"
-            variantLabel="Warning"
           >
             test
           </button>
@@ -2119,7 +2099,6 @@ exports[`Alert - warning Action and Title 1`] = `
           title="Some title"
           type="button"
           variant="link"
-          variantLabel="Warning"
         >
           <button
             aria-disabled={null}
@@ -2129,7 +2108,6 @@ exports[`Alert - warning Action and Title 1`] = `
             tabIndex={null}
             title="Some title"
             type="button"
-            variantLabel="Warning"
           >
             test
           </button>
@@ -2230,7 +2208,6 @@ exports[`Alert - warning Custom aria label 1`] = `
           title="Some title"
           type="button"
           variant="link"
-          variantLabel="Warning"
         >
           <button
             aria-disabled={null}
@@ -2240,7 +2217,6 @@ exports[`Alert - warning Custom aria label 1`] = `
             tabIndex={null}
             title="Some title"
             type="button"
-            variantLabel="Warning"
           >
             test
           </button>