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

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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.13",
+  "version": "5.0.0-alpha.14",
   "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": "15626ee299af769871fd0852efd69373fa1e49b5"
 }

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',

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', () => {
@@ -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/Menu/Menu.tsx

@@ -25,8 +25,6 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
     event: React.FormEvent<HTMLInputElement> | React.SyntheticEvent<HTMLButtonElement>,
     value: string
   ) => void;
-  /** Accessibility label */
-  'aria-label'?: string;
   /** @beta Indicates if menu contains a flyout menu */
   containsFlyout?: boolean;
   /** @beta Indicating that the menu should have nav flyout styling */
@@ -250,7 +248,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
 
   render() {
     const {
-      'aria-label': ariaLabel,
       id,
       children,
       className,
@@ -339,7 +336,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             _isMenuDrilledIn && styles.modifiers.drilledIn,
             className
           )}
-          aria-label={ariaLabel}
           ref={this.menuRef}
           {...getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           {...props}

package/src/components/Menu/MenuItem.tsx

@@ -64,7 +64,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   direction?: 'down' | 'up';
   /** @beta True if item is on current selection path */
   isOnPath?: boolean;
-  /** Accessibility label */
+  /** Adds an accessible name to the menu item. */
   'aria-label'?: string;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
@@ -103,6 +103,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   isOnPath,
   innerRef,
   id,
+  'aria-label': ariaLabel,
   ...props
 }: MenuItemProps) => {
   const {
@@ -312,6 +313,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       {...(flyoutMenu && { onKeyDown: handleFlyout })}
       ref={ref}
       role={!hasCheckbox ? 'none' : 'menuitem'}
+      {...(hasCheckbox && { 'aria-label': ariaLabel })}
       {...props}
     >
       <GenerateId>
@@ -321,7 +323,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             tabIndex={-1}
             className={css(styles.menuItem, getIsSelected() && !hasCheckbox && styles.modifiers.selected, className)}
             aria-current={getAriaCurrent()}
-            {...(!hasCheckbox && { disabled: isDisabled })}
+            {...(!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel })}
             {...(!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' })}
             {...(!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() })}
             ref={innerRef}

package/src/components/Menu/MenuList.tsx

@@ -12,12 +12,15 @@ export interface MenuListProps extends React.HTMLProps<HTMLUListElement> {
    * for a non-checkbox menu. Only applies when the menu's role is "listbox".
    */
   isAriaMultiselectable?: boolean;
+  /** Adds an accessible name to the menu. */
+  'aria-label'?: string;
 }
 
 export const MenuList: React.FunctionComponent<MenuListProps> = ({
   children = null,
   className,
   isAriaMultiselectable = false,
+  'aria-label': ariaLabel,
   ...props
 }: MenuListProps) => {
   const { role } = React.useContext(MenuContext);
@@ -27,6 +30,7 @@ export const MenuList: React.FunctionComponent<MenuListProps> = ({
       role={role}
       {...(role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable })}
       className={css(styles.menuList, className)}
+      aria-label={ariaLabel}
       {...props}
     >
       {children}

package/src/components/NumberInput/NumberInput.tsx

@@ -51,8 +51,6 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   minusBtnProps?: ButtonProps;
   /** Additional properties added to the plus button */
   plusBtnProps?: ButtonProps;
-  /** Allow the user to clear out the input to an empty string (recommended) */
-  allowEmptyInput?: boolean;
 }
 
 type DefaultKeyDownHandlerArgs = Pick<NumberInputProps, 'inputName' | 'onMinus' | 'onPlus'>;
@@ -89,12 +87,8 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   inputProps,
   minusBtnProps,
   plusBtnProps,
-  allowEmptyInput = false,
   ...props
 }: NumberInputProps) => {
-  if (!allowEmptyInput) {
-    value = value || 0;
-  }
   const numberInputUnit = <div className={css(styles.numberInputUnit)}>{unit}</div>;
   const keyDownHandler =
     inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });

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

@@ -210,12 +210,6 @@ describe('numberInput', () => {
   test('renders 0 if null value passed', () => {
     render(<NumberInput value={null} />);
     const input = screen.getByRole('spinbutton');
-    expect(input).toHaveDisplayValue('0');
-  });
-
-  test('renders nothing if null value passed with allow empty', () => {
-    render(<NumberInput allowEmptyInput value={null} />);
-    const input = screen.getByRole('spinbutton');
     expect(input).toHaveDisplayValue('');
   });
 

package/src/components/NumberInput/examples/NumberInputCustomStep.tsx

@@ -24,7 +24,6 @@ export const NumberInputCustomStep: React.FunctionComponent = () => {
       inputAriaLabel="number input"
       minusBtnAriaLabel="minus"
       plusBtnAriaLabel="plus"
-      allowEmptyInput
     />
   );
 };

package/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx

@@ -46,7 +46,6 @@ export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () =>
       inputAriaLabel="number input"
       minusBtnAriaLabel="minus"
       plusBtnAriaLabel="plus"
-      allowEmptyInput
     />
   );
 };

package/src/components/NumberInput/examples/NumberInputDefault.tsx

@@ -29,7 +29,6 @@ export const NumberInputDefault: React.FunctionComponent = () => {
       inputAriaLabel="number input"
       minusBtnAriaLabel="minus"
       plusBtnAriaLabel="plus"
-      allowEmptyInput
     />
   );
 };

package/src/components/NumberInput/examples/NumberInputDisabled.tsx

@@ -35,7 +35,6 @@ export const NumberInputDisabled: React.FunctionComponent = () => {
       plusBtnAriaLabel="plus"
       unit="%"
       isDisabled
-      allowEmptyInput
     />
   );
 };

package/src/components/NumberInput/examples/NumberInputUnit.tsx

@@ -37,7 +37,6 @@ export const NumberInputUnit: React.FunctionComponent = () => {
         minusBtnAriaLabel="minus 1"
         plusBtnAriaLabel="plus 1"
         unit="%"
-        allowEmptyInput
       />
       <br />
       <br />
@@ -52,7 +51,6 @@ export const NumberInputUnit: React.FunctionComponent = () => {
         plusBtnAriaLabel="plus 0.01"
         unit="$"
         unitPosition="before"
-        allowEmptyInput
       />
     </React.Fragment>
   );

package/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx

@@ -59,7 +59,6 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => {
         minusBtnAriaLabel="minus"
         plusBtnAriaLabel="plus"
         unit="%"
-        allowEmptyInput
       />
     </React.Fragment>
   );

package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx

@@ -35,7 +35,6 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 2 minus"
         plusBtnAriaLabel="input 2 plus"
         widthChars={1}
-        allowEmptyInput
       />
       <br />
       <br />
@@ -49,7 +48,6 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 2 minus"
         plusBtnAriaLabel="input 2 plus"
         widthChars={10}
-        allowEmptyInput
       />
       <br />
       <br />
@@ -63,7 +61,6 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 3 minus"
         plusBtnAriaLabel="input 3 plus"
         widthChars={5}
-        allowEmptyInput
       />
       <br />
       <br />
@@ -77,7 +74,6 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 4 minus"
         plusBtnAriaLabel="input 4 plus"
         widthChars={5}
-        allowEmptyInput
       />
     </React.Fragment>
   );

package/src/components/NumberInput/examples/NumberInputWithStatus.tsx

@@ -53,7 +53,6 @@ export const NumberInputWithStatus: React.FunctionComponent = () => {
         inputAriaLabel="number input"
         minusBtnAriaLabel="minus"
         plusBtnAriaLabel="plus"
-        allowEmptyInput
       />
     </>
   );

package/src/components/Page/PageGroup.tsx

@@ -23,7 +23,7 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageGroup has a scrolling overflow */
   hasOverflowScroll?: boolean;
-  /** Adds an accessible name to the page group. Required when the hasOverflowScroll prop is set to true. */
+  /** Adds an accessible name to the page group when the hasOverflowScroll prop is set to true. */
   'aria-label'?: string;
 }
 
@@ -57,8 +57,7 @@ export const PageGroup = ({
         hasOverflowScroll && styles.modifiers.overflowScroll,
         className
       )}
-      {...(hasOverflowScroll && { tabIndex: 0 })}
-      aria-label={ariaLabel}
+      {...(hasOverflowScroll && { tabIndex: 0, role: 'region', 'aria-label': ariaLabel })}
     >
       {children}
     </div>

package/src/components/Page/PageNavigation.tsx

@@ -26,7 +26,7 @@ export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageNavigation has a scrolling overflow */
   hasOverflowScroll?: boolean;
-  /** Adds an accessible name to the page navigation. Required when the hasOverflowScroll prop is set to true. */
+  /** Adds an accessible name to the page navigation when the hasOverflowScroll prop is set to true. */
   'aria-label'?: string;
 }
 
@@ -61,8 +61,7 @@ export const PageNavigation = ({
         hasOverflowScroll && styles.modifiers.overflowScroll,
         className
       )}
-      {...(hasOverflowScroll && { tabIndex: 0 })}
-      aria-label={ariaLabel}
+      {...(hasOverflowScroll && { tabIndex: 0, role: 'region', 'aria-label': ariaLabel })}
       {...props}
     >
       {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}

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

@@ -356,7 +356,12 @@ describe('Page', () => {
         tertiaryNav={nav}
         isBreadcrumbGrouped
         isTertiaryNavGrouped
-        groupProps={{ stickyOnBreakpoint: { default: 'bottom' }, hasShadowTop: true, 'aria-label': 'test' }}
+        groupProps={{
+          stickyOnBreakpoint: { default: 'bottom' },
+          hasShadowTop: true,
+          hasOverflowScroll: true,
+          'aria-label': 'test'
+        }}
       >
         <PageSection variant="default">Section with default background</PageSection>
         <PageSection variant="light">Section with light background</PageSection>

package/src/components/Page/__tests__/PageGroup.test.tsx

@@ -35,7 +35,11 @@ describe('page group', () => {
   });
 
   test('Renders with the passed aria-label applied', () => {
-    render(<PageGroup aria-label="Test label">test</PageGroup>);
+    render(
+      <PageGroup aria-label="Test label" hasOverflowScroll>
+        test
+      </PageGroup>
+    );
 
     expect(screen.getByText('test')).toHaveAccessibleName('Test label');
   });

package/src/components/Page/__tests__/PageNavigation.test.tsx

@@ -39,7 +39,11 @@ describe('page navigation', () => {
   });
 
   test('Renders with the passed aria-label applied', () => {
-    render(<PageNavigation aria-label="Test label">test</PageNavigation>);
+    render(
+      <PageNavigation aria-label="Test label" hasOverflowScroll>
+        test
+      </PageNavigation>
+    );
 
     expect(screen.getByText('test')).toHaveAccessibleName('Test label');
   });

package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -786,7 +786,9 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
     >
       <div
         aria-label="test"
-        class="pf-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top"
+        class="pf-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top pf-m-overflow-scroll"
+        role="region"
+        tabindex="0"
       >
         <div
           class="pf-c-page__main-nav"

package/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap

@@ -34,6 +34,7 @@ exports[`page group Verify overflow scroll 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-page__main-group pf-m-overflow-scroll"
+    role="region"
     tabindex="0"
   >
     test

package/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap

@@ -48,6 +48,7 @@ exports[`page navigation Verify overflow scroll 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-page__main-nav pf-m-overflow-scroll"
+    role="region"
     tabindex="0"
   >
     test

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -100,7 +100,9 @@ export const ProgressStep: React.FunctionComponent<ProgressStepProps> = ({
           id={titleId}
           ref={stepRef}
           {...(popoverRender && { type: 'button' })}
-          {...(props.id !== undefined && titleId !== undefined && { 'aria-labelledby': `${props.id} ${titleId}` })}
+          {...(props.id !== undefined &&
+            titleId !== undefined &&
+            popoverRender && { 'aria-labelledby': `${props.id} ${titleId}` })}
         >
           {children}
           {popoverRender && popoverRender(stepRef)}

package/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx

@@ -149,11 +149,11 @@ test('Does not renders with aria-labelledBy by default on Component element', ()
 
 test('Renders with an accessible name that matches children', () => {
   render(
-    <ProgressStep id="test-id" titleId="title-id">
+    <ProgressStep popoverRender={stepRef => <div>Popover content</div>} id="test-id" titleId="title-id">
       Test
     </ProgressStep>
   );
-  expect(screen.getByText('Test')).toHaveAccessibleName('Test');
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test Popover content');
 });
 
 test('Renders with popoverRender element', () => {