npm - @patternfly/react-core - Versions diffs - 6.2.0-prerelease.3 → 6.2.0-prerelease.30 - Mend

@patternfly/react-core 6.2.0-prerelease.3 → 6.2.0-prerelease.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2148) hide show

package/src/components/DataList/DataListItem.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ export interface DataListItemProps extends Omit<React.HTMLProps<HTMLLIElement>,
   children: React.ReactNode;
   /** Additional classes added to the DataList item should be either <DataListItemRow> or <DataListContent> */
   className?: string;
-  /** Adds accessible text to the DataList item */
+  /** Adds an accessible name to the selectable input if one is rendered */
   'aria-labelledby': string;
   /** Unique id for the DataList item */
   id?: string;
@@ -86,9 +86,7 @@ class DataListItem extends React.Component<DataListItemProps> {
                 selectedDataListItemId && isSelected && styles.modifiers.selected,
                 className
               )}
-              aria-labelledby={ariaLabelledBy}
               {...(isSelectable && { tabIndex: 0, onClick: selectDataListItem, onKeyDown })}
-              {...(isSelectable && isSelected && { 'aria-selected': true })}
               {...props}
             >
               {onSelectableRowChange && (

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListItem.test.tsx.snap CHANGED Viewed

@@ -3,7 +3,6 @@
 exports[`DataListItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
-    aria-labelledby="string"
     class="pf-v6-c-data-list__item ''"
     id="''"
   >

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

@@ -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__/DataListItem.test.tsx.snap CHANGED Viewed

@@ -3,7 +3,6 @@
 exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <li
-    aria-labelledby="item-1"
     class="pf-v6-c-data-list__item"
     id=""
   />

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);

package/src/components/Drawer/__tests__/DrawerPanelDescription.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { DrawerPanelDescription } from '../DrawerPanelDescription';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';

package/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap CHANGED Viewed

@@ -34,7 +34,6 @@ exports[`Drawer expands from bottom 1`] = `
               class="pf-v6-c-drawer__close"
             >
               <button
-                aria-disabled="false"
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
                 data-ouia-component-id="OUIA-Generated-Button-plain-4"
@@ -127,7 +126,6 @@ exports[`Drawer has resizable callback and id 1`] = `
                 class="pf-v6-c-drawer__close"
               >
                 <button
-                  aria-disabled="false"
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
                   data-ouia-component-id="OUIA-Generated-Button-plain-6"
@@ -222,7 +220,6 @@ exports[`Drawer has resizable css and color variants 1`] = `
                 class="pf-v6-c-drawer__close"
               >
                 <button
-                  aria-disabled="false"
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
                   data-ouia-component-id="OUIA-Generated-Button-plain-5"
@@ -351,7 +348,6 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
               class="pf-v6-c-drawer__close"
             >
               <button
-                aria-disabled="false"
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
                 data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -425,7 +421,6 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
               class="pf-v6-c-drawer__close"
             >
               <button
-                aria-disabled="false"
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
                 data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -499,7 +494,6 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
               class="pf-v6-c-drawer__close"
             >
               <button
-                aria-disabled="false"
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
                 data-ouia-component-id="OUIA-Generated-Button-plain-2"

package/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ import {
 export const DrawerAdditionalSectionAboveContent: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBasic.tsx CHANGED Viewed

@@ -14,7 +14,7 @@ import {
 export const DrawerBasic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBasicInline.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerBasicInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBreakpoint.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerBreakpoint: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerInlinePanelStart.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerInlinePanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerModifiedContentPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerModifiedPanelPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelBottom.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerPanelBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelEnd.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerPanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelStart.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerPanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableAtEnd.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerResizableAtEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableAtStart.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerResizableAtStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableOnBottom.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerResizableOnBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableOnInline.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import {
 export const DrawerResizableOnInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx CHANGED Viewed

@@ -14,7 +14,7 @@ import {
 export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerStatic.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/
 export const DrawerStatic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Dropdown/Dropdown.tsx CHANGED Viewed

@@ -27,7 +27,7 @@ export interface DropdownToggleProps {
   /**  Dropdown toggle node. */
   toggleNode: React.ReactNode;
   /** Reference to the toggle. */
-  toggleRef?: React.RefObject<HTMLButtonElement>;
+  toggleRef?: React.RefObject<HTMLButtonElement | null>;
 }
 /**
@@ -103,15 +103,15 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   focusTimeoutDelay = 0,
   ...props
 }: DropdownProps) => {
-  const localMenuRef = React.useRef<HTMLDivElement>();
-  const localToggleRef = React.useRef<HTMLButtonElement>();
+  const localMenuRef = React.useRef<HTMLDivElement>(undefined);
+  const localToggleRef = React.useRef<HTMLButtonElement>(undefined);
   const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
-  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  const menuRef = (innerRef as React.RefObject<HTMLDivElement | null>) || localMenuRef;
   const toggleRef =
     typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
       ? localToggleRef
-      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
+      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement | null>);
   const prevIsOpen = React.useRef<boolean>(isOpen);
   React.useEffect(() => {

package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HT
   /** Additional classes added to the wrapper. */
   className?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement | null>;
   /** Accessible label for the dual list selector controls wrapper. */
   'aria-label'?: string;
 }

package/src/components/DualListSelector/DualListSelectorList.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElem
   /** Content rendered inside the dual list selector list. */
   children?: React.ReactNode;
   /** @hide forwarded ref */
-  innerRef?: React.RefObject<HTMLUListElement>;
+  innerRef?: React.RefObject<HTMLUListElement | null>;
 }
 export const DualListSelectorListBase: React.FunctionComponent<DualListSelectorListProps> = ({

package/src/components/DualListSelector/DualListSelectorListItem.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   /** @hide Internal field used to keep track of order of unfiltered options. */
   orderIndex?: number;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLLIElement>;
+  innerRef?: React.RefObject<HTMLLIElement | null>;
   /** Flag indicating this item is draggable for reordering. */
   isDraggable?: boolean;
   /** Accessible label for the draggable button on draggable list items. */

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDi
   /** Accessibly label for the list. */
   'aria-labelledby': string;
   /** @hide forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement | null>;
   /** @hide Options to list in the pane. */
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx CHANGED Viewed

@@ -138,7 +138,9 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                     e.preventDefault();
                   }
                 }}
-                ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+                ref={(elem) => {
+                  elem && (elem.indeterminate = isChecked === null);
+                }}
                 checked={isChecked || false}
                 tabIndex={-1}
                 {...checkProps}
@@ -148,7 +150,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
             <span className={css(styles.dualListSelectorItemText)}>{text}</span>
             {hasBadge && children && (
               <span className={css(styles.dualListSelectorItemCount)}>
-                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement).props.data).length}</Badge>
+                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement<any>).props.data).length}</Badge>
               </span>
             )}
           </span>

package/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap CHANGED Viewed

@@ -94,7 +94,6 @@ exports[`EmptyState Main 1`] = `
           class="pf-v6-c-empty-state__actions"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-primary"
             data-ouia-component-id="OUIA-Generated-Button-primary-1"
             data-ouia-component-type="PF6/Button"
@@ -112,7 +111,6 @@ exports[`EmptyState Main 1`] = `
           class="pf-v6-c-empty-state__actions"
         >
           <button
-            aria-disabled="false"
             aria-label="learn more action"
             class="pf-v6-c-button pf-m-link"
             data-ouia-component-id="OUIA-Generated-Button-link-1"

package/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap CHANGED Viewed

@@ -22,7 +22,6 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-5"
@@ -73,7 +72,6 @@ exports[`Disclosure ExpandableSection 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-6"
         data-ouia-component-type="PF6/Button"
@@ -127,7 +125,6 @@ exports[`ExpandableSection 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-1"
         data-ouia-component-type="PF6/Button"
@@ -181,7 +178,6 @@ exports[`Renders ExpandableSection expanded 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-2"
@@ -235,7 +231,6 @@ exports[`Renders ExpandableSection indented 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-7"
@@ -289,7 +284,6 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-4"
         data-ouia-component-type="PF6/Button"

package/src/components/FileUpload/FileUpload.tsx CHANGED Viewed

@@ -179,6 +179,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
       <input
         /* hidden, necessary for react-dropzone */
         {...inputProps}
+        hidden
       />
       {children}
     </FileUploadField>

package/src/components/FileUpload/FileUploadField.tsx CHANGED Viewed

@@ -43,6 +43,8 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   id: string;
   /** Name property for the text input. */
   name?: string;
+  /** Flag to disable the browse button. */
+  isBrowseButtonDisabled?: boolean;
   /** Flag to disable the clear button. */
   isClearButtonDisabled?: boolean;
   /** Flag to show if the field is disabled. */
@@ -114,6 +116,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   browseButtonText = 'Browse...',
   browseButtonAriaDescribedby,
   clearButtonText = 'Clear',
+  isBrowseButtonDisabled = false,
   isClearButtonDisabled = !filename && !value,
   containerRef = null as React.Ref<HTMLDivElement>,
   allowEditingUploadedText = false,
@@ -153,7 +156,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             <Button
               variant={ButtonVariant.control}
               onClick={onBrowseButtonClick}
-              isDisabled={isDisabled}
+              isDisabled={isDisabled || isBrowseButtonDisabled}
               aria-describedby={browseButtonAriaDescribedby}
             >
               {browseButtonText}

package/src/components/FileUpload/__tests__/FileUploadField.test.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { FileUploadField } from '../FileUploadField';
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 test('simple fileuploadfield', () => {
   const browserBtnClickHandler = jest.fn();
@@ -15,6 +16,7 @@ test('simple fileuploadfield', () => {
       filenamePlaceholder="Do something custom with this!"
       onBrowseButtonClick={browserBtnClickHandler}
       onClearButtonClick={clearBtnClickHandler}
+      isBrowseButtonDisabled={false}
       isClearButtonDisabled={false}
       isLoading={false}
       isDragActive={false}
@@ -32,7 +34,7 @@ test('Renders without aria-describedby on browse button by default', () => {
   expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAccessibleDescription();
 });
-test('Renders without aria-describedby on browse button by default', () => {
+test('Renders with aria-describedby on browse button', () => {
   render(
     <FileUploadField id="file-upload-field" browseButtonText="Upload" browseButtonAriaDescribedby="helper-text">
       <div id="helper-text">Helper text</div>
@@ -41,3 +43,15 @@ test('Renders without aria-describedby on browse button by default', () => {
   expect(screen.getByRole('button', { name: 'Upload' })).toHaveAccessibleDescription('Helper text');
 });
+test('Browse button is enabled by default', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" />);
+  expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAttribute('disabled');
+});
+test('Browse button is disabled with isBrowseButtonDisabled prop', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" isBrowseButtonDisabled={true} />);
+  expect(screen.getByRole('button', { name: 'Upload' })).toHaveAttribute('disabled');
+});