npm - @patternfly/react-core - Versions diffs - 6.0.0-alpha.50 → 6.0.0-alpha.52 - Mend

@patternfly/react-core 6.0.0-alpha.50 → 6.0.0-alpha.52

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 (302) hide show

package/helpers/package.json CHANGED Viewed

	@@ -1 +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.0.0-alpha.49","private":true}
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.0.0-alpha.51","private":true}

package/layouts/package.json CHANGED Viewed

	@@ -1 +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.0.0-alpha.49","private":true}
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.0.0-alpha.51","private":true}

package/next/package.json CHANGED Viewed

	@@ -1 +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.0.0-alpha.49","private":true}
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.0.0-alpha.51","private":true}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.50",
+  "version": "6.0.0-alpha.52",
   "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",
@@ -47,9 +47,9 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.19",
-    "@patternfly/react-styles": "^6.0.0-alpha.19",
-    "@patternfly/react-tokens": "^6.0.0-alpha.19",
+    "@patternfly/react-icons": "^6.0.0-alpha.20",
+    "@patternfly/react-styles": "^6.0.0-alpha.20",
+    "@patternfly/react-tokens": "^6.0.0-alpha.20",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ef6f95d064bfbb8f5aaa134ab6941f63ccf36111"
+  "gitHead": "eb609385b2e7b294e5e46d021d615cd63fa92fc6"
 }

package/src/components/Accordion/__tests__/AccordionToggle.test.tsx CHANGED Viewed

@@ -211,6 +211,34 @@ test('Renders toggle icon before toggle text when togglePosition from context =
   expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
 });
+test('Renders toggle text before toggle icon by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+  const toggle = screen.getByRole('button');
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleText);
+});
+test('Renders toggle icon before toggle text when togglePosition from context = "start"', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3', togglePosition: 'start' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+  const toggle = screen.getByRole('button');
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
+});
 test('Matches the snapshot', () => {
   const { asFragment } = render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>

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

@@ -83,9 +83,6 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   validators?: ((date: Date) => boolean)[];
 }
-// Must be numeric given current header design
-const yearFormat = (date: Date) => date.getFullYear();
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
   const defaultDate = new Date(year, month);
@@ -164,6 +161,13 @@ export const CalendarMonth = ({
   };
   const initialDate = getInitialDate();
   const [focusedDate, setFocusedDate] = React.useState(initialDate);
+  // Must be numeric given current header design
+  const yearFormat = (date: Date) => date.getFullYear();
+  //
+  const yearFormatted = yearFormat(focusedDate);
+  const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
@@ -191,6 +195,7 @@ export const CalendarMonth = ({
     setHoveredDate(newDate);
     setShouldFocus(false);
     onMonthChange(ev, newDate);
+    setYearInput(yearFormat(newDate).toString());
   };
   const onKeyDown = (ev: React.KeyboardEvent<HTMLTableSectionElement>) => {
@@ -217,6 +222,34 @@ export const CalendarMonth = ({
   const changeMonth = (newMonth: number, newYear?: number) =>
     new Date(newYear ?? focusedDate.getFullYear(), newMonth, 1);
+  const MIN_YEAR = 1900;
+  const MAX_YEAR = 2100;
+  const handleYearInputChange = (event: React.FormEvent<HTMLInputElement>, yearStr: string) => {
+    if (!/^\d{0,4}$/.test(yearStr)) {
+      return;
+    }
+    setYearInput(yearStr);
+    if (yearStr.length === 4) {
+      const yearNum = Number(yearStr);
+      if (yearNum >= MIN_YEAR && yearNum <= MAX_YEAR) {
+        const newDate = changeYear(yearNum);
+        setFocusedDate(newDate);
+        setHoveredDate(newDate);
+        setShouldFocus(false);
+        // We need to manually focus the year input in FireFox when the scroll buttons are clicked, as FireFox doesn't place focus automatically
+        (event.target as HTMLElement).focus();
+        onMonthChange(event, newDate);
+      } else {
+        setYearInput(yearFormatted.toString());
+      }
+    }
+  };
   const addMonth = (toAdd: -1 | 1) => {
     let newMonth = focusedDate.getMonth() + toAdd;
     let newYear = focusedDate.getFullYear();
@@ -254,7 +287,6 @@ export const CalendarMonth = ({
   }
   const isHoveredDateValid = isValidated(hoveredDate);
   const monthFormatted = monthFormat(focusedDate);
-  const yearFormatted = yearFormat(focusedDate);
   const calendarToRender = (
     <div className={css(styles.calendarMonth, className)} {...props}>
@@ -321,15 +353,8 @@ export const CalendarMonth = ({
               <TextInput
                 aria-label={yearInputAriaLabel}
                 type="number"
-                value={yearFormatted}
-                onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                  const newDate = changeYear(Number(year));
-                  setFocusedDate(newDate);
-                  setHoveredDate(newDate);
-                  setShouldFocus(false);
-                  focusRef.current?.blur(); // will unfocus a date when changing year via up/down arrows
-                  onMonthChange(ev, newDate);
-                }}
+                value={yearInput}
+                onChange={handleYearInputChange}
               />
             </div>
           </InputGroupItem>

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

@@ -10,8 +10,22 @@ import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
 import { getOUIAProps, OUIAProps } from '../../helpers';
-export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => {
-  navigator.clipboard.writeText(text.toString());
+export const clipboardCopyFunc = (_event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
+  try {
+    navigator.clipboard.writeText(text.toString());
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "Clipboard API not found, this copy function will not work. This is likely because you're using an",
+      "unsupported browser or you're not using HTTPS. \n\nIf you're a developer building an application which needs",
+      "to support copying to the clipboard without the clipboard API, you'll have to create your own copy",
+      'function and pass it to the ClipboardCopy component as the onCopy prop. For more information see',
+      'https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard'
+    );
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
 };
 export enum ClipboardCopyVariant {
@@ -70,8 +84,8 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   exitDelay?: number;
   /** Delay in ms before the tooltip appears. */
   entryDelay?: number;
-  /** A function that is triggered on clicking the copy button. */
-  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => void;
+  /** A function that is triggered on clicking the copy button. This will replace the existing clipboard copy functionality entirely. */
+  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */

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

@@ -4,6 +4,8 @@ import { ClipboardCopy } from '../ClipboardCopy';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import userEvent from '@testing-library/user-event';
+jest.mock('../../../helpers/GenerateId/GenerateId');
 jest.mock('../ClipboardCopyButton', () => ({
   ClipboardCopyButton: ({ 'aria-label': ariaLabel, children, entryDelay, exitDelay, maxWidth, position, onClick }) => (
     <div data-testid="clipboardCopyButton-mock">

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

@@ -21,7 +21,7 @@ exports[`Matches snapshot 1`] = `
           data-ouia-component-id="OUIA-Generated-TextInputBase-26"
           data-ouia-component-type="PF5/TextInput"
           data-ouia-safe="true"
-          id="text-input-34"
+          id="text-input-generated-id"
           type="text"
           value="Copyable text"
         />

package/src/components/DataList/examples/DataList.md CHANGED Viewed

@@ -83,7 +83,7 @@ import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecate
 ### Draggable
-Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-next-demos).
+Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-demos).
 Previously, draggable data lists had their own API for the [drag and drop component](/components/drag-and-drop), which wasn't flexible enough to allow custom styling for items as they are dragged. To address this disparity, `<DragDrop>`, `<Draggable>`, and `<Droppable>` components were added to replace our now deprecated HTML5-based API. Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.

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

@@ -14,6 +14,8 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { KeyTypes } from '../../../helpers';
+jest.mock('../../../helpers/GenerateId/GenerateId');
 Object.values([
   { isExpanded: true, isInline: false, isStatic: false },
   { isExpanded: false, isInline: false, isStatic: false },

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

@@ -34,6 +34,8 @@ test(`Renders with class ${styles.modifiers.secondary} when colorVariant="second
   expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.secondary);
 });
+jest.mock('../../../helpers/GenerateId/GenerateId');
 test('Does not render with aria-labelledby by default', () => {
   render(
     <Drawer isExpanded>

package/src/components/Drawer/__tests__/Generated/DrawerPanelContent.test.tsx CHANGED Viewed

@@ -7,6 +7,8 @@ import { DrawerPanelContent } from '../../DrawerPanelContent';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
+jest.mock('../../../../helpers/GenerateId/GenerateId');
 it('DrawerPanelContent should match snapshot (auto-generated)', () => {
   const { asFragment } = render(<DrawerPanelContent className={"''"} children={<div>ReactNode</div>} />);
   expect(asFragment()).toMatchSnapshot();

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

@@ -5,7 +5,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-v6-c-drawer__panel ''"
     hidden=""
-    id="pf-drawer-panel-0"
+    id="generated-id"
   />
 </DocumentFragment>
 `;

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

@@ -19,7 +19,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-5"
+        id="generated-id"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -179,11 +179,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel pf-m-resizable pf-m-secondary"
-        id="pf-drawer-panel-6"
+        id="generated-id"
         style="--pf-v6-c-drawer__panel--md--FlexBasis: 300px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v6-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="pf-drawer-panel-6"
+          aria-controls="generated-id"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -271,7 +271,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-1"
+        id="generated-id"
       />
     </div>
   </div>
@@ -298,7 +298,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-3"
+        id="generated-id"
       />
     </div>
   </div>
@@ -324,7 +324,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-0"
+        id="generated-id"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -394,7 +394,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-4"
+        id="generated-id"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -464,7 +464,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-2"
+        id="generated-id"
       >
         <div
           class="pf-v6-c-drawer__head"

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

@@ -65,6 +65,10 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   zIndex?: number;
   /** Additional properties to pass to the Popper */
   popperProps?: DropdownPopperProps;
+  /** Height of the dropdown menu */
+  menuHeight?: string;
+  /** Maximum height of dropdown menu */
+  maxMenuHeight?: string;
 }
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -83,6 +87,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   zIndex = 9999,
   popperProps,
   onOpenChangeKeys = ['Escape', 'Tab'],
+  menuHeight,
+  maxMenuHeight,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -111,8 +117,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     };
     const handleClick = (event: MouseEvent) => {
-      // toggle was clicked open via keyboard, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+      // toggle was opened, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector(
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
@@ -138,6 +144,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     };
   }, [isOpen, menuRef, toggleRef, onOpenChange, onOpenChangeKeys]);
+  const scrollable = maxMenuHeight !== undefined || menuHeight !== undefined || isScrollable;
   const menu = (
     <Menu
       className={css(className)}
@@ -147,11 +155,13 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
         shouldFocusToggleOnSelect && toggleRef.current.focus();
       }}
       isPlain={isPlain}
-      isScrollable={isScrollable}
+      isScrollable={scrollable}
       {...props}
       {...ouiaProps}
     >
-      <MenuContent>{children}</MenuContent>
+      <MenuContent menuHeight={menuHeight} maxMenuHeight={maxMenuHeight}>
+        {children}
+      </MenuContent>
     </Menu>
   );
   return (

package/src/components/DualListSelector/examples/DualListSelector.md CHANGED Viewed

@@ -88,7 +88,7 @@ The dual list selector can also be built in a composable manner to make customiz
 ### Composable with drag and drop
-Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-next-demos).
+Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-demos).
 This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:

package/src/components/Form/__tests__/FormFieldGroup.test.tsx CHANGED Viewed

@@ -7,6 +7,8 @@ import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
 import { FormFieldGroupHeader } from '../FormFieldGroupHeader';
 import { Button } from '../../Button';
+jest.mock('../../../helpers/GenerateId/GenerateId');
 test('Check form field group example against snapshot', () => {
   const FieldGroup = (
     <FormFieldGroup

package/src/components/Form/__tests__/FormSection.test.tsx CHANGED Viewed

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { FormSection } from '../FormSection';
 import { render, screen } from '@testing-library/react';
+jest.mock('../../../helpers/GenerateId/GenerateId');
 test('Check form section example against snapshot', () => {
   const Section = <FormSection />;
   const { asFragment } = render(Section);

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

@@ -17,12 +17,12 @@ exports[`Check expandable form field group example against snapshot 1`] = `
           aria-disabled="false"
           aria-expanded="true"
           aria-label="toggle"
-          aria-labelledby="title-text-id2 form-field-group-toggle0"
+          aria-labelledby="title-text-id2 generated-id"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-1"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
-          id="form-field-group-toggle0"
+          id="generated-id"
           type="button"
         >
           <span

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

@@ -12,13 +12,13 @@ exports[`Check form section example against snapshot 1`] = `
 exports[`Check form section example with title 1`] = `
 <DocumentFragment>
   <section
-    aria-labelledby="pf-form-section-title1"
+    aria-labelledby="generated-id"
     class="pf-v6-c-form__section"
     role="group"
   >
     <h4
       class="pf-v6-c-form__section-title"
-      id="pf-form-section-title1"
+      id="generated-id"
     >
       Title
     </h4>

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

@@ -27,6 +27,8 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   status?: 'success' | 'warning' | 'danger' | 'info' | 'custom';
   /** Flag indicating the label is compact. */
   isCompact?: boolean;
+  /** Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in. */
+  isDisabled?: boolean;
   /** @beta Flag indicating the label is editable. */
   isEditable?: boolean;
   /** @beta Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. */
@@ -106,6 +108,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   variant = 'filled',
   status,
   isCompact = false,
+  isDisabled = false,
   isEditable = false,
   editableProps,
   textMaxWidth,
@@ -224,29 +227,23 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     }
   };
-  const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
+  const isClickableDisabled = (href || onLabelClick) && isDisabled;
-  let _closeBtnAriaLabel = 'Close label';
-  if (closeBtnAriaLabel) {
-    _closeBtnAriaLabel = closeBtnAriaLabel;
-  } else if (typeof children === 'string') {
-    _closeBtnAriaLabel = `Close ${children}`;
-  }
-  const defaultButton = (
+  const defaultCloseButton = (
     <Button
       type="button"
       variant="plain"
       hasNoPadding
       onClick={onClose}
-      aria-label={_closeBtnAriaLabel}
+      aria-label={closeBtnAriaLabel || `Close ${children}`}
+      {...(isClickableDisabled && { isDisabled: true })}
       {...closeBtnProps}
     >
       <TimesIcon />
     </Button>
   );
-  const button = <span className={css(styles.labelActions)}>{closeBtn || defaultButton}</span>;
+  const closeButton = <span className={css(styles.labelActions)}>{closeBtn || defaultCloseButton}</span>;
   const textRef = React.createRef<any>();
   // ref to apply tooltip when rendered is used
   const componentRef = React.useRef();
@@ -302,6 +299,8 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     className: css(styles.labelContent, isClickable && styles.modifiers.clickable),
     ...(isTooltipVisible && { tabIndex: 0 }),
     ...(href && { href }),
+    // Need to prevent onClick since aria-disabled won't prevent AT from triggering the link
+    ...(href && isDisabled && { onClick: (event: MouseEvent) => event.preventDefault() }),
     ...(isButton && clickableLabelProps),
     ...(isEditable && {
       ref: editableButtonRef,
@@ -310,7 +309,9 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         e.stopPropagation();
       },
       ...editableProps
-    })
+    }),
+    ...(isClickableDisabled && isButton && { disabled: true }),
+    ...(isClickableDisabled && href && { tabindex: -1, 'aria-disabled': true })
   };
   let labelComponentChild = (
@@ -336,11 +337,14 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     );
   }
+  const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any;
   return (
     <LabelComponent
       {...props}
       className={css(
         styles.label,
+        isClickableDisabled && styles.modifiers.disabled,
         colorStyles[color],
         variant === 'filled' && styles.modifiers.filled,
         variant === 'outline' && styles.modifiers.outline,
@@ -356,7 +360,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       onClick={isOverflowLabel || isAddLabel ? onLabelClick : undefined}
     >
       {!isEditableActive && labelComponentChild}
-      {!isEditableActive && onClose && button}
+      {!isEditableActive && onClose && closeButton}
       {isEditableActive && (
         <input
           className={css(styles.labelContent)}

package/src/components/Label/__tests__/LabelGroup.test.tsx CHANGED Viewed

@@ -6,6 +6,8 @@ import userEvent from '@testing-library/user-event';
 import { Label } from '../../Label';
 import { LabelGroup } from '../index';
+jest.mock('../../../helpers/GenerateId/GenerateId');
 describe('LabelGroup', () => {
   test('label group default', () => {
     const { asFragment } = render(

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

@@ -134,12 +134,12 @@ exports[`LabelGroup label group with category 1`] = `
       <span
         aria-hidden="true"
         class="pf-v6-c-label-group__label"
-        id="pf-random-id-1"
+        id="generated-id"
       >
         category
       </span>
       <ul
-        aria-labelledby="pf-random-id-1"
+        aria-labelledby="generated-id"
         class="pf-v6-c-label-group__list"
         role="list"
       >
@@ -177,12 +177,12 @@ exports[`LabelGroup label group with category and tooltip 1`] = `
       <span
         aria-hidden="true"
         class="pf-v6-c-label-group__label"
-        id="pf-random-id-4"
+        id="generated-id"
       >
         A very long category name
       </span>
       <ul
-        aria-labelledby="pf-random-id-4"
+        aria-labelledby="generated-id"
         class="pf-v6-c-label-group__list"
         role="list"
       >
@@ -220,12 +220,12 @@ exports[`LabelGroup label group with closable category 1`] = `
       <span
         aria-hidden="true"
         class="pf-v6-c-label-group__label"
-        id="pf-random-id-2"
+        id="generated-id"
       >
         category
       </span>
       <ul
-        aria-labelledby="pf-random-id-2"
+        aria-labelledby="generated-id"
         class="pf-v6-c-label-group__list"
         role="list"
       >
@@ -254,12 +254,12 @@ exports[`LabelGroup label group with closable category 1`] = `
       <button
         aria-disabled="false"
         aria-label="Close label group"
-        aria-labelledby="remove_group_pf-random-id-2 pf-random-id-2"
+        aria-labelledby="remove_group_generated-id generated-id"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
-        id="remove_group_pf-random-id-2"
+        id="remove_group_generated-id"
         type="button"
       >
         <svg