@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.4

package/src/components/NotificationDrawer/NotificationDrawerHeader.tsx

@@ -42,7 +42,9 @@ export const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawe
       {title}
     </Text>
     {(customText !== undefined || count !== undefined) && (
-      <span className={css(styles.notificationDrawerHeaderStatus)}>{customText || `${count} ${unreadText}`}</span>
+      <span className={css(styles.notificationDrawerHeaderStatus)} aria-live="polite">
+        {customText || `${count} ${unreadText}`}
+      </span>
     )}
     {(children || onClose) && (
       <div className={css(styles.notificationDrawerHeaderAction)}>

package/src/components/NotificationDrawer/NotificationDrawerListItem.tsx

@@ -13,6 +13,8 @@ export interface NotificationDrawerListItemProps extends React.HTMLProps<HTMLLIE
   isRead?: boolean;
   /**  Callback for when a list item is clicked */
   onClick?: (event: any) => void;
+  /**  Visually hidden text that conveys the current read state of the notification list item */
+  readStateScreenReaderText?: string;
   /**  Tab index for the list item */
   tabIndex?: number;
   /**  Variant indicates the severity level */
@@ -26,6 +28,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
   isRead = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   onClick = (event: React.MouseEvent) => undefined as any,
+  readStateScreenReaderText,
   tabIndex = 0,
   variant = 'custom',
   ...props
@@ -38,6 +41,14 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
       }
     }
   };
+
+  let readStateSRText;
+  if (readStateScreenReaderText) {
+    readStateSRText = readStateScreenReaderText;
+  } else {
+    readStateSRText = isRead ? 'read' : 'unread';
+  }
+
   return (
     <li
       {...props}
@@ -52,6 +63,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
       onClick={(e) => onClick(e)}
       onKeyDown={onKeyDown}
     >
+      <span className="pf-v5-screen-reader">{readStateSRText}</span>
       {children}
     </li>
   );

package/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx

@@ -12,7 +12,9 @@ describe('NotificationDrawerGroup', () => {
   });
 
   test('renders correct heading level', () => {
-    const { asFragment } = render(<NotificationDrawerGroup count={2} isExpanded={false} title="Critical Alerts" headingLevel="h2" />);
+    const { asFragment } = render(
+      <NotificationDrawerGroup count={2} isExpanded={false} title="Critical Alerts" headingLevel="h2" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx

@@ -21,8 +21,19 @@ describe('NotificationDrawerListItem', () => {
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-hoverable');
   });
 
-  test('drawer list item with isRead applied', () => {
+  test('drawer list item with isRead applied and screen reader text is set to read', () => {
     render(<NotificationDrawerListItem isRead />);
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-read');
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">read</span>');
+  });
+
+  test('drawer list item has screen reader text set to unread by default', () => {
+    render(<NotificationDrawerListItem />);
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">unread</span>');
+  });
+
+  test('drawer list item screen reader textcan be customized', () => {
+    render(<NotificationDrawerListItem readStateScreenReaderText="was read" />);
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">was read</span>');
   });
 });

package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx

@@ -13,7 +13,7 @@ describe('NotificationDrawerListItemHeader', () => {
   });
 
   test('renders with correct heading level', () => {
-    const { asFragment } = render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly" headingLevel="h3"/>);
+    const { asFragment } = render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly" headingLevel="h3" />);
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread
@@ -38,6 +39,7 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread alerts

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap

@@ -5,6 +5,12 @@ exports[`NotificationDrawerListItem renders with PatternFly Core styles 1`] = `
   <li
     class="pf-v5-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
     tabindex="0"
-  />
+  >
+    <span
+      class="pf-v5-screen-reader"
+    >
+      unread
+    </span>
+  </li>
 </DocumentFragment>
 `;

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

@@ -212,13 +212,13 @@ describe('numberInput', () => {
     expect(input).toHaveDisplayValue('');
   });
 
-  test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', () => {
+  test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', async () => {
     const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const NumberInputWrapper = () => {
       const [value, setValue] = React.useState(0);
-      const onChange = event => setValue(event.currentTarget.value);
-      const inputProps = { onChange: onChange };
+      const onChange = (event) => setValue(event.currentTarget.value);
+      const inputProps = { onChange };
 
       return <NumberInput value={value} onChange={onChange} inputProps={{ ...inputProps }} />;
     };
@@ -226,20 +226,20 @@ describe('numberInput', () => {
     render(<NumberInputWrapper />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '0');
+    await userEvent.type(input, '0');
 
     expect(consoleSpy).not.toHaveBeenCalled();
   });
 
   test('input is read only if onChange not passed ', () => {
-    render(<NumberInput inputAriaLabel="readonly input" value={5}/>);
+    render(<NumberInput inputAriaLabel="readonly input" value={5} />);
     const input = screen.getByLabelText('readonly input');
     expect(input).toHaveAttribute('readOnly');
   });
 
   test('input is not read only if onChange passed ', () => {
     const onChangeMock = jest.fn();
-    render(<NumberInput inputAriaLabel="not readonly input" value={5} onChange={onChangeMock}/>);
+    render(<NumberInput inputAriaLabel="not readonly input" value={5} onChange={onChangeMock} />);
     const input = screen.getByLabelText('not readonly input');
     expect(input).not.toHaveAttribute('readOnly');
   });

package/src/components/Page/PageSection.tsx

@@ -5,7 +5,8 @@ import { formatBreakpointMods } from '../../helpers/util';
 import { PageContext } from './PageContext';
 
 export enum PageSectionVariants {
-  default = 'default'
+  default = 'default',
+  secondary = 'secondary'
 }
 
 export enum PageSectionTypes {
@@ -22,8 +23,8 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the section */
   className?: string;
-  /** Section background color variant */
-  variant?: 'default';
+  /** Section background color variant. This will only apply when the type prop has the "default" value. */
+  variant?: 'default' | 'secondary';
   /** Section type variant */
   type?: 'default' | 'nav' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
   /** Enables the page section to fill the available vertical space */
@@ -74,7 +75,8 @@ const variantType = {
 };
 
 const variantStyle = {
-  [PageSectionVariants.default]: ''
+  [PageSectionVariants.default]: '',
+  [PageSectionVariants.secondary]: styles.modifiers.secondary
 };
 
 export const PageSection: React.FunctionComponent<PageSectionProps> = ({
@@ -112,7 +114,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         variantType[type],
         formatBreakpointMods(padding, styles),
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
-        variantStyle[variant],
+        type === PageSectionTypes.default && variantStyle[variant],
         isFilled === false && styles.modifiers.noFill,
         isFilled === true && styles.modifiers.fill,
         isWidthLimited && styles.modifiers.limitWidth,

package/src/components/Page/examples/Page.md

@@ -16,7 +16,6 @@ propComponents:
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import './page.css';
 import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples

package/src/components/Page/examples/PageHorizontalNav.tsx

@@ -35,7 +35,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
   return (
     <Page header={header}>
       <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
+      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>
     </Page>
   );

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -62,7 +62,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
   return (
     <Page header={header} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
+      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>
     </Page>
   );

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

@@ -340,10 +340,12 @@ describe('Pagination', () => {
       'insetLg',
       'insetXl',
       'inset2xl'
-    ]).forEach(inset => {
+    ]).forEach((inset) => {
       test(`verify ${inset} inset breakpoints`, () => {
         const { asFragment } = render(
-          <Pagination inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>test</Pagination>
+          <Pagination inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>
+            test
+          </Pagination>
         );
         expect(asFragment()).toMatchSnapshot();
       });

package/src/components/Pagination/examples/PaginationSticky.tsx

@@ -27,8 +27,8 @@ export const PaginationSticky: React.FunctionComponent = () => {
   const buildCards = () => {
     const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;
 
-    return Array.apply(0, Array(numberOfCards)).map((x, i) => (
-      <GalleryItem key={i}>
+    return Array.from({ length: numberOfCards }).map((_value, index) => (
+      <GalleryItem key={index}>
         <Card>
           <CardBody>This is a card</CardBody>
         </Card>

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

@@ -85,9 +85,9 @@ test('Renders with ref', async () => {
   render(<BasicPanel />);
 
   await user.click(document.body);
-  expect(screen.getByText('Last click was in panel: false')).toBeVisible;
+  expect(screen.getByText('Last click was in panel: false')).toBeVisible();
   await user.click(screen.getByText('Main content'));
-  expect(screen.getByText('Last click was in panel: true')).toBeVisible;
+  expect(screen.getByText('Last click was in panel: true')).toBeVisible();
 });
 
 test('Renders with the inherited element props spread to the component', () => {

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

@@ -70,7 +70,7 @@ test('popover can close from content (uncontrolled)', () => {
       aria-label="Popover with button in the body that can close it"
       isVisible
       headerContent={<div>Popover header</div>}
-      bodyContent={hide => (
+      bodyContent={(hide) => (
         <div>
           <div>
             All the content props (headerContent, bodyContent, footerContent) can take a function which the Popover

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

@@ -49,7 +49,7 @@ test('value scaled between minValue and maxValue', () => {
 });
 
 describe('Progress size', () => {
-  Object.keys(ProgressSize).forEach(oneSize => {
+  Object.keys(ProgressSize).forEach((oneSize) => {
     test(oneSize, () => {
       const { asFragment } = render(<Progress id={`${oneSize}-progress`} value={33} size={oneSize as ProgressSize} />);
       expect(asFragment()).toMatchSnapshot();
@@ -58,7 +58,7 @@ describe('Progress size', () => {
 });
 
 describe('Progress variant', () => {
-  Object.keys(ProgressVariant).forEach(oneVariant => {
+  Object.keys(ProgressVariant).forEach((oneVariant) => {
     test(oneVariant, () => {
       const { asFragment } = render(
         <Progress id={`${oneVariant}-progress`} value={33} variant={oneVariant as ProgressVariant} />
@@ -69,7 +69,7 @@ describe('Progress variant', () => {
 });
 
 describe('Progress measure location', () => {
-  Object.keys(ProgressMeasureLocation).forEach(oneLocation => {
+  Object.keys(ProgressMeasureLocation).forEach((oneLocation) => {
     test(oneLocation, () => {
       const { asFragment } = render(
         <Progress id={`${oneLocation}-progress`} value={33} measureLocation={oneLocation as ProgressMeasureLocation} />
@@ -99,10 +99,10 @@ test('progress component generates console warning when no accessible name is pr
 });
 
 test('Does not render helper text by default', () => {
-  render(<Progress/>);
+  render(<Progress />);
 
   expect(screen.queryByText('Test helper text')).not.toBeInTheDocument();
-})
+});
 
 test('Renders passed helper text', () => {
   render(<Progress helperText="Test helper text" />);

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

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

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

@@ -6,10 +6,12 @@ import userEvent from '@testing-library/user-event';
 import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
+jest.mock('../../../helpers/OUIA/ouia');
+
 const props = {
   onChange: jest.fn(),
   value: 'test input',
@@ -80,9 +82,9 @@ describe('SearchInput', () => {
   });
 
   test('hide clear button', () => {
-    const { onClear, ...testProps } = props;
-
-    render(<SearchInput {...testProps} resultsCount="3" aria-label="simple text input without on clear" />);
+    render(
+      <SearchInput {...props} onClear={undefined} resultsCount="3" aria-label="simple text input without on clear" />
+    );
     expect(screen.queryByRole('button', { name: 'Reset' })).not.toBeInTheDocument();
   });
 
@@ -146,9 +148,7 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes and appendTo="inline', async () => {
     const user = userEvent.setup();
 
-    const { container } = render(
-      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />
-    );
+    render(<SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />);
 
     await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
 
@@ -158,7 +158,7 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes and appendTo external DOM element', async () => {
     const user = userEvent.setup();
 
-    const { container } = render(
+    render(
       <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo={document.body} />
     );
 
@@ -252,9 +252,6 @@ test('toggleAriaLabel is applied to the expandable toggle', () => {
 });
 
 test('Utilities are rendered when areUtilitiesDisplayed is set', () => {
-  render(
-    <SearchInput {...props} areUtilitiesDisplayed resetButtonLabel='test-util-display'/>
-  );
+  render(<SearchInput {...props} areUtilitiesDisplayed resetButtonLabel="test-util-display" />);
   expect(screen.getByLabelText('test-util-display')).toBeVisible();
 });
-

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

@@ -52,9 +52,6 @@ exports[`SearchInput advanced search 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-17"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -82,9 +79,6 @@ exports[`SearchInput advanced search 1`] = `
           aria-expanded="false"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-10"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -109,9 +103,6 @@ exports[`SearchInput advanced search 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-11"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -202,9 +193,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-18"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -232,9 +220,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           aria-expanded="true"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control pf-m-expanded"
-          data-ouia-component-id="OUIA-Generated-Button-control-12"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -259,9 +244,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-13"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -334,9 +316,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="username_0"
                       type="text"
                       value="player"
@@ -370,9 +349,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="firstname_1"
                       type="text"
                       value="john"
@@ -406,9 +382,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="pf-random-id-2"
                       type="text"
                       value=""
@@ -425,9 +398,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   <button
                     aria-disabled="false"
                     class="pf-v5-c-button pf-m-link pf-m-inline"
-                    data-ouia-component-id="OUIA-Generated-Button-link-1"
-                    data-ouia-component-type="PF5/Button"
-                    data-ouia-safe="true"
                     type="button"
                   >
                     Link
@@ -463,9 +433,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                     <button
                       aria-disabled="false"
                       class="pf-v5-c-button pf-m-primary"
-                      data-ouia-component-id="OUIA-Generated-Button-primary-1"
-                      data-ouia-component-type="PF5/Button"
-                      data-ouia-safe="true"
                       type="submit"
                     >
                       Search
@@ -473,9 +440,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                     <button
                       aria-disabled="false"
                       class="pf-v5-c-button pf-m-link"
-                      data-ouia-component-id="OUIA-Generated-Button-link-2"
-                      data-ouia-component-type="PF5/Button"
-                      data-ouia-safe="true"
                       type="reset"
                     >
                       Reset
@@ -544,9 +508,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-11"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -574,9 +535,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           aria-expanded="false"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-5"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -601,9 +559,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-7"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -700,9 +655,6 @@ exports[`SearchInput search input with hint 1`] = `
               aria-disabled="false"
               aria-label="Previous"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-4"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -723,9 +675,6 @@ exports[`SearchInput search input with hint 1`] = `
               aria-disabled="false"
               aria-label="Next"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-5"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -747,9 +696,6 @@ exports[`SearchInput search input with hint 1`] = `
             aria-disabled="false"
             aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-6"
-            data-ouia-component-type="PF5/Button"
-            data-ouia-safe="true"
             type="button"
           >
             <svg
@@ -776,9 +722,6 @@ exports[`SearchInput search input with hint 1`] = `
         aria-disabled="false"
         aria-label="Search"
         class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-2"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
         type="submit"
       >
         <span
@@ -860,9 +803,6 @@ exports[`SearchInput simple search input 1`] = `
               aria-disabled="false"
               aria-label="Previous"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -883,9 +823,6 @@ exports[`SearchInput simple search input 1`] = `
               aria-disabled="false"
               aria-label="Next"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-2"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -907,9 +844,6 @@ exports[`SearchInput simple search input 1`] = `
             aria-disabled="false"
             aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-3"
-            data-ouia-component-type="PF5/Button"
-            data-ouia-safe="true"
             type="button"
           >
             <svg
@@ -936,9 +870,6 @@ exports[`SearchInput simple search input 1`] = `
         aria-disabled="false"
         aria-label="Search"
         class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
         type="submit"
       >
         <span

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

@@ -9,4 +9,3 @@ test('Verify Skip To Content', () => {
   // Add a useful assertion here.
   expect(asFragment()).toMatchSnapshot();
 });
-

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

@@ -25,4 +25,4 @@ test('large spinner', () => {
 test('extra large spinner', () => {
   const { asFragment } = render(<Spinner size="xl" />);
   expect(asFragment()).toMatchSnapshot();
-});
+});

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

@@ -77,7 +77,7 @@ describe('Switch', () => {
 
   test('switch passes value and event to onChange handler', async () => {
     const user = userEvent.setup();
-    
+
     render(<Switch id="onChange-switch" {...props} aria-label="Switch label" />);
 
     await user.click(screen.getByLabelText('Switch label'));

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -39,7 +39,7 @@ jest.mock('../../Menu', () => {
 });
 
 const tabsContextDefaultProps = {
-  variant: 'default' as 'default',
+  variant: 'default' as const,
   mountOnEnter: false,
   unmountOnExit: false,
   localActiveKey: '',