@patternfly/react-core 5.0.0-alpha.5 → 5.0.0-alpha.51

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

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,11 +16,11 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
         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

@@ -6,7 +6,7 @@ import bgImg from './patternfly-orb.svg';
 export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -17,11 +17,12 @@ export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(event: any) => toggleModal(event)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
         backgroundImageSrc={bgImg}
+        aria-label="Background image about modal"
       >
         <TextContent>
           <TextList component="dl">

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

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,10 +16,11 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(event: any) => toggleModal(event)}
         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/Accordion/AccordionContent.tsx

@@ -17,6 +17,8 @@ export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   isFixed?: boolean;
   /** Adds accessible text to the Accordion content */
   'aria-label'?: string;
+  /** Id of the controlling accordion toggle to label the content. */
+  'aria-labelledby'?: string;
   /** Component to use as content container */
   component?: React.ElementType;
   /** Flag indicating content is custom. Expanded content Body wrapper will be removed from children.  This allows multiple bodies to be rendered as content. */
@@ -31,29 +33,49 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
   isFixed = false,
   isCustomContent = false,
   'aria-label': ariaLabel = '',
+  'aria-labelledby': ariaLabelledby,
   component,
   ...props
-}: AccordionContentProps) => (
-  <AccordionContext.Consumer>
-    {({ ContentContainer }) => {
-      const Container = component || ContentContainer;
-      return (
-        <Container
-          id={id}
-          className={css(
-            styles.accordionExpandableContent,
-            isFixed && styles.modifiers.fixed,
-            !isHidden && styles.modifiers.expanded,
-            className
-          )}
-          hidden={isHidden}
-          aria-label={ariaLabel}
-          {...props}
-        >
-          {isCustomContent ? children : <AccordionExpandableContentBody>{children}</AccordionExpandableContentBody>}
-        </Container>
-      );
-    }}
-  </AccordionContext.Consumer>
-);
+}: AccordionContentProps) => {
+  const [hasScrollbar, setHasScrollbar] = React.useState(false);
+  const containerRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (containerRef?.current && isFixed && !isHidden) {
+      const { offsetHeight, scrollHeight } = containerRef.current;
+
+      setHasScrollbar(offsetHeight < scrollHeight);
+    } else if (!isFixed) {
+      setHasScrollbar(false);
+    }
+  }, [containerRef, isFixed, isHidden]);
+
+  return (
+    <AccordionContext.Consumer>
+      {({ ContentContainer }) => {
+        const Container = component || ContentContainer;
+        return (
+          <Container
+            ref={containerRef}
+            id={id}
+            className={css(
+              styles.accordionExpandableContent,
+              isFixed && styles.modifiers.fixed,
+              !isHidden && styles.modifiers.expanded,
+              className
+            )}
+            hidden={isHidden}
+            {...(ariaLabel && { 'aria-label': ariaLabel })}
+            {...(ariaLabelledby && { 'aria-labelledby': ariaLabelledby })}
+            {...(hasScrollbar && { tabIndex: 0 })}
+            {...(hasScrollbar && Container === 'div' && { role: 'region' })}
+            {...props}
+          >
+            {isCustomContent ? children : <AccordionExpandableContentBody>{children}</AccordionExpandableContentBody>}
+          </Container>
+        );
+      }}
+    </AccordionContext.Consumer>
+  );
+};
 AccordionContent.displayName = 'AccordionContent';

package/src/components/Accordion/__tests__/AccordionContent.test.tsx

@@ -59,6 +59,19 @@ test('Renders with the passed aria label', () => {
   expect(screen.getByRole('heading')).toHaveAccessibleName('Accordion content');
 });
 
+test('Renders with the passed aria-labelledby', () => {
+  render(
+    <>
+      <div id="accordion-label1">Accordion content</div>
+      <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+        <AccordionContent aria-labelledby="accordion-label1">Test</AccordionContent>
+      </AccordionContext.Provider>
+    </>
+  );
+
+  expect(screen.getByRole('heading')).toHaveAccessibleName('Accordion content');
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(
     <>
@@ -151,7 +164,7 @@ test('Renders unhidden and with pf-m-expanded by default', () => {
     </AccordionContext.Provider>
   );
 
-  const contentContainer = screen.getByRole('heading')
+  const contentContainer = screen.getByRole('heading');
 
   expect(contentContainer).not.toHaveAttribute('hidden');
   expect(contentContainer).toHaveClass('pf-m-expanded');
@@ -164,7 +177,7 @@ test('Renders aria-hidden and without pf-m-expanded when isHidden is true', () =
     </AccordionContext.Provider>
   );
 
-  const contentContainer = screen.getByRole('heading', { hidden: true })
+  const contentContainer = screen.getByRole('heading', { hidden: true });
 
   expect(contentContainer).toHaveAttribute('hidden');
   expect(contentContainer).not.toHaveClass('pf-m-expanded');

package/src/components/Accordion/examples/AccordionBordered.tsx

@@ -123,7 +123,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <Checkbox
           label="Display size large"
           isChecked={isDisplayLarge}
-          onChange={setIsDisplayLarge}
+          onChange={(_event, checked) => setIsDisplayLarge(checked)}
           aria-label="show display large variation checkbox"
           id="toggle-display-lg"
           name="toggle-display-lg"

package/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx

@@ -63,7 +63,21 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="ex2-expand4" isHidden={!expanded.includes('ex2-toggle4')} isFixed>
+        <AccordionContent
+          aria-labelledby="ex2-toggle4"
+          id="ex2-expand4"
+          isHidden={!expanded.includes('ex2-toggle4')}
+          isFixed
+        >
+          <p>
+            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
+            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
+            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+          </p>
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere

package/src/components/ActionList/examples/ActionList.md

@@ -7,25 +7,35 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 ## Examples
 
 ### Action list single group
 
 ```ts file="ActionListSingleGroup.tsx"
+
 ```
 
 ### Action list with icons
 
 ```ts file="./ActionListWithIcons.tsx"
+
 ```
 
 ### Action list multiple groups
 
 ```ts file="./ActionListMultipleGroups.tsx"
+
 ```
 
 ### Action list with cancel button
 
 ```ts file="./ActionListWithCancelButton.tsx"
+
 ```

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -1,20 +1,18 @@
 import React from 'react';
+import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
 import {
-  ActionList,
-  ActionListItem,
-  Button,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onToggle = (
-    isOpen: boolean,
-    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
+    isOpen: boolean
   ) => {
     event.stopPropagation();
     setIsOpen(isOpen);
@@ -26,21 +24,21 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   return (
@@ -71,7 +69,7 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={onSelect}
             toggle={<KebabToggle onToggle={onToggle} />}
             isOpen={isOpen}

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.  */
@@ -57,8 +55,8 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   timeoutAnimation?: number;
   /** Title of the alert.  */
   title: React.ReactNode;
-  /** Sets the heading level to use for the alert title. Default is h4. */
-  titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Sets the element to use as the alert title. Default is h4. */
+  component?: keyof JSX.IntrinsicElements;
   /** Adds accessible text to the alert toggle. */
   toggleAriaLabel?: string;
   /** Position of the tooltip which is displayed if text is truncated. */
@@ -95,11 +93,10 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   isPlain = false,
   isLiveRegion = false,
   variantLabel = `${capitalize(variant)} alert:`,
-  'aria-label': ariaLabel = `${capitalize(variant)} Alert`,
   actionClose,
   actionLinks,
   title,
-  titleHeadingLevel: TitleHeadingLevel = 'h4',
+  component = 'h4',
   children = '',
   className = '',
   ouiaId,
@@ -126,6 +123,8 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   );
 
   const titleRef = React.useRef(null);
+  const TitleComponent = component as any;
+
   const divRef = React.useRef<HTMLDivElement>();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   React.useEffect(() => {
@@ -145,12 +144,12 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const [containsFocus, setContainsFocus] = useState<boolean | undefined>();
   const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
   React.useEffect(() => {
-    timeout = timeout === true ? 8000 : Number(timeout);
-    if (timeout > 0) {
-      const timer = setTimeout(() => setTimedOut(true), timeout);
+    const calculatedTimeout = timeout === true ? 8000 : Number(timeout);
+    if (calculatedTimeout > 0) {
+      const timer = setTimeout(() => setTimedOut(true), calculatedTimeout);
       return () => clearTimeout(timer);
     }
-  }, []);
+  }, [timeout]);
   React.useEffect(() => {
     const onDocumentFocus = () => {
       if (divRef.current) {
@@ -172,10 +171,10 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
       const timer = setTimeout(() => setTimedOutAnimation(true), timeoutAnimation);
       return () => clearTimeout(timer);
     }
-  }, [containsFocus, isMouseOver]);
+  }, [containsFocus, isMouseOver, timeoutAnimation]);
   React.useEffect(() => {
     dismissed && onTimeout();
-  }, [dismissed]);
+  }, [dismissed, onTimeout]);
 
   const [isExpanded, setIsExpanded] = useState(false);
   const onToggleExpand = () => {
@@ -197,13 +196,13 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
     return null;
   }
   const Title = (
-    <TitleHeadingLevel
+    <TitleComponent
       {...(isTooltipVisible && { tabIndex: 0 })}
       ref={titleRef}
       className={css(styles.alertTitle, truncateTitle && styles.modifiers.truncate)}
     >
       {getHeadingContent}
-    </TitleHeadingLevel>
+    </TitleComponent>
   );
 
   return (
@@ -218,7 +217,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
         styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
         className
       )}
-      aria-label={ariaLabel}
       {...ouiaProps}
       {...(isLiveRegion && {
         'aria-live': 'polite',

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

@@ -48,13 +48,9 @@ test('Renders with class pf-c-alert__title on the div containing the title', ()
   expect(screen.getByRole('heading', { name: 'Default alert: Some title' })).toHaveClass('pf-c-alert__title');
 });
 
-test('Renders with a default aria label of Default Alert', () => {
-  render(
-    <Alert title="Some title" data-testid="Alert-test-id">
-      Some alert
-    </Alert>
-  );
-  expect(screen.getByTestId('Alert-test-id')).toHaveAccessibleName('Default Alert');
+test('Renders with default hidden text of "Default alert:"', () => {
+  render(<Alert title="Some title">Some alert</Alert>);
+  expect(screen.getByText('Default alert:')).toBeInTheDocument();
 });
 
 ['success', 'danger', 'warning', 'info'].forEach(variant => {
@@ -76,13 +72,13 @@ test('Renders with a default aria label of Default Alert', () => {
     expect(screen.getByTestId('Alert-test-id')).toHaveClass(`pf-m-${variant}`);
   });
 
-  test(`Renders with aria label ${capitalize(variant)} Alert when variant = ${variant}`, () => {
+  test(`Renders with hidden text "${capitalize(variant)} alert:" when variant = ${variant}`, () => {
     render(
       <Alert variant={`${variant as AlertVariant}`} title="Some title" data-testid="Alert-test-id">
         Some alert
       </Alert>
     );
-    expect(screen.getByTestId('Alert-test-id')).toHaveAccessibleName(`${capitalize(variant)} Alert`);
+    expect(screen.getByText(`${capitalize(variant)} alert:`)).toBeInTheDocument();
   });
 
   test(`Renders the title with an accessible name of '${capitalize(
@@ -136,31 +132,39 @@ test('Renders with a default aria label of Default Alert', () => {
 });
 
 test('Does not render with class pf-m-inline by default', () => {
-  render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-inline');
+  render(
+    <Alert title="Some title" data-testid="Alert-test-id">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByTestId('Alert-test-id')).not.toHaveClass('pf-m-inline');
 });
 
 test('Renders with class pf-m-inline when isInline = true', () => {
   render(
-    <Alert isInline title="Some title">
+    <Alert isInline title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
-  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-inline');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-inline');
 });
 
 test('Does not render with class pf-m-plain by default', () => {
-  render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-plain');
+  render(
+    <Alert title="Some title" data-testid="Alert-test-id">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByTestId('Alert-test-id')).not.toHaveClass('pf-m-plain');
 });
 
 test('Renders with class pf-m-plain when isPlain = true', () => {
   render(
-    <Alert isPlain title="Some title">
+    <Alert isPlain title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
-  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-plain');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-plain');
 });
 
 test('Renders the title', () => {
@@ -175,9 +179,9 @@ test('Renders the title as an h4 by default', () => {
   expect(screen.getByRole('heading', { level: 4, name: 'Default alert: Some title' })).toBeVisible();
 });
 
-test('Renders the title as other heading levels when one is passed using titleHeadingLevel', () => {
+test('Renders the title as other heading levels when one is passed using component', () => {
   render(
-    <Alert title="Some title" titleHeadingLevel="h1">
+    <Alert title="Some title" component="h1">
       Some alert
     </Alert>
   );
@@ -588,17 +592,21 @@ test('Passes customIcon value to AlertIcon', () => {
 });
 
 test('Does not render with class pf-m-expandable by default', () => {
-  render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-expandable');
+  render(
+    <Alert title="Some title" data-testid="Alert-test-id">
+      Some alert
+    </Alert>
+  );
+  expect(screen.getByTestId('Alert-test-id')).not.toHaveClass('pf-m-expandable');
 });
 
 test('Renders with class pf-m-expandable when isExpandable = true', () => {
   render(
-    <Alert isExpandable title="Some title">
+    <Alert isExpandable title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
-  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-expandable');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-expandable');
 });
 
 test('Renders AlertToggleExpandButton inside pf-c-alert__toggle', () => {
@@ -613,26 +621,26 @@ test('Renders AlertToggleExpandButton inside pf-c-alert__toggle', () => {
 
 test('Does not render with class pf-m-expanded when AlertToggleExpandButton has not been clicked', () => {
   render(
-    <Alert isExpandable title="Some title">
+    <Alert isExpandable title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
 
-  expect(screen.getByLabelText('Default Alert')).not.toHaveClass('pf-m-expanded');
+  expect(screen.getByTestId('Alert-test-id')).not.toHaveClass('pf-m-expanded');
 });
 
 test('Renders with class pf-m-expanded once the AlertToggleExpandButton is clicked', async () => {
   const user = userEvent.setup();
 
   render(
-    <Alert isExpandable title="Some title">
+    <Alert isExpandable title="Some title" data-testid="Alert-test-id">
       Some alert
     </Alert>
   );
 
   await user.click(screen.getByRole('button'));
 
-  expect(screen.getByLabelText('Default Alert')).toHaveClass('pf-m-expanded');
+  expect(screen.getByTestId('Alert-test-id')).toHaveClass('pf-m-expanded');
 });
 
 test('Does not render children when isExpandable = true and AlertToggleExpandButton has not been clicked', () => {

package/src/components/Alert/examples/Alert.md

@@ -50,8 +50,9 @@ PatternFly supports several properties and variations that can be used to add ex
 
 * As demonstrated in the 3rd and 4th variations below, use the `actionClose` property to add an `<AlertActionCloseButton>` component, which can be used to manage and customize alert dismissals. `actionClose` can be used with or without the presence of `actionLinks`.
 
-* As demonstrated in the 5th and 6th variations below, use the `titleHeadingLevel` property to set the heading level of an alert title. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`.
-
+* As demonstrated in the 5th and 6th variations below, use the `component` property to set the element for an alert title.  
+  * If the `description` prop is not passed in, then the `component` prop should be set to a non-heading element such as a `span` or `div`.
+  * If the `description` prop is passed in, then the `component` prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`.
 ```ts
 import React from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
@@ -88,8 +89,10 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     }
   />
   <Alert variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />} />
-  <Alert variant="success" title="h1 Success alert title" titleHeadingLevel="h1" />
-  <Alert variant="success" title="h6 Success alert title" titleHeadingLevel="h6" />
+  <Alert variant="success" title="div success alert title" component="div" />
+  <Alert variant="success" title="h6 Success alert title" component="h6" >
+    <p>Short alert description</p>
+  </Alert>
   </React.Fragment>
 ```
 ### Alert timeout
@@ -360,4 +363,4 @@ Alerts that are asynchronously appended into dynamic [alert groups](/components/
 
 This example shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the [https://www.patternfly.org/v4/components/alert/accessibility](alert accessibility) for more information.
 ```ts file="AlertAsyncLiveRegion.tsx"
-```
+```

package/src/components/AlertGroup/AlertGroup.tsx

@@ -18,6 +18,8 @@ export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>,
   onOverflowClick?: () => void;
   /** Custom text to show for the overflow message */
   overflowMessage?: string;
+  /** Adds an accessible label to the alert group. */
+  'aria-label'?: string;
 }
 
 interface AlertGroupState {
@@ -53,7 +55,16 @@ export class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState
   }
 
   render() {
-    const { className, children, isToast, isLiveRegion, onOverflowClick, overflowMessage, ...props } = this.props;
+    const {
+      className,
+      children,
+      isToast,
+      isLiveRegion,
+      onOverflowClick,
+      overflowMessage,
+      'aria-label': ariaLabel,
+      ...props
+    } = this.props;
     const alertGroup = (
       <AlertGroupInline
         onOverflowClick={onOverflowClick}
@@ -61,6 +72,7 @@ export class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState
         isToast={isToast}
         isLiveRegion={isLiveRegion}
         overflowMessage={overflowMessage}
+        aria-label={ariaLabel}
         {...props}
       >
         {children}