@patternfly/react-core 6.4.0 → 6.4.1-prerelease.1

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.1-prerelease.0","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.1-prerelease.0","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.1-prerelease.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.0",
+  "version": "6.4.1-prerelease.1",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "b6d601ecff82f0b4eaf0d9604abaedeb5e3aa12c"
+  "gitHead": "2ec8ac7e1e6d08adcf36faca24d6a7a5a4043552"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Check/check';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
+import { getUniqueId } from '../../helpers/util';
 import { ASTERISK } from '../../helpers/htmlConstants';
 
 export interface CheckboxProps
@@ -39,6 +40,8 @@ export interface CheckboxProps
   description?: React.ReactNode;
   /** Body text of the checkbox */
   body?: React.ReactNode;
+  /** Custom aria-describedby value for the checkbox input. If not provided and description is set, a unique ID will be generated automatically. */
+  'aria-describedby'?: string;
   /** Sets the checkbox wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. */
   component?: React.ElementType;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -52,6 +55,7 @@ const defaultOnChange = () => {};
 
 interface CheckboxState {
   ouiaStateId: string;
+  descriptionId: string;
 }
 
 class Checkbox extends Component<CheckboxProps, CheckboxState> {
@@ -70,7 +74,8 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   constructor(props: any) {
     super(props);
     this.state = {
-      ouiaStateId: getDefaultOUIAId(Checkbox.displayName)
+      ouiaStateId: getDefaultOUIAId(Checkbox.displayName),
+      descriptionId: getUniqueId('pf-checkbox-description')
     };
   }
 
@@ -81,6 +86,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   render() {
     const {
       'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedBy,
       className,
       inputClassName,
       onChange,
@@ -115,6 +121,14 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       checkedProps.defaultChecked = defaultChecked;
     }
 
+    // Handle aria-describedby logic
+    let ariaDescribedByValue: string | undefined;
+    if (ariaDescribedBy !== undefined) {
+      ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
+    } else if (description) {
+      ariaDescribedByValue = this.state.descriptionId;
+    }
+
     const inputRendered = (
       <input
         {...props}
@@ -123,6 +137,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         onChange={this.handleChange}
         aria-invalid={!isValid}
         aria-label={ariaLabel}
+        aria-describedby={ariaDescribedByValue}
         disabled={isDisabled}
         required={isRequired}
         ref={(elem) => {
@@ -169,7 +184,11 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
             {labelRendered}
           </>
         )}
-        {description && <span className={css(styles.checkDescription)}>{description}</span>}
+        {description && (
+          <span id={this.state.descriptionId} className={css(styles.checkDescription)}>
+            {description}
+          </span>
+        )}
         {body && <span className={css(styles.checkBody)}>{body}</span>}
       </Component>
     );

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

@@ -287,3 +287,37 @@ test('Matches snapshot', () => {
 
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Sets aria-describedby when description is provided', () => {
+  render(<Checkbox id="test-id" description="test description" />);
+
+  const checkbox = screen.getByRole('checkbox');
+  const descriptionElement = screen.getByText('test description');
+
+  expect(checkbox).toHaveAttribute('aria-describedby', descriptionElement.id);
+  expect(descriptionElement).toHaveAttribute('id');
+});
+
+test('Sets custom aria-describedby when provided', () => {
+  render(<Checkbox id="test-id" description="test description" aria-describedby="custom-id" />);
+
+  const checkbox = screen.getByRole('checkbox');
+
+  expect(checkbox).toHaveAttribute('aria-describedby', 'custom-id');
+});
+
+test('Does not set aria-describedby when no description is provided', () => {
+  render(<Checkbox id="test-id" />);
+
+  const checkbox = screen.getByRole('checkbox');
+
+  expect(checkbox).not.toHaveAttribute('aria-describedby');
+});
+
+test('Does not set aria-describedby when description is provided but aria-describedby is empty string', () => {
+  render(<Checkbox id="test-id" description="test description" aria-describedby="" />);
+
+  const checkbox = screen.getByRole('checkbox');
+
+  expect(checkbox).not.toHaveAttribute('aria-describedby');
+});

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -77,6 +77,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   widths,
   colorVariant = DrawerColorVariant.default,
   focusTrap,
+  style,
   ...props
 }: DrawerPanelContentProps) => {
   const panel = useRef<HTMLDivElement>(undefined);
@@ -381,9 +382,10 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               }
             }}
             hidden={hidden}
-            {...((defaultSize || minSize || maxSize) && {
-              style: boundaryCssVars as React.CSSProperties
-            })}
+            style={{
+              ...((defaultSize || minSize || maxSize) && boundaryCssVars),
+              ...style
+            }}
             {...props}
             ref={panel}
           >

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -121,3 +121,40 @@ test('Renders with role="dialog" when focusTrap.enabled is true', () => {
 
   expect(screen.getByRole('dialog')).toBeInTheDocument();
 });
+
+test('Applies style prop as expected', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent style={{ backgroundColor: 'red', padding: '20px' }}>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  const panelContent = screen.getByText('Drawer panel content');
+  expect(panelContent).toHaveStyle({ backgroundColor: 'red', padding: '20px' });
+});
+
+test('Style prop overrides boundaryCssVars', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent
+        defaultSize="200px"
+        minSize="100px"
+        maxSize="400px"
+        style={{
+          '--pf-v6-c-drawer__panel--md--FlexBasis': '300px',
+          '--pf-v6-c-drawer__panel--md--FlexBasis--min': '150px',
+          '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
+        }}
+      >
+        Drawer panel content
+      </DrawerPanelContent>
+    </Drawer>
+  );
+
+  const panelContent = screen.getByText('Drawer panel content');
+  expect(panelContent).toHaveStyle({
+    '--pf-v6-c-drawer__panel--md--FlexBasis': '300px',
+    '--pf-v6-c-drawer__panel--md--FlexBasis--min': '150px',
+    '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
+  });
+});

package/src/components/Modal/Modal.tsx

@@ -27,6 +27,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
+  /** Id of the focus trap in the ModalContent component */
+  focusTrapId?: string;
   /** An id to use for the modal box container. */
   id?: string;
   /** Flag to show the modal. */

package/src/components/Modal/ModalContent.tsx

@@ -29,6 +29,8 @@ export interface ModalContentProps extends OUIAProps {
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
+  /** Id of the focus trap */
+  focusTrapId?: string;
   /** Flag to show the modal. */
   isOpen?: boolean;
   /** A callback for when the close button is clicked. */
@@ -69,6 +71,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   ouiaId,
   ouiaSafe = true,
   elementToFocus,
+  focusTrapId,
   ...props
 }: ModalContentProps) => {
   if (!isOpen) {
@@ -122,6 +125,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
           initialFocus: elementToFocus || undefined
         }}
         className={css(bullsEyeStyles.bullseye)}
+        id={focusTrapId}
       >
         {modalBox}
       </FocusTrap>

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

@@ -172,4 +172,13 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
     expect(articleSibling).not.toHaveAttribute('aria-hidden');
   });
+
+  test('Modal can add id to focus trap correctly for use with dropdowns', () => {
+    render(<Modal focusTrapId="focus-trap" isOpen onClose={jest.fn()} children="modal content" />);
+    expect(screen.getByRole('dialog', { name: /modal content/i }).parentElement).toHaveAttribute('id', 'focus-trap');
+    expect(screen.getByRole('dialog', { name: /modal content/i }).parentElement).toHaveAttribute(
+      'class',
+      'pf-v6-l-bullseye'
+    );
+  });
 });

package/src/components/Modal/__tests__/ModalContent.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { ModalContent } from '../ModalContent';
 
@@ -43,3 +43,19 @@ test('Modal Content Test with onclose', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Modal content can add id to focus trap correctly for use with dropdowns', () => {
+  render(
+    <ModalContent focusTrapId="focus-trap" isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(screen.getByRole('dialog', { name: /This is a ModalBox header/i }).parentElement).toHaveAttribute(
+    'id',
+    'focus-trap'
+  );
+  expect(screen.getByRole('dialog', { name: /This is a ModalBox header/i }).parentElement).toHaveAttribute(
+    'class',
+    'pf-v6-l-bullseye'
+  );
+});

package/src/components/Modal/examples/Modal.md

@@ -17,7 +17,7 @@ import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ### Basic modals
 
-Basic modals give users the option to either confirm or cancel an action. 
+Basic modals give users the option to either confirm or cancel an action.
 
 To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
@@ -71,7 +71,7 @@ To choose a specific width for a modal, use the `width` property. The following
 
 ### Custom header
 
-To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header. 
+To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header.
 
 ```ts file="./ModalCustomHeader.tsx"
 
@@ -113,9 +113,18 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 ### With dropdown
 
-To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. 
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal.
 
-To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
+built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
+`popperProps appendTo` property to id of the focus trap for the modal. This can be done by adding prop
+`focusTrapId` to the modal, and then setting the append location to that as per this example. Otherwise you
+can use `inline` to allow it to scroll within the modal itself. Appending to the focus trap should allow the
+menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
+focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
+listening to the
+`onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the
+dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
 
@@ -141,7 +150,7 @@ To enable form submission from a button in the modal's footer (outside of the `<
 
 ### Custom focus
 
-To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`. 
+To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`.
 
 ```ts file="./ModalCustomFocus.tsx"
 

package/src/components/Modal/examples/ModalWithDropdown.tsx

@@ -32,8 +32,10 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
   };
 
   const onFocus = () => {
-    const element = document.getElementById('modal-dropdown-toggle');
-    (element as HTMLElement).focus();
+    if (typeof document !== 'undefined') {
+      const element = document.getElementById('modal-dropdown-toggle');
+      (element as HTMLElement)?.focus();
+    }
   };
 
   const onEscapePress = (event: KeyboardEvent) => {
@@ -45,6 +47,16 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
     }
   };
 
+  const getAppendLocation = () => {
+    // document doesn't exist when PatternFly website docs framework gets pre-rendered
+    // this is just to avoid that issue - works fine at runtime without it
+    if (typeof document !== 'undefined' && document.getElementById) {
+      return document.getElementById('modal-with-dropdown-focus-trap');
+    } else {
+      return 'inline';
+    }
+  };
+
   return (
     <Fragment>
       <Button variant="primary" onClick={handleModalToggle}>
@@ -57,14 +69,21 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
         onEscapePress={onEscapePress}
         aria-labelledby="modal-with-dropdown"
         aria-describedby="modal-box-body-with-dropdown"
+        focusTrapId="modal-with-dropdown-focus-trap"
       >
         <ModalHeader title="Dropdown modal" labelId="modal-with-dropdown" />
         <ModalBody id="modal-box-body-with-dropdown">
           <div>
-            Set the dropdown <strong>menuAppendTo</strong> prop to <em>parent</em> in order to allow the dropdown menu
-            break out of the modal container. You'll also want to handle closing of the modal yourself, by listening to
-            the <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if
-            it's open without closing the entire modal.
+            Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
+            built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
+            popperProps appendTo property to id of the focus trap for the modal. This can be done by adding prop
+            focusTrapId to the modal, and then setting the append location to that as per this example. Otherwise you
+            can use "inline" to allow it to scroll within the modal itself. Appending to the focus trap should allow the
+            menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
+            focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
+            listening to the
+            <em>onEscapePress</em> callback on the Modal component. This allows the "escape" key to collapse the
+            dropdown without closing the entire modal.
           </div>
           <br />
           <div>
@@ -73,10 +92,18 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
               onSelect={onSelect}
               onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
               toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}>
+                <MenuToggle
+                  id="modal-dropdown-toggle"
+                  ref={toggleRef}
+                  onClick={handleDropdownToggle}
+                  isExpanded={isDropdownOpen}
+                >
                   Dropdown
                 </MenuToggle>
               )}
+              popperProps={{
+                appendTo: getAppendLocation()
+              }}
             >
               <DropdownList>
                 <DropdownItem value={0} key="action">

package/src/components/Progress/ProgressContainer.tsx

@@ -3,7 +3,7 @@ import progressStyle from '@patternfly/react-styles/css/components/Progress/prog
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import { AriaProps, ProgressBar } from './ProgressBar';
 import { ProgressHelperText } from './ProgressHelperText';
@@ -61,7 +61,7 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
 }
 
 const variantToIcon = {
-  danger: TimesCircleIcon,
+  danger: ExclamationCircleIcon,
   success: CheckCircleIcon,
   warning: ExclamationTriangleIcon
 };

package/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`ProgressContainer should match snapshot (auto-generated) 1`] = `
         width="1em"
       >
         <path
-          d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
         />
       </svg>
     </span>

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

@@ -298,7 +298,7 @@ exports[`Progress variant danger 1`] = `
           width="1em"
         >
           <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
       </span>

package/src/components/Radio/Radio.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Radio/radio';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getUniqueId } from '../../helpers/util';
 
 export interface RadioProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
@@ -39,6 +40,8 @@ export interface RadioProps
   description?: React.ReactNode;
   /** Body of the radio. */
   body?: React.ReactNode;
+  /** Custom aria-describedby value for the radio input. If not provided and description is set, a unique ID will be generated automatically. */
+  'aria-describedby'?: string;
   /** Sets the radio wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. */
   component?: React.ElementType;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -47,7 +50,7 @@ export interface RadioProps
   ouiaSafe?: boolean;
 }
 
-class Radio extends Component<RadioProps, { ouiaStateId: string }> {
+class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId: string }> {
   static displayName = 'Radio';
   static defaultProps: PickOptional<RadioProps> = {
     className: '',
@@ -63,7 +66,8 @@ class Radio extends Component<RadioProps, { ouiaStateId: string }> {
       console.error('Radio:', 'Radio requires an aria-label to be specified');
     }
     this.state = {
-      ouiaStateId: getDefaultOUIAId(Radio.displayName)
+      ouiaStateId: getDefaultOUIAId(Radio.displayName),
+      descriptionId: getUniqueId('pf-radio-description')
     };
   }
 
@@ -74,6 +78,7 @@ class Radio extends Component<RadioProps, { ouiaStateId: string }> {
   render() {
     const {
       'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedBy,
       checked,
       className,
       inputClassName,
@@ -98,6 +103,14 @@ class Radio extends Component<RadioProps, { ouiaStateId: string }> {
       console.error('Radio:', 'id is required to make input accessible');
     }
 
+    // Handle aria-describedby logic
+    let ariaDescribedByValue: string | undefined;
+    if (ariaDescribedBy !== undefined) {
+      ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
+    } else if (description) {
+      ariaDescribedByValue = this.state.descriptionId;
+    }
+
     const inputRendered = (
       <input
         {...props}
@@ -105,6 +118,7 @@ class Radio extends Component<RadioProps, { ouiaStateId: string }> {
         type="radio"
         onChange={this.handleChange}
         aria-invalid={!isValid}
+        aria-describedby={ariaDescribedByValue}
         disabled={isDisabled}
         checked={checked || isChecked}
         {...(checked === undefined && { defaultChecked })}
@@ -143,7 +157,11 @@ class Radio extends Component<RadioProps, { ouiaStateId: string }> {
             {labelRendered}
           </>
         )}
-        {description && <span className={css(styles.radioDescription)}>{description}</span>}
+        {description && (
+          <span id={this.state.descriptionId} className={css(styles.radioDescription)}>
+            {description}
+          </span>
+        )}
         {body && <span className={css(styles.radioBody)}>{body}</span>}
       </Component>
     );

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

@@ -139,4 +139,48 @@ describe('Radio', () => {
     expect(wrapper.children[0].tagName).toBe('LABEL');
     expect(wrapper.children[1].tagName).toBe('INPUT');
   });
+
+  test('Sets aria-describedby when description is provided', () => {
+    render(<Radio id="test-id" name="check" aria-label="test radio" description="test description" />);
+
+    const radio = screen.getByRole('radio');
+    const descriptionElement = screen.getByText('test description');
+
+    expect(radio).toHaveAttribute('aria-describedby', descriptionElement.id);
+    expect(descriptionElement).toHaveAttribute('id');
+  });
+
+  test('Sets custom aria-describedby when provided', () => {
+    render(
+      <Radio
+        id="test-id"
+        name="check"
+        aria-label="test radio"
+        description="test description"
+        aria-describedby="custom-id"
+      />
+    );
+
+    const radio = screen.getByRole('radio');
+
+    expect(radio).toHaveAttribute('aria-describedby', 'custom-id');
+  });
+
+  test('Does not set aria-describedby when no description is provided', () => {
+    render(<Radio id="test-id" name="check" aria-label="test radio" />);
+
+    const radio = screen.getByRole('radio');
+
+    expect(radio).not.toHaveAttribute('aria-describedby');
+  });
+
+  test('Does not set aria-describedby when description is provided but aria-describedby is empty string', () => {
+    render(
+      <Radio id="test-id" name="check" aria-label="test radio" description="test description" aria-describedby="" />
+    );
+
+    const radio = screen.getByRole('radio');
+
+    expect(radio).not.toHaveAttribute('aria-describedby');
+  });
 });