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

package/helpers/package.json

@@ -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.1.0-prerelease.16","private":true}
+{"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.1.1-prerelease.0","private":true}

package/layouts/package.json

@@ -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.1.0-prerelease.16","private":true}
+{"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.1.1-prerelease.0","private":true}

package/next/package.json

@@ -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.1.0-prerelease.16","private":true}
+{"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.1.1-prerelease.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.1.0",
+  "version": "6.1.1-prerelease.1",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "fc70165f6d07de6a24f6943c826c1432ea6d44cf"
+  "gitHead": "561f17ebb6ec19c65d0bc7811ff7b0ada358fc31"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -6,7 +6,7 @@ import { AboutModalBoxHeader } from './AboutModalBoxHeader';
 import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
-import { Modal, ModalVariant } from '../../deprecated/components/Modal';
+import { Modal, ModalVariant } from '../Modal';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
@@ -82,10 +82,8 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
           {...(productName && { 'aria-labelledby': ariaLabelledBy })}
           aria-label={ariaLabel}
           onEscapePress={onClose}
-          showClose={false}
           appendTo={appendTo}
           disableFocusTrap={disableFocusTrap}
-          hasNoBodyWrapper
         >
           <AboutModalBox
             style={

package/src/components/Alert/AlertToggleExpandButton.tsx

@@ -33,7 +33,7 @@ export const AlertToggleExpandButton: React.FunctionComponent<AlertToggleExpandB
       {...props}
       icon={
         <span className={css(styles.alertToggleIcon)}>
-          <AngleRightIcon aria-hidden="true" />
+          <AngleRightIcon />
         </span>
       }
     />

package/src/components/BackToTop/BackToTop.tsx

@@ -84,7 +84,7 @@ const BackToTopBase: React.FunctionComponent<BackToTopProps> = ({
       onClick={handleClick}
       {...props}
     >
-      <Button variant="primary" icon={<AngleUpIcon aria-hidden="true" />} iconPosition="end">
+      <Button variant="primary" icon={<AngleUpIcon />} iconPosition="end">
         {title}
       </Button>
     </div>

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -292,7 +292,7 @@ export const CalendarMonth = ({
             variant="plain"
             aria-label={prevMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
-            icon={<AngleLeftIcon aria-hidden={true} />}
+            icon={<AngleLeftIcon />}
           />
         </div>
         <InputGroup>
@@ -355,7 +355,7 @@ export const CalendarMonth = ({
             variant="plain"
             aria-label={nextMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
-            icon={<AngleRightIcon aria-hidden={true} />}
+            icon={<AngleRightIcon />}
           />
         </div>
       </div>

package/src/components/Card/CardHeader.tsx

@@ -9,6 +9,7 @@ import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { Radio } from '../Radio';
 import { Checkbox } from '../Checkbox';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface CardHeaderActionsObject {
   /** Actions of the card header */
@@ -87,122 +88,122 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   toggleButtonProps,
   isToggleRightAligned,
   ...props
-}: CardHeaderProps) => {
-  const uniqueId = React.useId();
-
-  return (
-    <CardContext.Consumer>
-      {({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
-        const cardHeaderToggle = (
-          <div className={css(styles.cardHeaderToggle)}>
-            <Button
-              variant="plain"
-              type="button"
-              onClick={(evt) => {
-                onExpand(evt, cardId);
-              }}
-              {...toggleButtonProps}
-              icon={
-                <span className={css(styles.cardHeaderToggleIcon)}>
-                  <AngleRightIcon aria-hidden="true" />
-                </span>
-              }
-            />
-          </div>
-        );
-
-        const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
-        if (actions?.actions && isClickableOrSelectableOnly) {
-          // eslint-disable-next-line no-console
-          console.error(
-            `Card: ${
-              isClickable ? 'Clickable' : 'Selectable'
-            } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
+}: CardHeaderProps) => (
+  <GenerateId>
+    {(randomId) => (
+      <CardContext.Consumer>
+        {({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
+          const cardHeaderToggle = (
+            <div className={css(styles.cardHeaderToggle)}>
+              <Button
+                variant="plain"
+                type="button"
+                onClick={(evt) => {
+                  onExpand(evt, cardId);
+                }}
+                {...toggleButtonProps}
+                icon={
+                  <span className={css(styles.cardHeaderToggleIcon)}>
+                    <AngleRightIcon />
+                  </span>
+                }
+              />
+            </div>
           );
-        }
 
-        const isClickableOnlyCard = isClickable && !isSelectable;
-        if (
-          (isClickableOnlyCard || isSelectable) &&
-          !selectableActions?.selectableActionAriaLabel &&
-          !selectableActions?.selectableActionAriaLabelledby
-        ) {
-          // eslint-disable-next-line no-console
-          console.error(
-            `Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
-          );
-        }
+          const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
+          if (actions?.actions && isClickableOrSelectableOnly) {
+            // eslint-disable-next-line no-console
+            console.error(
+              `Card: ${
+                isClickable ? 'Clickable' : 'Selectable'
+              } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
+            );
+          }
 
-        const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
-        const getSelectableProps = () => ({
-          className: css('pf-m-standalone'),
-          inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
-          label: <></>,
-          'aria-label': selectableActions.selectableActionAriaLabel,
-          'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
-          id: selectableActions.selectableActionId ?? `card-selectable-${uniqueId}`,
-          name: selectableActions.name,
-          isDisabled: isCardDisabled,
-          onChange: selectableActions.onChange,
-          isChecked: selectableActions.isChecked ?? isSelected,
-          ...selectableActions.selectableActionProps
-        });
+          const isClickableOnlyCard = isClickable && !isSelectable;
+          if (
+            (isClickableOnlyCard || isSelectable) &&
+            !selectableActions?.selectableActionAriaLabel &&
+            !selectableActions?.selectableActionAriaLabelledby
+          ) {
+            // eslint-disable-next-line no-console
+            console.error(
+              `Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
+            );
+          }
 
-        const isClickableLinkCard = selectableActions?.to !== undefined;
-        const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
-        const getClickableProps = () => {
-          const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
-          const baseProps = {
-            className: css(
-              'pf-v6-c-card__clickable-action',
-              isDisabledLinkCard && styles.modifiers.disabled,
-              selectableActions?.isHidden && 'pf-v6-screen-reader'
-            ),
-            id: selectableActions.selectableActionId,
+          const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
+          const getSelectableProps = () => ({
+            className: css('pf-m-standalone'),
+            inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
+            label: <></>,
             'aria-label': selectableActions.selectableActionAriaLabel,
             'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
+            id: selectableActions.selectableActionId ?? `card-selectable-${randomId}`,
+            name: selectableActions.name,
+            isDisabled: isCardDisabled,
+            onChange: selectableActions.onChange,
+            isChecked: selectableActions.isChecked ?? isSelected,
             ...selectableActions.selectableActionProps
-          };
+          });
 
-          if (isClickableLinkCard) {
-            return {
-              ...baseProps,
-              href: selectableActions.to,
-              ...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
-              ...(selectableActions.isExternalLink && { target: '_blank' })
+          const isClickableLinkCard = selectableActions?.to !== undefined;
+          const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
+          const getClickableProps = () => {
+            const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
+            const baseProps = {
+              className: css(
+                'pf-v6-c-card__clickable-action',
+                isDisabledLinkCard && styles.modifiers.disabled,
+                selectableActions?.isHidden && 'pf-v6-screen-reader'
+              ),
+              id: selectableActions.selectableActionId,
+              'aria-label': selectableActions.selectableActionAriaLabel,
+              'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
+              ...selectableActions.selectableActionProps
             };
-          }
 
-          return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
-        };
+            if (isClickableLinkCard) {
+              return {
+                ...baseProps,
+                href: selectableActions.to,
+                ...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
+                ...(selectableActions.isExternalLink && { target: '_blank' })
+              };
+            }
 
-        return (
-          <div
-            className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
-            id={id}
-            {...props}
-          >
-            {onExpand && !isToggleRightAligned && cardHeaderToggle}
-            {(actions || (selectableActions && (isClickable || isSelectable))) && (
-              <CardActions
-                className={actions?.className}
-                hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
-              >
-                {actions?.actions}
-                {selectableActions && (isClickable || isSelectable) && (
-                  <CardSelectableActions className={selectableActions?.className}>
-                    {isSelectable && <SelectableCardInput {...getSelectableProps()} />}
-                    {isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
-                  </CardSelectableActions>
-                )}
-              </CardActions>
-            )}
-            {children && <CardHeaderMain>{children}</CardHeaderMain>}
-            {onExpand && isToggleRightAligned && cardHeaderToggle}
-          </div>
-        );
-      }}
-    </CardContext.Consumer>
-  );
-};
+            return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
+          };
+
+          return (
+            <div
+              className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
+              id={id}
+              {...props}
+            >
+              {onExpand && !isToggleRightAligned && cardHeaderToggle}
+              {(actions || (selectableActions && (isClickable || isSelectable))) && (
+                <CardActions
+                  className={actions?.className}
+                  hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
+                >
+                  {actions?.actions}
+                  {selectableActions && (isClickable || isSelectable) && (
+                    <CardSelectableActions className={selectableActions?.className}>
+                      {isSelectable && <SelectableCardInput {...getSelectableProps()} />}
+                      {isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
+                    </CardSelectableActions>
+                  )}
+                </CardActions>
+              )}
+              {children && <CardHeaderMain>{children}</CardHeaderMain>}
+              {onExpand && isToggleRightAligned && cardHeaderToggle}
+            </div>
+          );
+        }}
+      </CardContext.Consumer>
+    )}
+  </GenerateId>
+);
 CardHeader.displayName = 'CardHeader';

package/src/components/Card/examples/CardExpandable.tsx

@@ -71,7 +71,7 @@ export const CardExpandable: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardExpandableWithIcon.tsx

@@ -67,7 +67,7 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable with icon example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardHeaderInCardHead.tsx

@@ -58,7 +58,7 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card title inline with images and actions example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardOnlyActionsInCardHead.tsx

@@ -56,7 +56,7 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header without title example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardWithImageAndActions.tsx

@@ -64,7 +64,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header images and actions example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -33,7 +33,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     {...props}
     icon={
       <div className={css(styles.clipboardCopyToggleIcon)}>
-        <AngleRightIcon aria-hidden="true" />
+        <AngleRightIcon />
       </div>
     }
   />

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx

@@ -9,7 +9,7 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo
     variant="inline-compact"
     additionalActions={
       <ClipboardCopyAction>
-        <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<PlayIcon aria-hidden />} />
+        <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<PlayIcon />} />
       </ClipboardCopyAction>
     }
   >

package/src/components/DataList/DataListCheck.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { Checkbox, CheckboxProps } from '../Checkbox';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface DataListCheckProps extends Omit<CheckboxProps, 'ref' | 'id'> {
   /** Id of the DataList checkbox. */
@@ -46,21 +47,23 @@ export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
   otherControls = false,
   ...props
 }: DataListCheckProps) => {
-  const uniqueId = React.useId();
-
   const check = (
     <div className={css(styles.dataListCheck)}>
-      <Checkbox
-        id={id ?? `datalist-check-${uniqueId}`}
-        isChecked={isChecked}
-        checked={checked}
-        defaultChecked={defaultChecked}
-        onChange={onChange}
-        aria-invalid={!isValid}
-        isDisabled={isDisabled}
-        isLabelWrapped
-        {...props}
-      />
+      <GenerateId>
+        {(randomId) => (
+          <Checkbox
+            id={id ?? `datalist-check-${randomId}`}
+            isChecked={isChecked}
+            checked={checked}
+            defaultChecked={defaultChecked}
+            onChange={onChange}
+            aria-invalid={!isValid}
+            isDisabled={isDisabled}
+            isLabelWrapped
+            {...props}
+          />
+        )}
+      </GenerateId>
     </div>
   );
   return (

package/src/components/DataList/examples/DataListActions.tsx

@@ -86,7 +86,7 @@ export const DataListActions: React.FunctionComponent = () => {
                     onClick={onToggle}
                     variant="plain"
                     aria-label="Data list with actions example kebab toggle"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen}

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -84,7 +84,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle1}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 1"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen1}
@@ -138,7 +138,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle2}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen2}
@@ -201,7 +201,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle3}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 3"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen3}

package/src/components/DataList/examples/DataListClickableRows.tsx

@@ -76,7 +76,7 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 1"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -125,7 +125,7 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 2"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen2}

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -92,7 +92,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 1"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -162,7 +162,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 2"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -232,7 +232,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 3"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen3}

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -94,7 +94,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 1"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -166,7 +166,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 2"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -226,7 +226,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 3"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen3}

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -103,7 +103,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle1}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 1"
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                   isOpen={isOpen1}
@@ -176,7 +176,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle2}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 2"
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                   isOpen={isOpen2}

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -119,7 +119,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                 tabIndex={-1}
               >
                 <span className={css(styles.dualListSelectorItemToggleIcon)}>
-                  <AngleRightIcon aria-hidden />
+                  <AngleRightIcon />
                 </span>
               </div>
             )}

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -166,7 +166,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-                icon={<EllipsisVIcon aria-hidden="true" />}
+                icon={<EllipsisVIcon />}
               />
             )}
             isOpen={isAvailableKebabOpen}
@@ -201,7 +201,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-                icon={<EllipsisVIcon aria-hidden="true" />}
+                icon={<EllipsisVIcon />}
               />
             )}
             isOpen={isChosenKebabOpen}

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -240,7 +240,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
           {...(variant !== ExpandableSectionVariant.truncate && {
             icon: (
               <span className={css(styles.expandableSectionToggleIcon)}>
-                <AngleRightIcon aria-hidden />
+                <AngleRightIcon />
               </span>
             )
           })}

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -67,7 +67,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
                 isExpanded && direction === 'up' && styles.modifiers.expandTop
               )}
             >
-              <AngleRightIcon aria-hidden />
+              <AngleRightIcon />
             </span>
           )
         })}