@patternfly/react-core 6.1.0-prerelease.9 → 6.1.1-prerelease.0

package/src/components/Menu/examples/MenuOptionSingleSelect.tsx

@@ -17,7 +17,7 @@ export const MenuOptionSingleSelect: React.FunctionComponent = () => {
         <MenuList aria-label="Menu single select example">
           <MenuItem itemId={0}>Option 1</MenuItem>
           <MenuItem itemId={1}>Option 2</MenuItem>
-          <MenuItem icon={<TableIcon aria-hidden />} itemId={2}>
+          <MenuItem icon={<TableIcon />} itemId={2}>
             Option 3
           </MenuItem>
         </MenuList>

package/src/components/Menu/examples/MenuWithActions.tsx

@@ -31,7 +31,7 @@ export const MenuWithActions: React.FunctionComponent = () => {
               isSelected={selectedItems.indexOf(0) !== -1}
               actions={
                 <MenuItemAction
-                  icon={<CodeBranchIcon aria-hidden />}
+                  icon={<CodeBranchIcon />}
                   actionId="code"
                   // eslint-disable-next-line no-console
                   onClick={() => console.log('clicked on code icon')}
@@ -46,7 +46,7 @@ export const MenuWithActions: React.FunctionComponent = () => {
             <MenuItem
               isDisabled
               isSelected={selectedItems.indexOf(1) !== -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"
               itemId={1}
             >
@@ -54,14 +54,14 @@ export const MenuWithActions: React.FunctionComponent = () => {
             </MenuItem>
             <MenuItem
               isSelected={selectedItems.indexOf(2) !== -1}
-              actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId="copy" aria-label="Copy" />}
+              actions={<MenuItemAction icon={<ClipboardIcon />} actionId="copy" aria-label="Copy" />}
               itemId={2}
             >
               Item 3
             </MenuItem>
             <MenuItem
               isSelected={selectedItems.indexOf(3) !== -1}
-              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"
               itemId={3}
             >

package/src/components/Menu/examples/MenuWithDescription.tsx

@@ -15,14 +15,14 @@ export const MenuWithDescription: React.FunctionComponent = () => {
     <Menu onSelect={onSelect} activeItemId={activeItem}>
       <MenuContent>
         <MenuList>
-          <MenuItem icon={<CodeBranchIcon aria-hidden />} description="Description" itemId={0}>
+          <MenuItem icon={<CodeBranchIcon />} description="Description" itemId={0}>
             Action 1
           </MenuItem>
-          <MenuItem isDisabled icon={<CodeBranchIcon aria-hidden />} description="Description" itemId={1}>
+          <MenuItem isDisabled icon={<CodeBranchIcon />} description="Description" itemId={1}>
             Action 2 disabled
           </MenuItem>
           <MenuItem
-            icon={<CodeBranchIcon aria-hidden />}
+            icon={<CodeBranchIcon />}
             description="Nunc non ornare ex, et pretium dui. Duis nec augue at urna elementum blandit tincidunt eget metus. Aenean sed metus id urna dignissim interdum. Aenean vel nisl vitae arcu vehicula pulvinar eget nec turpis. Cras sit amet est est."
             itemId={2}
           >

package/src/components/Menu/examples/MenuWithDrilldown.tsx

@@ -153,21 +153,21 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon aria-hidden />}
+            icon={<StorageDomainIcon />}
             direction="down"
             drilldownMenu={
               <DrilldownMenu id="drilldown-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/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -435,18 +435,18 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
             </MenuItem>
             <MenuItem
               itemId="group:storage"
-              icon={<StorageDomainIcon aria-hidden />}
+              icon={<StorageDomainIcon />}
               direction="down"
               onClick={() => setBreadcrumb(addStorageBreadcrumb)}
               drilldownMenu={
                 <DrilldownMenu id="breadcrumbs-drilldownMenuStorage">
-                  <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/components/Menu/examples/MenuWithDrilldownInitialState.tsx

@@ -156,21 +156,21 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon aria-hidden />}
+            icon={<StorageDomainIcon />}
             direction="down"
             drilldownMenu={
               <DrilldownMenu id="initial-state-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/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx

@@ -153,21 +153,21 @@ export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () =>
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon aria-hidden />}
+            icon={<StorageDomainIcon />}
             direction="down"
             drilldownMenu={() => (
               <DrilldownMenu id="functions-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/components/Menu/examples/MenuWithFavorites.tsx

@@ -32,21 +32,21 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
       text: 'Item 1',
       description: 'Description 1',
       itemId: 'item-1',
-      action: <BarsIcon aria-hidden />,
+      action: <BarsIcon />,
       actionId: 'bars'
     },
     {
       text: 'Item 2',
       description: 'Description 2',
       itemId: 'item-2',
-      action: <ClipboardIcon aria-hidden />,
+      action: <ClipboardIcon />,
       actionId: 'clipboard'
     },
     {
       text: 'Item 3',
       description: 'Description 3',
       itemId: 'item-3',
-      action: <BellIcon aria-hidden />,
+      action: <BellIcon />,
       actionId: 'bell'
     }
   ];

package/src/components/Menu/examples/MenuWithIcons.tsx

@@ -17,13 +17,13 @@ export const MenuWithIcons: React.FunctionComponent = () => {
     <Menu onSelect={onSelect} activeItemId={activeItem}>
       <MenuContent>
         <MenuList>
-          <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId={0}>
+          <MenuItem icon={<CodeBranchIcon />} itemId={0}>
             From git
           </MenuItem>
-          <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId={1}>
+          <MenuItem icon={<LayerGroupIcon />} itemId={1}>
             Container image
           </MenuItem>
-          <MenuItem icon={<CubeIcon aria-hidden />} itemId={2}>
+          <MenuItem icon={<CubeIcon />} itemId={2}>
             Docker file
           </MenuItem>
         </MenuList>

package/src/components/MenuToggle/MenuToggle.tsx

@@ -122,13 +122,13 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
     if (!statusIcon) {
       switch (status) {
         case MenuToggleStatus.success:
-          _statusIcon = <CheckCircleIcon aria-hidden="true" />;
+          _statusIcon = <CheckCircleIcon />;
           break;
         case MenuToggleStatus.warning:
-          _statusIcon = <ExclamationTriangleIcon aria-hidden="true" />;
+          _statusIcon = <ExclamationTriangleIcon />;
           break;
         case MenuToggleStatus.danger:
-          _statusIcon = <ExclamationCircleIcon aria-hidden="true" />;
+          _statusIcon = <ExclamationCircleIcon />;
           break;
       }
     }
@@ -137,7 +137,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       <span className={css(styles.menuToggleControls)}>
         {status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
         <span className={css(styles.menuToggleToggleIcon)}>
-          <CaretDownIcon aria-hidden />
+          <CaretDownIcon />
         </span>
       </span>
     );

package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx

@@ -31,7 +31,7 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => setInputValue('')}
               aria-label="Clear input value"
-              icon={<TimesIcon aria-hidden />}
+              icon={<TimesIcon />}
             />
           )}
         </TextInputGroupUtilities>

package/src/components/Modal/examples/Modal.md

@@ -20,7 +20,7 @@ Basic modals give users the option to either confirm or cancel an action.
 
 To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
-A modal must have a `<ModalBody>`, containing the main content of the modal. The `<ModalHeader>` and `<ModalFooter>` components are not required, but are typically used to display the modal title and any button actions, respectively. 
+The `<ModalBody>`, `<ModalHeader>`, and `<ModalFooter>` components are not required, but are typically used to display the main content of the modal, modal title, and any button actions, respectively.
 
 ```ts file="./ModalBasic.tsx"
 

package/src/components/Nav/NavExpandable.tsx

@@ -135,7 +135,7 @@ class NavExpandable extends React.Component<NavExpandableProps, NavExpandableSta
                   {typeof title !== 'string' ? <span className={css(`${styles.nav}__link-text`)}>{title}</span> : title}
                   <span className={css(styles.navToggle)}>
                     <span className={css(styles.navToggleIcon)}>
-                      <AngleRightIcon aria-hidden="true" />
+                      <AngleRightIcon />
                     </span>
                   </span>
                 </button>

package/src/components/Nav/NavItem.tsx

@@ -164,7 +164,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   const flyoutButton = (
     <span className={css(styles.navToggle)}>
       <span className={css(styles.navToggleIcon)}>
-        <AngleRightIcon aria-hidden />
+        <AngleRightIcon />
       </span>
     </span>
   );

package/src/components/NotificationDrawer/NotificationDrawerHeader.tsx

@@ -51,7 +51,7 @@ export const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawe
               variant={ButtonVariant.plain}
               aria-label={closeButtonAriaLabel}
               onClick={(event) => onClose(event)}
-              icon={<TimesIcon aria-hidden="true" />}
+              icon={<TimesIcon />}
             />
           </div>
         )}

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

@@ -64,7 +64,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               onClick={onToggle(0)}
               variant="plain"
               aria-label={`Basic example header kebab toggle`}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -91,7 +91,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(1)}
                     variant="plain"
                     aria-label={`Basic example notification 1 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -120,7 +120,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(2)}
                     variant="plain"
                     aria-label={`Basic example notification 2 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -151,7 +151,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(3)}
                     variant="plain"
                     aria-label={`Basic example notification 3 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -181,7 +181,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(4)}
                     variant="plain"
                     aria-label={`Basic example notification 4 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -210,7 +210,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(5)}
                     variant="plain"
                     aria-label={`Basic example notification 5 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -235,7 +235,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(6)}
                     variant="plain"
                     aria-label={`Basic example notification 6 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -89,7 +89,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
               onClick={() => onToggle('groups-kebab-toggle-1')}
               variant="plain"
               aria-label={`Groups example header kebab toggle`}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -124,7 +124,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-2')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 1 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -154,7 +154,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-3')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 2 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -185,7 +185,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-4')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 3 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -215,7 +215,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-5')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 4 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -254,7 +254,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-6')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 1 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -284,7 +284,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-7')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 2 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -315,7 +315,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-8')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 3 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -345,7 +345,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-9')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 4 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >

package/src/components/NumberInput/NumberInput.tsx

@@ -126,7 +126,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             onClick={(evt) => onMinus(evt, inputName)}
             icon={
               <span className={css(styles.numberInputIcon)}>
-                <MinusIcon aria-hidden="true" />
+                <MinusIcon />
               </span>
             }
             {...minusBtnProps}
@@ -155,7 +155,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             onClick={(evt) => onPlus(evt, inputName)}
             icon={
               <span className={css(styles.numberInputIcon)}>
-                <PlusIcon aria-hidden="true" />
+                <PlusIcon />
               </span>
             }
             {...plusBtnProps}

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -226,12 +226,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
           </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={onClearButtonClick}
-            aria-label="Clear input value"
-            icon={<TimesIcon aria-hidden />}
-          />
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -219,12 +219,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
           aria-controls="select-multi-typeahead-checkbox-listbox"
         />
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={onClearButtonClick}
-            aria-label="Clear input value"
-            icon={<TimesIcon aria-hidden />}
-          />
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -239,12 +239,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
           </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={onClearButtonClick}
-            aria-label="Clear input value"
-            icon={<TimesIcon aria-hidden />}
-          />
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -223,12 +223,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
         />
 
         <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={onClearButtonClick}
-            aria-label="Clear input value"
-            icon={<TimesIcon aria-hidden />}
-          />
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -230,12 +230,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
         />
 
         <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={onClearButtonClick}
-            aria-label="Clear input value"
-            icon={<TimesIcon aria-hidden />}
-          />
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>