@patternfly/react-core 6.1.0 → 6.1.1-prerelease.1

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

@@ -21,7 +21,6 @@ exports[`Switch no label switch is checked 1`] = `
       class="pf-v6-c-switch__toggle"
     >
       <div
-        aria-hidden="true"
         class="pf-v6-c-switch__toggle-icon"
       >
         <svg
@@ -63,7 +62,6 @@ exports[`Switch no label switch is not checked 1`] = `
       class="pf-v6-c-switch__toggle"
     >
       <div
-        aria-hidden="true"
         class="pf-v6-c-switch__toggle-icon"
       >
         <svg
@@ -137,7 +135,6 @@ exports[`Switch switch is checked and disabled 1`] = `
       class="pf-v6-c-switch__toggle"
     >
       <div
-        aria-hidden="true"
         class="pf-v6-c-switch__toggle-icon"
       >
         <svg
@@ -209,7 +206,6 @@ exports[`Switch switch is not checked and disabled 1`] = `
       class="pf-v6-c-switch__toggle"
     >
       <div
-        aria-hidden="true"
         class="pf-v6-c-switch__toggle-icon"
       >
         <svg

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -122,7 +122,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}
         />
-        {validated && <TextInputGroupIcon isStatus>{<StatusIcon aria-hidden="true" />}</TextInputGroupIcon>}
+        {validated && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
       </span>
     </div>
   );

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -231,7 +231,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
               onClick={onKebabToggle}
               variant="plain"
               aria-label="Toolbar with filters example kebab toggle"
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >

package/src/components/TreeView/TreeViewListItem.tsx

@@ -139,7 +139,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
-        <AngleRightIcon aria-hidden="true" />
+        <AngleRightIcon />
       </span>
     </ToggleComponent>
   );

package/src/components/Wizard/WizardHeader.tsx

@@ -40,12 +40,7 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
-        <Button
-          variant="plain"
-          aria-label={closeButtonAriaLabel}
-          onClick={onClose}
-          icon={<TimesIcon aria-hidden="true" />}
-        />
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose} icon={<TimesIcon />} />
       </div>
     )}
     <div className={css(styles.wizardTitle)}>

package/src/components/Wizard/WizardToggle.tsx

@@ -113,13 +113,13 @@ export const WizardToggle = ({
               <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>
             )}{' '}
             {parentStep?.name || activeStep?.name}
-            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
+            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} />}
           </span>
           {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
         </span>
 
         <span className={css(styles.wizardToggleIcon)}>
-          <CaretDownIcon aria-hidden="true" />
+          <CaretDownIcon />
         </span>
       </button>
       <div className={css(styles.wizardOuterWrap)}>

package/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx

@@ -46,7 +46,7 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
             isSelected={selectedItems.includes(0)}
             actions={
               <MenuItemAction
-                icon={<CodeBranchIcon aria-hidden />}
+                icon={<CodeBranchIcon />}
                 actionId="code"
                 // eslint-disable-next-line no-console
                 onClick={() => console.log('clicked on code icon')}
@@ -61,7 +61,7 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
           <SelectOption
             isDisabled
             isSelected={selectedItems.includes(1)}
-            actions={<MenuItemAction icon={<BellIcon aria-hidden />} actionId="alert" aria-label="Alert" />}
+            actions={<MenuItemAction icon={<BellIcon />} actionId="alert" aria-label="Alert" />}
             description="This is a description"
             value={1}
           >
@@ -69,14 +69,14 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
           </SelectOption>
           <SelectOption
             isSelected={selectedItems.includes(2)}
-            actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId="copy" aria-label="Copy" />}
+            actions={<MenuItemAction icon={<ClipboardIcon />} actionId="copy" aria-label="Copy" />}
             value={2}
           >
             Item 3
           </SelectOption>
           <SelectOption
             isSelected={selectedItems.includes(3)}
-            actions={<MenuItemAction icon={<BarsIcon aria-hidden />} actionId="expand" aria-label="Expand" />}
+            actions={<MenuItemAction icon={<BarsIcon />} actionId="expand" aria-label="Expand" />}
             description="This is a description"
             value={3}
           >

package/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx

@@ -128,7 +128,7 @@ export const ContextSelectorDemo: React.FunctionComponent = () => {
                 aria-label="Search menu items"
                 id="pf-v6-context-selector-search-button-id-1"
                 onClick={onSearchButtonClick}
-                icon={<SearchIcon aria-hidden="true" />}
+                icon={<SearchIcon />}
               />
             </InputGroupItem>
           </InputGroup>

package/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx

@@ -183,21 +183,21 @@ export const DrilldownMenuDemo: React.FunctionComponent = () => {
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon aria-hidden />}
+            icon={<StorageDomainIcon />}
             direction="down"
             drilldownMenu={
               <DrilldownMenu id="drilldownMenuStorage">
-                <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon aria-hidden />} direction="up">
+                <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon />} direction="up">
                   Add storage
                 </MenuItem>
                 <Divider component="li" />
-                <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId="git">
+                <MenuItem icon={<CodeBranchIcon />} itemId="git">
                   From Git
                 </MenuItem>
-                <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId="container">
+                <MenuItem icon={<LayerGroupIcon />} itemId="container">
                   Container Image
                 </MenuItem>
-                <MenuItem icon={<CubeIcon aria-hidden />} itemId="docker">
+                <MenuItem icon={<CubeIcon />} itemId="docker">
                   Docker File
                 </MenuItem>
               </DrilldownMenu>

package/src/demos/DashboardHeader.tsx

@@ -137,7 +137,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label="Settings and help"
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -157,7 +157,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label="Toolbar menu"
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -182,7 +182,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen1}
                         variant="plain"
                         aria-label="Primary content kebab toggle"
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -258,7 +258,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen2}
                         variant="plain"
                         aria-label="Secondary content kebab toggle"
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -334,7 +334,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen3}
                         variant="plain"
                         aria-label="Tertiary content kebab toggle"
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >

package/src/demos/DatePicker/examples/DateTimePickerInModal.tsx

@@ -1,6 +1,16 @@
 import React from 'react';
-import { DatePicker, Button, TimePicker, InputGroup, InputGroupItem } from '@patternfly/react-core';
-import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
+import {
+  DatePicker,
+  Button,
+  TimePicker,
+  InputGroup,
+  InputGroupItem,
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '@patternfly/react-core';
 
 export const SimpleModal = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -26,31 +36,37 @@ export const SimpleModal = () => {
       <Button variant="primary" onClick={handleModalToggle}>
         Launch modal
       </Button>
-      <ModalDeprecated
+      <Modal
         id="date-time-picker-modal"
-        variant={ModalVariantDeprecated.small}
-        title="Generic modal header"
+        variant={ModalVariant.small}
         isOpen={isModalOpen}
         onEscapePress={onEscapePress}
         onClose={handleModalToggle}
-        actions={[
+      >
+        <ModalHeader title="Generic modal header" />
+        <ModalBody>
+          <InputGroup>
+            <InputGroupItem>
+              <DatePicker ref={dateRef} appendTo={() => document.body} />
+            </InputGroupItem>
+            <InputGroupItem>
+              <TimePicker
+                menuAppendTo={() => document.body}
+                isOpen={isTimePickerOpen}
+                setIsOpen={setIsTimePickerOpen}
+              />
+            </InputGroupItem>
+          </InputGroup>
+        </ModalBody>
+        <ModalFooter>
           <Button key="confirm" variant="primary" onClick={handleModalToggle}>
             Confirm
-          </Button>,
+          </Button>
           <Button key="cancel" variant="link" onClick={handleModalToggle}>
             Cancel
           </Button>
-        ]}
-      >
-        <InputGroup>
-          <InputGroupItem>
-            <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
-          </InputGroupItem>
-          <InputGroupItem>
-            <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
-          </InputGroupItem>
-        </InputGroup>
-      </ModalDeprecated>
+        </ModalFooter>
+      </Modal>
     </React.Fragment>
   );
 };

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -221,7 +221,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -354,7 +354,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -388,7 +388,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-1')}
                       isExpanded={isActionsMenuOpen['toggle-id-1'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -423,7 +423,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-2')}
                       isExpanded={isActionsMenuOpen['toggle-id-2'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -459,7 +459,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-3')}
                       isExpanded={isActionsMenuOpen['toggle-id-3'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -494,7 +494,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-4')}
                       isExpanded={isActionsMenuOpen['toggle-id-4'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -271,7 +271,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -405,7 +405,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -446,7 +446,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-5')}
                           isExpanded={isActionsMenuOpen['toggle-id-5'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -481,7 +481,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-6')}
                           isExpanded={isActionsMenuOpen['toggle-id-6'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -517,7 +517,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-7')}
                           isExpanded={isActionsMenuOpen['toggle-id-7'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -552,7 +552,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-8')}
                           isExpanded={isActionsMenuOpen['toggle-id-8'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -596,7 +596,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-9')}
                           isExpanded={isActionsMenuOpen['toggle-id-9'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -631,7 +631,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-10')}
                           isExpanded={isActionsMenuOpen['toggle-id-10'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -667,7 +667,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-11')}
                           isExpanded={isActionsMenuOpen['toggle-id-11'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -702,7 +702,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-12')}
                           isExpanded={isActionsMenuOpen['toggle-id-12'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >

package/src/demos/PasswordGenerator.md

@@ -151,7 +151,7 @@ const PasswordGenerator: React.FunctionComponent = () => {
             itemId={0}
             actions={
               <MenuItemAction
-                icon={<RedoIcon aria-hidden />}
+                icon={<RedoIcon />}
                 onClick={(e) => {
                   setGeneratedPassword(generatePassword());
                 }}

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -374,7 +374,7 @@ export const PaginatedTableAction = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -394,7 +394,7 @@ export const PaginatedTableAction = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -398,7 +398,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -418,7 +418,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -248,7 +248,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
               variant="plain"
               onClick={() => onDropdownToggle('dropdown-toggle-id-0')}
               aria-label="Notification drawer actions"
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -279,7 +279,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                         variant="plain"
                         onClick={() => onDropdownToggle(key)}
                         aria-label={`Notification ${index + 1} actions`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >

package/src/demos/examples/Card/CardEventsView.tsx

@@ -78,7 +78,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="danger">
-                        <ExclamationCircleIcon aria-hidden="true" />
+                        <ExclamationCircleIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>
@@ -99,7 +99,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="success">
-                        <CheckCircleIcon aria-hidden="true" />
+                        <CheckCircleIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>
@@ -135,7 +135,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="success">
-                        <CheckCircleIcon aria-hidden="true" />
+                        <CheckCircleIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>

package/src/demos/examples/Card/CardHorizontalGrid.tsx

@@ -63,7 +63,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
           onClick={onActionToggle}
           variant="plain"
           aria-label="Horizontal card grid demo kebab toggle"
-          icon={<EllipsisVIcon aria-hidden="true" />}
+          icon={<EllipsisVIcon />}
         />
       )}
     >

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -81,7 +81,7 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                 </FlexItem>
                 <Flex>
                   <Icon status="danger">
-                    <ExclamationCircleIcon aria-hidden />
+                    <ExclamationCircleIcon />
                   </Icon>
                   <a href="#">25 incidents detected</a>
                 </Flex>

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -65,7 +65,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
           onClick={onToggleTime}
           isExpanded={isTimeOpen}
           aria-label="Time picker"
-          icon={<OutlinedClockIcon aria-hidden="true" />}
+          icon={<OutlinedClockIcon />}
         />
       )}
     >

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -211,7 +211,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -231,7 +231,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -411,7 +411,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -431,7 +431,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >

package/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx

@@ -6,9 +6,11 @@ import {
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
   Checkbox,
-  DropEvent
+  DropEvent,
+  Modal,
+  ModalHeader,
+  ModalBody
 } from '@patternfly/react-core';
-import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
@@ -135,16 +137,10 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
             ))}
           </MultipleFileUploadStatus>
         )}
-        <ModalDeprecated
-          isOpen={!!modalText}
-          title="Unsupported file"
-          titleIconVariant="warning"
-          showClose
-          aria-label="unsupported file upload attempted"
-          onClose={() => setModalText('')}
-        >
-          {modalText}
-        </ModalDeprecated>
+        <Modal isOpen={!!modalText} aria-label="unsupported file upload attempted" onClose={() => setModalText('')}>
+          <ModalHeader title="Unsupported file" titleIconVariant="warning" />
+          <ModalBody>{modalText}</ModalBody>
+        </Modal>
       </MultipleFileUpload>
       <Checkbox
         id="horizontal-checkbox"

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -157,7 +157,7 @@ export const NavFlyout: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -177,7 +177,7 @@ export const NavFlyout: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >