@patternfly/react-core 6.2.0-prerelease.2 → 6.2.0-prerelease.21

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.2.0-prerelease.1","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.2.0-prerelease.20","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.2.0-prerelease.1","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.2.0-prerelease.20","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.2.0-prerelease.1","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.2.0-prerelease.20","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.2",
+  "version": "6.2.0-prerelease.21",
   "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",
@@ -46,22 +46,22 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.2.0-prerelease.0",
-    "@patternfly/react-styles": "^6.2.0-prerelease.0",
-    "@patternfly/react-tokens": "^6.2.0-prerelease.0",
-    "focus-trap": "7.6.2",
+    "@patternfly/react-icons": "^6.2.0-prerelease.4",
+    "@patternfly/react-styles": "^6.2.0-prerelease.4",
+    "@patternfly/react-tokens": "^6.2.0-prerelease.4",
+    "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.1.0-prerelease.11",
+    "@patternfly/patternfly": "6.2.0-prerelease.7",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
-    "fs-extra": "^11.2.0"
+    "fs-extra": "^11.3.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ffab2937260ccd96a62d143b33954fe2c9f1e5e4"
+  "gitHead": "a7ed28e1cb39269fe84e6ca2dd3585df0d9622b2"
 }

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

@@ -6,7 +6,6 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
     class="pf-v6-c-about-modal-box__close"
   >
     <button
-      aria-disabled="false"
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -42,7 +41,6 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
     class="pf-v6-c-about-modal-box__close"
   >
     <button
-      aria-disabled="false"
       aria-label="Klose Daylok"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -78,7 +76,6 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
     class="pf-v6-c-about-modal-box__close"
   >
     <button
-      aria-disabled="false"
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-2"

package/src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 import { AlertIcon } from './AlertIcon';
@@ -124,7 +124,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const titleRef = React.useRef(null);
   const TitleComponent = component as any;
 
-  const divRef = React.useRef<HTMLDivElement>();
+  const divRef = React.useRef<HTMLDivElement>(undefined);
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   React.useEffect(() => {
     if (!titleRef.current || !truncateTitle) {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { Alert, AlertVariant } from '../Alert';
 import { AlertContext } from '../AlertContext';

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`AlertActionCloseButton should match snapshot 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     aria-label="Close some label alert: test title"
     class="pf-v6-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-1"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     class="pf-v6-c-button pf-m-link pf-m-inline ''"
     data-ouia-component-id="OUIA-Generated-Button-link-1"
     data-ouia-component-type="PF6/Button"

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

@@ -76,7 +76,7 @@ test('Renders with passed aria-label', () => {
 });
 
 test('BackToTop can be accessed via passed innerRef', () => {
-  const testRef: RefObject<HTMLElement> = React.createRef();
+  const testRef: RefObject<HTMLElement | null> = React.createRef();
   render(<BackToTop innerRef={testRef} isAlwaysVisible />);
   global.scrollTo = jest.fn();
   testRef.current?.click();

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -48,7 +48,7 @@ const dropdownItems = [
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const badgeToggleRef = React.useRef<HTMLButtonElement>();
+  const badgeToggleRef = React.useRef<HTMLButtonElement>(undefined);
 
   const onToggle = () => setIsOpen(!isOpen);
 

package/src/components/Button/Button.tsx

@@ -164,12 +164,14 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     </span>
   );
   const _children = children && <span className={css('pf-v6-c-button__text')}>{children}</span>;
+  // We only want to render the aria-disabled attribute when true, similar to the disabled attribute natively.
+  const shouldRenderAriaDisabled = isAriaDisabled || (!isButtonElement && isDisabled);
 
   return (
     <Component
       {...props}
       {...(isAriaDisabled ? preventedEvents : null)}
-      aria-disabled={isAriaDisabled || (!isButtonElement && isDisabled)}
+      {...(shouldRenderAriaDisabled && { 'aria-disabled': true })}
       aria-label={ariaLabel}
       className={css(
         styles.button,

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

@@ -1,8 +1,7 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-
 import { Button, ButtonState, ButtonVariant } from '../Button';
+import styles from '@patternfly/react-styles/css/components/Button/button';
 
 Object.values(ButtonVariant).forEach((variant) => {
   if (variant !== 'primary') {
@@ -65,11 +64,6 @@ test('Does not render with class pf-m-disabled by default when isDisabled = true
   expect(screen.getByRole('button')).not.toHaveClass('pf-m-disabled');
 });
 
-test('aria-disabled is set to false when isDisabled = true', () => {
-  render(<Button isDisabled>Disabled Button</Button>);
-  expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'false');
-});
-
 test('Renders with class pf-m-disabled when isDisabled = true and component is not a button', () => {
   render(
     <Button isDisabled component="a">
@@ -79,9 +73,28 @@ test('Renders with class pf-m-disabled when isDisabled = true and component is n
   expect(screen.getByText('Disabled Anchor Button').parentElement).toHaveClass('pf-m-disabled');
 });
 
-test('Renders with class pf-m-aria-disabled when isAriaDisabled = true', () => {
+test(`aria-disabled and class ${styles.modifiers.ariaDisabled} are not rendered when isAriaDisabled is not passed by default`, () => {
+  render(<Button>Button</Button>);
+
+  const button = screen.getByRole('button');
+  expect(button).not.toHaveAttribute('aria-disabled');
+  expect(button).not.toHaveClass(styles.modifiers.ariaDisabled);
+});
+
+test(`aria-disabled and class ${styles.modifiers.ariaDisabled} are not rendered when isDisabled is true, but isAriaDisabled is not passed`, () => {
+  render(<Button isDisabled>Disabled Button</Button>);
+
+  const button = screen.getByRole('button');
+  expect(button).not.toHaveAttribute('aria-disabled');
+  expect(button).not.toHaveClass(styles.modifiers.ariaDisabled);
+});
+
+test(`Renders with class ${styles.modifiers.ariaDisabled} and aria-disabled attribute when isAriaDisabled = true`, () => {
   render(<Button isAriaDisabled>Disabled yet focusable button</Button>);
-  expect(screen.getByRole('button')).toHaveClass('pf-m-aria-disabled');
+  const button = screen.getByRole('button');
+
+  expect(button).toHaveAttribute('aria-disabled', 'true');
+  expect(button).toHaveClass(styles.modifiers.ariaDisabled);
 });
 
 test('Does not disable button when isDisabled = true and component = a', () => {

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

@@ -3,10 +3,9 @@
 exports[`Renders basic button 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-30"
+    data-ouia-component-id="OUIA-Generated-Button-primary-31"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Button/examples/Button.md

@@ -14,7 +14,6 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import { Link } from '@reach/router';
 
 ## Examples
 
@@ -86,11 +85,11 @@ Inline links should use `component="span"` and the `isInline` property to wrap i
 ```ts file="./ButtonInlineSpanLink.tsx"
 ```
 
-### Router link
+### Custom component
 
-Router links can be used for in-app linking in React environments to prevent page reloading.
+In addition to being able to pass a string to the `component` property, you can provide more fine-tuned customization by passing a callback that returns a component.
 
-```ts file="./ButtonRouterLink.tsx"
+```ts file="./ButtonCustomComponent.tsx"
 ```
 
 ### Aria-disabled examples
@@ -124,3 +123,13 @@ Stateful buttons are ideal for displaying the state of notifications. Use `varia
 
 ```ts file="./ButtonStateful.tsx"
 ```
+
+## Using router links
+
+Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can follow our [custom component example](#custom-component) and pass a callback to the `component` property of the `Button`:
+
+```nolive
+<Button variant="link" component={(props: any) => <Link {...props} to="#" />}>
+  Router link
+</Button>
+```

package/src/components/Button/examples/ButtonCustomComponent.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+
+export const ButtonCustomComponent: React.FunctionComponent = () => (
+  <Button variant="link" component={(props: any) => <a {...props} href="#" />}>
+    Router link
+  </Button>
+);

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, type JSX } from 'react';
 import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Select, SelectList, SelectOption } from '../Select';
@@ -169,7 +169,7 @@ export const CalendarMonth = ({
   const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
 
   const [hoveredDate, setHoveredDate] = React.useState<Date>(undefined);
-  const focusRef = React.useRef<HTMLButtonElement>();
+  const focusRef = React.useRef<HTMLButtonElement>(undefined);
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
   const [shouldFocus, setShouldFocus] = React.useState(false);
 

package/src/components/Card/Card.tsx

@@ -3,6 +3,8 @@ import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
+import type { JSX } from 'react';
+
 export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   /** Content rendered inside the Card */
   children?: React.ReactNode;

package/src/components/Card/CardBody.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 
+import type { JSX } from 'react';
+
 export interface CardBodyProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Card Body */
   children?: React.ReactNode;

package/src/components/Card/CardFooter.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 
+import type { JSX } from 'react';
+
 export interface CardFooterProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Card Footer */
   children?: React.ReactNode;

package/src/components/Card/CardTitle.tsx

@@ -3,6 +3,8 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
 
+import type { JSX } from 'react';
+
 export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the CardTitle */
   children?: React.ReactNode;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';

package/src/components/Card/__tests__/CardBody.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardBody } from '../CardBody';
 

package/src/components/Card/__tests__/CardFooter.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardFooter } from '../CardFooter';
 

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -21,7 +21,6 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
       class="pf-v6-c-card__header-toggle"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF6/Button"

package/src/components/Checkbox/Checkbox.tsx

@@ -125,7 +125,9 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
         aria-label={ariaLabel}
         disabled={isDisabled}
         required={isRequired}
-        ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+        ref={(elem) => {
+          elem && (elem.indeterminate = isChecked === null);
+        }}
         {...checkedProps}
         {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
       />

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -89,7 +89,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */
-  children: string;
+  children: string | string[];
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -103,7 +103,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   timer = null as number;
   constructor(props: ClipboardCopyProps) {
     super(props);
-    const text = Array.isArray(this.props.children) ? this.props.children.join('') : (this.props.children as string);
+    const text = Array.isArray(this.props.children) ? this.props.children.join(' ') : (this.props.children as string);
     this.state = {
       text,
       expanded: this.props.isExpanded,
@@ -134,7 +134,9 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   componentDidUpdate = (prevProps: ClipboardCopyProps, prevState: ClipboardCopyState) => {
     if (prevProps.children !== this.props.children) {
-      const newText = this.props.children as string;
+      const newText = Array.isArray(this.props.children)
+        ? this.props.children.join(' ')
+        : (this.props.children as string);
       this.setState({ text: newText, textWhenExpanded: newText });
     }
   };

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

@@ -336,6 +336,21 @@ test('Does not call onCopy when ClipboardCopyButton is not clicked', async () =>
   expect(onCopyMock).not.toHaveBeenCalled();
 });
 
+test('Can take array of strings as children', async () => {
+  const onCopyMock = jest.fn();
+  const user = userEvent.setup();
+  const childrenArray = children.split(' ');
+
+  // sanity check to ensure we are checking an array with at least 2 elements
+  expect(childrenArray.length).toBeGreaterThan(1);
+
+  render(<ClipboardCopy onCopy={onCopyMock}>{childrenArray}</ClipboardCopy>);
+
+  await user.click(screen.getByRole('button', { name: 'Test CCB clicker' }));
+
+  expect(onCopyMock).toHaveBeenCalledWith(expect.any(Object), children);
+});
+
 test('Matches snapshot', () => {
   const { asFragment } = render(
     <ClipboardCopy id="snapshot" ouiaId="snapshot">

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

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-26"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-27"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -28,7 +28,6 @@ exports[`Matches snapshot 1`] = `
       onTooltipHidden clicker
     </a>
     <button
-      aria-disabled="false"
       aria-label="Copyable input"
       aria-labelledby="button-id text-id"
       class="pf-v6-c-button pf-m-control"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <button
     aria-controls="content-id"
-    aria-disabled="false"
     aria-expanded="false"
     aria-labelledby="main-id text-id"
     class="pf-v6-c-button pf-m-control"

package/src/components/DataList/DataList.tsx

@@ -38,7 +38,7 @@ export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
   /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
   onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
   /** @hide custom ref of the DataList */
-  innerRef?: React.RefObject<HTMLUListElement>;
+  innerRef?: React.RefObject<HTMLUListElement | null>;
 }
 
 interface DataListContextProps {

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap

@@ -11,7 +11,6 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
     >
       <button
         aria-controls="''"
-        aria-disabled="false"
         aria-expanded="false"
         aria-label="'Details'"
         class="pf-v6-c-button pf-m-plain"

package/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap

@@ -10,7 +10,6 @@ exports[`Renders to match snapshot 1`] = `
     >
       <button
         aria-controls="false"
-        aria-disabled="false"
         aria-expanded="false"
         aria-label="Details"
         aria-labelledby=" ex-toggle2"

package/src/components/DatePicker/DatePicker.tsx

@@ -133,9 +133,9 @@ const DatePickerBase = (
   const [textInputFocused, setTextInputFocused] = React.useState(false);
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
   const style = { [cssFormControlWidthChars.name]: widthChars, ...styleProps };
-  const buttonRef = React.useRef<HTMLButtonElement>();
-  const datePickerWrapperRef = React.useRef<HTMLDivElement>();
-  const triggerRef = React.useRef<HTMLDivElement>();
+  const buttonRef = React.useRef<HTMLButtonElement>(undefined);
+  const datePickerWrapperRef = React.useRef<HTMLDivElement>(undefined);
+  const triggerRef = React.useRef<HTMLDivElement>(undefined);
   const dateIsRequired = requiredDateOptions?.isRequired || false;
   const emptyDateText = requiredDateOptions?.emptyDateText || 'Date cannot be blank';
 

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

@@ -34,7 +34,6 @@ exports[`With popover opened 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
-            aria-disabled="false"
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
@@ -95,7 +94,6 @@ exports[`With popover opened 1`] = `
                 class="pf-v6-c-calendar-month__header-nav-control pf-m-prev-month"
               >
                 <button
-                  aria-disabled="false"
                   aria-label="Previous month"
                   class="pf-v6-c-button pf-m-plain"
                   data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -201,7 +199,6 @@ exports[`With popover opened 1`] = `
                 class="pf-v6-c-calendar-month__header-nav-control pf-m-next-month"
               >
                 <button
-                  aria-disabled="false"
                   aria-label="Next month"
                   class="pf-v6-c-button pf-m-plain"
                   data-ouia-component-id="OUIA-Generated-Button-plain-2"
@@ -829,7 +826,6 @@ exports[`disabled date picker 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
-            aria-disabled="false"
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"

package/src/components/DescriptionList/DescriptionListTermHelpTextButton.tsx

@@ -13,15 +13,33 @@ export const DescriptionListTermHelpTextButton: React.FunctionComponent<Descript
   children,
   className,
   ...props
-}: DescriptionListTermHelpTextButtonProps) => (
-  <span
-    className={css(className, styles.descriptionListText, styles.modifiers.helpText)}
-    role="button"
-    type="button"
-    tabIndex={0}
-    {...props}
-  >
-    {children}
-  </span>
-);
+}: DescriptionListTermHelpTextButtonProps) => {
+  const helpTextRef = React.createRef<HTMLSpanElement>();
+
+  const handleKeys = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (!helpTextRef.current || helpTextRef.current !== (event.target as HTMLElement)) {
+      return;
+    }
+
+    const key = event.key;
+    if (key === 'Enter' || key === ' ') {
+      event.preventDefault();
+      helpTextRef.current.click();
+    }
+  };
+
+  return (
+    <span
+      ref={helpTextRef}
+      className={css(className, styles.descriptionListText, styles.modifiers.helpText)}
+      role="button"
+      type="button"
+      tabIndex={0}
+      onKeyDown={(event) => handleKeys(event)}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
 DescriptionListTermHelpTextButton.displayName = 'DescriptionListTermHelpTextButton';

package/src/components/Drawer/Drawer.tsx

@@ -30,8 +30,8 @@ export interface DrawerContextProps {
   isStatic: boolean;
   onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
   position?: string;
-  drawerRef?: React.RefObject<HTMLDivElement>;
-  drawerContentRef?: React.RefObject<HTMLDivElement>;
+  drawerRef?: React.RefObject<HTMLDivElement | null>;
+  drawerContentRef?: React.RefObject<HTMLDivElement | null>;
   isInline: boolean;
 }
 
@@ -55,8 +55,8 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   onExpand = () => {},
   ...props
 }: DrawerProps) => {
-  const drawerRef = React.useRef<HTMLDivElement>();
-  const drawerContentRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
+  const drawerContentRef = React.useRef<HTMLDivElement>(undefined);
 
   return (
     <DrawerContext.Provider value={{ isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline }}>

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -79,8 +79,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   focusTrap,
   ...props
 }: DrawerPanelContentProps) => {
-  const panel = React.useRef<HTMLDivElement>();
-  const splitterRef = React.useRef<HTMLDivElement>();
+  const panel = React.useRef<HTMLDivElement>(undefined);
+  const splitterRef = React.useRef<HTMLDivElement>(undefined);
   const [separatorValue, setSeparatorValue] = React.useState(0);
   const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } =
     React.useContext(DrawerContext);