@patternfly/react-core 5.0.0-alpha.13 → 5.0.0-alpha.15

package/next/components/Wizard/WizardBody.d.ts

@@ -6,15 +6,19 @@ export interface WizardBodyProps {
     children: React.ReactNode | React.ReactNode[];
     /** Set to true to remove the default body padding */
     hasNoPadding?: boolean;
-    /** An aria-label to use for the wrapper element */
+    /** Adds an accessible name to the wrapper element when the content overflows and renders
+     * a scrollbar.
+     */
     'aria-label'?: string;
-    /** Sets the aria-labelledby attribute for the wrapper element */
+    /** Adds an accessible name to the wrapper element by passing the the id of one or more elements.
+     * The aria-labelledby will only be applied when the content overflows and renders a scrollbar.
+     */
     'aria-labelledby'?: string;
     /** Component used as the wrapping content container */
     component?: React.ElementType;
 }
 export declare const WizardBody: {
-    ({ children, hasNoPadding, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, component: WrapperComponent }: WizardBodyProps): JSX.Element;
+    ({ children, hasNoPadding, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, component }: WizardBodyProps): JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=WizardBody.d.ts.map

package/next/components/Wizard/WizardBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WizardBody.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/WizardBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC9C,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uDAAuD;IACvD,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU;0HAMpB,eAAe;;CAIjB,CAAC"}
+{"version":3,"file":"WizardBody.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/WizardBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC9C,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uDAAuD;IACvD,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU;wGAMpB,eAAe;;CA8CjB,CAAC"}

package/next/components/Wizard/WizardBody.js

@@ -1,7 +1,40 @@
 import React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
-export const WizardBody = ({ children, hasNoPadding = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, component: WrapperComponent = 'div' }) => (React.createElement(WrapperComponent, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: css(styles.wizardMain) },
-    React.createElement("div", { className: css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding) }, children)));
+import { WizardContext } from './WizardContext';
+import { debounce } from '../../../helpers/util';
+import { getResizeObserver } from '../../../helpers/resizeObserver';
+export const WizardBody = ({ children, hasNoPadding = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, component = 'div' }) => {
+    const [hasScrollbar, setHasScrollbar] = React.useState(false);
+    const [previousWidth, setPreviousWidth] = React.useState(undefined);
+    const wrapperRef = React.useRef(null);
+    const WrapperComponent = component;
+    const { activeStep } = React.useContext(WizardContext);
+    const defaultAriaLabel = ariaLabel || `${activeStep === null || activeStep === void 0 ? void 0 : activeStep.name} content`;
+    React.useEffect(() => {
+        const resize = () => {
+            if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
+                const { offsetWidth, offsetHeight, scrollHeight } = wrapperRef.current;
+                if (previousWidth !== offsetWidth) {
+                    setPreviousWidth(offsetWidth);
+                    setHasScrollbar(offsetHeight < scrollHeight);
+                }
+            }
+        };
+        const handleResizeWithDelay = debounce(resize, 250);
+        let observer = () => { };
+        if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
+            observer = getResizeObserver(wrapperRef.current, handleResizeWithDelay);
+            const { offsetHeight, scrollHeight } = wrapperRef.current;
+            setHasScrollbar(offsetHeight < scrollHeight);
+            setPreviousWidth(wrapperRef.current.offsetWidth);
+        }
+        return () => {
+            observer();
+        };
+    }, []);
+    return (React.createElement(WrapperComponent, Object.assign({ ref: wrapperRef }, (component === 'div' && hasScrollbar && { role: 'region' }), (hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 }), { className: css(styles.wizardMain) }),
+        React.createElement("div", { className: css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding) }, children)));
+};
 WizardBody.displayName = 'WizardBody';
 //# sourceMappingURL=WizardBody.js.map

package/next/components/Wizard/WizardBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardBody.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/WizardBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,uDAAuD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAkB/C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAS,EAAE,gBAAgB,GAAG,KAAK,EACnB,EAAE,EAAE,CAAC,CACrB,oBAAC,gBAAgB,kBAAa,SAAS,qBAAmB,cAAc,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC;IACzG,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,cAAc,EAAE,YAAY,IAAI,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,IAAG,QAAQ,CAAO,CACvF,CACpB,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
+{"version":3,"file":"WizardBody.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/WizardBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,uDAAuD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAsBpE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAS,GAAG,KAAK,EACD,EAAE,EAAE;IACpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACxF,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,gBAAgB,GAAG,SAAS,CAAC;IACnC,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACvD,MAAM,gBAAgB,GAAG,SAAS,IAAI,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,UAAU,CAAC;IAEpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,IAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,EAAE;gBACvB,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;gBAEvE,IAAI,aAAa,KAAK,WAAW,EAAE;oBACjC,gBAAgB,CAAC,WAAW,CAAC,CAAC;oBAC9B,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC;iBAC9C;aACF;QACH,CAAC,CAAC;QAEF,MAAM,qBAAqB,GAAG,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACpD,IAAI,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QAExB,IAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,EAAE;YACvB,QAAQ,GAAG,iBAAiB,CAAC,UAAU,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC;YACxE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;YAE1D,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC;YAC7C,gBAAgB,CAAE,UAAU,CAAC,OAAuB,CAAC,WAAW,CAAC,CAAC;SACnE;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,EAAE,CAAC;QACb,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,gBAAgB,kBACf,GAAG,EAAE,UAAU,IACX,CAAC,SAAS,KAAK,KAAK,IAAI,YAAY,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAC3D,CAAC,YAAY,IAAI,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,IACxG,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC;QAEjC,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,cAAc,EAAE,YAAY,IAAI,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,IAAG,QAAQ,CAAO,CACvF,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.13",
+  "version": "5.0.0-alpha.15",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "c6de8133269e210cf9c816542304cbc9dc0e4e77"
+  "gitHead": "01c2451bcb6af1dc7767d86e6884c509b6b41891"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
-import { canUseDOM } from '../../helpers';
-import { KeyTypes } from '../../helpers/constants';
-import { AboutModalContainer } from './AboutModalContainer';
-import { PickOptional } from '../../helpers/typeUtils';
-
-export interface AboutModalProps {
+import { AboutModalBoxContent } from './AboutModalBoxContent';
+import { AboutModalBoxHeader } from './AboutModalBoxHeader';
+import { AboutModalBoxHero } from './AboutModalBoxHero';
+import { AboutModalBoxBrand } from './AboutModalBoxBrand';
+import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
+import { AboutModalBox } from './AboutModalBox';
+import { Modal, ModalVariant } from '../Modal';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+
+export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the about modal */
   children: React.ReactNode;
   /** Additional classes added to the about modal */
@@ -27,123 +29,77 @@ export interface AboutModalProps {
   /** The URL of the image for the background  */
   backgroundImageSrc?: string;
   /** Prevents the about modal from rendering content inside a container; allows for more flexible layouts  */
-  noAboutModalBoxContentContainer?: boolean;
+  hasNoContentContainer?: boolean;
   /** The parent container to append the modal to. Defaults to document.body */
   appendTo?: HTMLElement | (() => HTMLElement);
+  /** Aria label for the about modal.  This should be used when no productName prop is provided */
+  'aria-label'?: string;
   /** Set aria label to the close button */
   closeButtonAriaLabel?: string;
   /** Flag to disable focus trap */
   disableFocusTrap?: boolean;
 }
 
-interface ModalState {
-  container: HTMLElement;
-}
-
-export class AboutModal extends React.Component<AboutModalProps, ModalState> {
-  static displayName = 'AboutModal';
-  private static currentId = 0;
-  private id = AboutModal.currentId++;
-  ariaLabelledBy = `pf-about-modal-title-${this.id}`;
-  ariaDescribedBy = `pf-about-modal-content-${this.id}`;
-
-  static defaultProps: PickOptional<AboutModalProps> = {
-    className: '',
-    isOpen: false,
-    onClose: (_e): any => undefined,
-    productName: '',
-    trademark: '',
-    backgroundImageSrc: '',
-    noAboutModalBoxContentContainer: false,
-    appendTo: null as HTMLElement
-  };
-
-  constructor(props: AboutModalProps) {
-    super(props);
-
-    this.state = {
-      container: undefined
-    };
-    if (props.brandImageSrc && !props.brandImageAlt) {
-      // eslint-disable-next-line no-console
-      console.error('AboutModal:', 'brandImageAlt is required when a brandImageSrc is specified');
-    }
+export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
+  children,
+  className,
+  isOpen = false,
+  onClose = (_e): any => undefined,
+  productName,
+  trademark,
+  backgroundImageSrc,
+  brandImageSrc,
+  brandImageAlt,
+  hasNoContentContainer = false,
+  appendTo,
+  closeButtonAriaLabel,
+  'aria-label': ariaLabel,
+  disableFocusTrap,
+  ...props
+}: AboutModalProps) => {
+  if (brandImageSrc && !brandImageAlt) {
+    // eslint-disable-next-line no-console
+    console.error('AboutModal:', 'brandImageAlt is required when a brandImageSrc is specified, and should not be an empty string.');
   }
 
-  handleEscKeyClick = (event: KeyboardEvent) => {
-    if (event.key === KeyTypes.Escape && this.props.isOpen) {
-      this.props.onClose?.(event);
-    }
-  };
-
-  toggleSiblingsFromScreenReaders = (hide: boolean) => {
-    const { appendTo } = this.props;
-    const target: HTMLElement = this.getElement(appendTo);
-    const bodyChildren = target.children;
-    for (const child of Array.from(bodyChildren)) {
-      if (child !== this.state.container) {
-        hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
-      }
-    }
-  };
-
-  getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
-    if (typeof appendTo === 'function') {
-      return appendTo();
-    }
-    return appendTo || document.body;
-  };
-
-  componentDidMount() {
-    const container = document.createElement('div');
-    const target: HTMLElement = this.getElement(this.props.appendTo);
-    this.setState({ container });
-    target.appendChild(container);
-    target.addEventListener('keydown', this.handleEscKeyClick, false);
-
-    if (this.props.isOpen) {
-      target.classList.add(css(styles.backdropOpen));
-    } else {
-      target.classList.remove(css(styles.backdropOpen));
-    }
-  }
-
-  componentDidUpdate() {
-    const target: HTMLElement = this.getElement(this.props.appendTo);
-    if (this.props.isOpen) {
-      target.classList.add(css(styles.backdropOpen));
-      this.toggleSiblingsFromScreenReaders(true);
-    } else {
-      target.classList.remove(css(styles.backdropOpen));
-      this.toggleSiblingsFromScreenReaders(false);
-    }
-  }
-
-  componentWillUnmount() {
-    const target: HTMLElement = this.getElement(this.props.appendTo);
-    if (this.state.container) {
-      target.removeChild(this.state.container);
-    }
-    target.removeEventListener('keydown', this.handleEscKeyClick, false);
-    target.classList.remove(css(styles.backdropOpen));
+  if (!productName && !ariaLabel) {
+    // eslint-disable-next-line no-console
+    console.error('AboutModal:', 'Either productName or ariaLabel is required for component to be accessible');
   }
 
-  render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { appendTo, ...props } = this.props;
-    const { container } = this.state;
-
-    if (!canUseDOM || !container) {
-      return null;
-    }
-
-    return ReactDOM.createPortal(
-      <AboutModalContainer
-        aboutModalBoxHeaderId={this.ariaLabelledBy}
-        aboutModalBoxContentId={this.ariaDescribedBy}
-        {...props}
-      />,
-      container
-    ) as React.ReactElement;
+  if (!isOpen) {
+    return null;
   }
-}
+  return (
+    <GenerateId prefix="pf-about-modal-title-">
+      {ariaLabelledBy => (
+        <Modal
+          isOpen={isOpen}
+          variant={ModalVariant.large}
+          {...(productName && {'aria-labelledby': ariaLabelledBy})}
+          aria-label={ariaLabel}
+          onEscapePress={onClose}
+          showClose={false}
+          appendTo={appendTo}
+          disableFocusTrap={disableFocusTrap}
+          hasNoBodyWrapper
+        >
+          <AboutModalBox className={css(className)}>
+            <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
+            <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
+            {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
+            <AboutModalBoxContent
+              trademark={trademark}
+              hasNoContentContainer={hasNoContentContainer}
+              {...props}
+            >
+              {children}
+            </AboutModalBoxContent>
+            <AboutModalBoxHero backgroundImageSrc={backgroundImageSrc} />
+          </AboutModalBox>
+        </Modal>
+      )}
+    </GenerateId>
+  );
+};
+AboutModal.displayName = 'AboutModal';

package/src/components/AboutModal/AboutModalBox.tsx

@@ -3,18 +3,18 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
 
 export interface AboutModalBoxProps extends React.HTMLProps<HTMLDivElement> {
-  /** content rendered inside the AboutModelBox. */
+  /** Content rendered inside the about modal box */
   children: React.ReactNode;
-  /** additional classes added to the AboutModalBox */
+  /** Additional classes added to the about modal box */
   className?: string;
 }
 
 export const AboutModalBox: React.FunctionComponent<AboutModalBoxProps> = ({
   children,
-  className = '',
+  className,
   ...props
 }: AboutModalBoxProps) => (
-  <div role="dialog" aria-modal="true" className={css(styles.aboutModalBox, className)} {...props}>
+  <div className={css(styles.aboutModalBox, className)} {...props}>
     {children}
   </div>
 );

package/src/components/AboutModal/AboutModalBoxBrand.tsx

@@ -3,21 +3,18 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
 
 export interface AboutModalBoxBrandProps extends React.HTMLProps<HTMLDivElement> {
-  /** additional classes added to the About Modal Brand  */
-  className?: string;
-  /** the URL of the image for the Brand.  */
-  src?: string;
-  /** the alternate text of the Brand image.  */
+  /** The URL of the image for the brand.  */
+  src: string;
+  /** The alternate text of the brand image.  */
   alt: string;
 }
 
 export const AboutModalBoxBrand: React.FunctionComponent<AboutModalBoxBrandProps> = ({
-  className = '',
-  src = '',
+  src,
   alt,
   ...props
 }: AboutModalBoxBrandProps) => (
-  <div className={css(styles.aboutModalBoxBrand, className)} {...props}>
+  <div className={css(styles.aboutModalBoxBrand)} {...props}>
     <img className={css(styles.aboutModalBoxBrandImage)} src={src} alt={alt} />
   </div>
 );

package/src/components/AboutModal/AboutModalBoxCloseButton.tsx

@@ -5,8 +5,6 @@ import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
-  /** additional classes added to the About Modal Close button  */
-  className?: string;
   /** A callback for when the close button is clicked  */
   onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
   /** Set close button aria label */
@@ -14,12 +12,11 @@ export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivEl
 }
 
 export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxCloseButtonProps> = ({
-  className = '',
   onClose = _e => undefined as any,
   'aria-label': ariaLabel = 'Close Dialog',
   ...props
 }: AboutModalBoxCloseButtonProps) => (
-  <div className={css(styles.aboutModalBoxClose, className)} {...props}>
+  <div className={css(styles.aboutModalBoxClose)} {...props}>
     <Button variant="plain" onClick={onClose} aria-label={ariaLabel}>
       <TimesIcon />
     </Button>

package/src/components/AboutModal/AboutModalBoxContent.tsx

@@ -4,29 +4,23 @@ import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-
 import contentStyles from '@patternfly/react-styles/css/components/Content/content';
 
 export interface AboutModalBoxContentProps extends React.HTMLProps<HTMLDivElement> {
-  /** content rendered inside the AboutModalBoxContent  */
+  /** Content rendered inside the about modal box content */
   children: React.ReactNode;
-  /** additional classes added to the AboutModalBoxContent  */
-  className?: string;
-  /** id to use for About Modal Box aria described by  */
-  id: string;
-  /** The Trademark info for the product  */
+  /** The trademark info for the product  */
   trademark: string;
   /** Prevents the about modal from rendering content inside a container; allows for more flexible layouts */
-  noAboutModalBoxContentContainer?: boolean;
+  hasNoContentContainer?: boolean;
 }
 
 export const AboutModalBoxContent: React.FunctionComponent<AboutModalBoxContentProps> = ({
   children,
-  className = '',
   trademark,
-  id,
-  noAboutModalBoxContentContainer = false,
+  hasNoContentContainer = false,
   ...props
 }: AboutModalBoxContentProps) => (
-  <div className={css(styles.aboutModalBoxContent, className)} id={id} {...props}>
+  <div className={css(styles.aboutModalBoxContent)} {...props}>
     <div className={css('pf-c-about-modal-box__body')}>
-      {noAboutModalBoxContentContainer ? children : <div className={css(contentStyles.content)}>{children}</div>}
+      {hasNoContentContainer ? children : <div className={css(contentStyles.content)}>{children}</div>}
     </div>
     <p className={css(styles.aboutModalBoxStrapline)}>{trademark}</p>
   </div>

package/src/components/AboutModal/AboutModalBoxHeader.tsx

@@ -4,21 +4,18 @@ import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-
 import { Title } from '../Title';
 
 export interface AboutModalBoxHeaderProps extends React.HTMLProps<HTMLDivElement> {
-  /** additional classes added to the button  */
-  className?: string;
-  /** Name of the Product  */
+  /** Name of the product  */
   productName?: string;
-  /** id to used for Modal Box header  */
+  /** Id to use for about modal box header  */
   id: string;
 }
 
 export const AboutModalBoxHeader: React.FunctionComponent<AboutModalBoxHeaderProps> = ({
-  className = '',
-  productName = '',
+  productName,
   id,
   ...props
 }: AboutModalBoxHeaderProps) => (
-  <div className={css(styles.aboutModalBoxHeader, className)} {...props}>
+  <div className={css(styles.aboutModalBoxHeader)} {...props}>
     <Title headingLevel="h1" size="4xl" id={id}>
       {productName}
     </Title>

package/src/components/AboutModal/AboutModalBoxHero.tsx

@@ -5,14 +5,11 @@ import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-
 import c_about_modal_box__hero_sm_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_about_modal_box__hero_sm_BackgroundImage';
 
 export interface AboutModalBoxHeroProps extends React.HTMLProps<HTMLDivElement> {
-  /** additional classes added to the About Modal Hero  */
-  className?: string;
-  /** background image data or file path  */
+  /** Background image data or file path  */
   backgroundImageSrc?: string;
 }
 
 export const AboutModalBoxHero: React.FunctionComponent<AboutModalBoxHeroProps> = ({
-  className,
   backgroundImageSrc,
   ...props
 }: AboutModalBoxHeroProps) => (
@@ -24,7 +21,7 @@ export const AboutModalBoxHero: React.FunctionComponent<AboutModalBoxHeroProps>
         : {}
       /* eslint-enable camelcase */
     }
-    className={css(styles.aboutModalBoxHero, className)}
+    className={css(styles.aboutModalBoxHero)}
     {...props}
   />
 );

package/src/components/AboutModal/__tests__/AboutModal.test.tsx

@@ -30,14 +30,6 @@ describe('AboutModal', () => {
     expect(screen.queryByRole('dialog')).toBeNull();
   });
 
-  test('Each modal is given new aria-describedby and aria-labelledby', () => {
-    const first = new AboutModal(props);
-    const second = new AboutModal(props);
-
-    expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);
-    expect(first.ariaDescribedBy).not.toBe(second.ariaDescribedBy);
-  });
-
   test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
     const noImgAltrops = {
       onClose: jest.fn(),
@@ -53,4 +45,18 @@ describe('AboutModal', () => {
     render(<AboutModal {...noImgAltrops}>Test About Modal</AboutModal>);
     expect(myMock).toHaveBeenCalled();
   });
+
+  test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
+    const noProductNameProps = {
+      onClose: jest.fn(),
+      children: 'modal content',
+      trademark: 'Trademark and copyright information here'
+
+    } as any;
+    const myMock = jest.fn() as any;
+    global.console = { error: myMock } as any;
+
+    render(<AboutModal {...noProductNameProps}>Test About Modal</AboutModal>);
+    expect(myMock).toHaveBeenCalled();
+  });
 });

package/src/components/AboutModal/__tests__/AboutModalBox.test.tsx

@@ -4,7 +4,7 @@ import { AboutModalBox } from '../AboutModalBox';
 
 test('AboutModalBox Test', () => {
   const { asFragment } = render(
-    <AboutModalBox aria-labelledby="id" aria-describedby="id2">
+    <AboutModalBox aria-labelledby="id">
       This is a AboutModalBox
     </AboutModalBox>
   );

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBox.test.tsx.snap

@@ -3,11 +3,8 @@
 exports[`AboutModalBox Test 1`] = `
 <DocumentFragment>
   <div
-    aria-describedby="id2"
     aria-labelledby="id"
-    aria-modal="true"
     class="pf-c-about-modal-box"
-    role="dialog"
   >
     This is a AboutModalBox
   </div>

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -20,7 +20,7 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
-        noAboutModalBoxContentContainer={true}
+        hasNoContentContainer={true}
         productName="Product Name"
       >
         <TextContent id="test1" className="pf-u-py-xl">

package/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx

@@ -22,6 +22,7 @@ export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
         backgroundImageSrc={bgImg}
+        aria-label="Background image about modal"
       >
         <TextContent>
           <TextList component="dl">

package/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -20,6 +20,7 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        aria-label="No product name about modal"
       >
         <TextContent>
           <TextList component="dl">

package/src/components/Accordion/Accordion.tsx

@@ -23,7 +23,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
 export const Accordion: React.FunctionComponent<AccordionProps> = ({
   children = null,
   className = '',
-  'aria-label': ariaLabel = '',
+  'aria-label': ariaLabel,
   headingLevel = 'h3',
   asDefinitionList = true,
   isBordered = false,
@@ -40,6 +40,7 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
         className
       )}
       aria-label={ariaLabel}
+      {...(!asDefinitionList && ariaLabel && { role: 'region' })}
       {...props}
     >
       <AccordionContext.Provider

package/src/components/Alert/Alert.tsx

@@ -27,8 +27,6 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
    * or React.Fragment.
    */
   actionLinks?: React.ReactNode;
-  /** Adds accessible text to the alert. */
-  'aria-label'?: string;
   /** Content rendered inside the alert. */
   children?: React.ReactNode;
   /** Additional classes to add to the alert.  */
@@ -97,7 +95,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   isPlain = false,
   isLiveRegion = false,
   variantLabel = `${capitalize(variant)} alert:`,
-  'aria-label': ariaLabel = `${capitalize(variant)} Alert`,
   actionClose,
   actionLinks,
   title,
@@ -229,7 +226,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
         styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
         className
       )}
-      aria-label={ariaLabel}
       {...ouiaProps}
       {...(isLiveRegion && {
         'aria-live': 'polite',