@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.41

package/src/components/Tabs/Tabs.tsx

@@ -6,7 +6,6 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import {
-  getUniqueId,
   isElementInView,
   formatBreakpointMods,
   getLanguageDirection,
@@ -17,7 +16,8 @@ import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
 import { OverflowTab, HorizontalOverflowPopperProps } from './OverflowTab';
 import { Button } from '../Button';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId, canUseDOM } from '../../helpers';
+import { getOUIAProps, OUIAProps, canUseDOM } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import linkAccentLength from '@patternfly/react-tokens/dist/esm/c_tabs_link_accent_length';
 import linkAccentStart from '@patternfly/react-tokens/dist/esm/c_tabs_link_accent_start';
@@ -41,8 +41,7 @@ type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabPr
 type TabsChild = TabElement | boolean | null | undefined;
 
 export interface TabsProps
-  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'>, OUIAProps {
   /** Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here. */
   children: TabsChild | TabsChild[];
   /** Additional classes added to the tabs */
@@ -61,6 +60,10 @@ export interface TabsProps
   onAdd?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   /** Aria-label for the add button */
   addButtonAriaLabel?: string;
+  /** A readable string to create an accessible name for the tablist element. This can be used to differentiate multiple tablists on a page, and should be used for subtabs. */
+  tabListAriaLabel?: string;
+  /** Id of an element that provides an accessible name for the tablist. Use this when a visible label already exists on the page. */
+  tabListAriaLabelledBy?: string;
   /** Uniquely identifies the tabs */
   id?: string;
   /** Flag indicating that the add button is disabled when onAdd is passed in */
@@ -150,7 +153,6 @@ interface TabsState {
   shownKeys: (string | number)[];
   uncontrolledActiveKey: number | string;
   uncontrolledIsExpandedLocal: boolean;
-  ouiaStateId: string;
   overflowingTabCount: number;
   isInitializingAccent: boolean;
   currentLinkAccentLength: string;
@@ -173,7 +175,6 @@ class Tabs extends Component<TabsProps, TabsState> {
       shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case
       uncontrolledActiveKey: this.props.defaultActiveKey,
       uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
-      ouiaStateId: getDefaultOUIAId(Tabs.displayName),
       overflowingTabCount: 0,
       isInitializingAccent: true,
       currentLinkAccentLength: linkAccentLength.value,
@@ -206,7 +207,6 @@ class Tabs extends Component<TabsProps, TabsState> {
     backScrollAriaLabel: 'Scroll back',
     rightScrollAriaLabel: 'Scroll right',
     forwardScrollAriaLabel: 'Scroll forward',
-    component: TabsComponent.div,
     mountOnEnter: false,
     unmountOnExit: false,
     ouiaSafe: true,
@@ -501,6 +501,8 @@ class Tabs extends Component<TabsProps, TabsState> {
       toggleText,
       toggleAriaLabel,
       addButtonAriaLabel,
+      tabListAriaLabel,
+      tabListAriaLabelledBy,
       onToggle,
       onClose,
       onAdd,
@@ -528,8 +530,8 @@ class Tabs extends Component<TabsProps, TabsState> {
     const filteredChildrenOverflowing = filteredChildren.slice(filteredChildren.length - overflowingTabCount);
     const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement<TabProps>) => child.props);
 
-    const uniqueId = id || getUniqueId();
-    const Component: any = component === TabsComponent.nav ? 'nav' : 'div';
+    const defaultComponent = isNav && !component ? 'nav' : 'div';
+    const Component: any = component !== undefined ? component : defaultComponent;
     const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
 
     const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;
@@ -546,131 +548,145 @@ class Tabs extends Component<TabsProps, TabsState> {
     const overflowObjectProps = typeof isOverflowHorizontal === 'object' ? { ...isOverflowHorizontal } : {};
 
     return (
-      <TabsContextProvider
-        value={{
-          variant,
-          mountOnEnter,
-          unmountOnExit,
-          localActiveKey,
-          uniqueId,
-          setAccentStyles: this.setAccentStyles,
-          handleTabClick: (...args) => this.handleTabClick(...args),
-          handleTabClose: onClose
-        }}
-      >
-        <Component
-          aria-label={ariaLabel}
-          className={css(
-            styles.tabs,
-            styles.modifiers.animateCurrent,
-            isFilled && styles.modifiers.fill,
-            isSubtab && styles.modifiers.subtab,
-            isNav && styles.modifiers.nav,
-            isVertical && styles.modifiers.vertical,
-            isVertical && expandable && formatBreakpointMods(expandable, styles),
-            isVertical && expandable && isExpandedLocal && styles.modifiers.expanded,
-            isBox && styles.modifiers.box,
-            showScrollButtons && styles.modifiers.scrollable,
-            usePageInsets && styles.modifiers.pageInsets,
-            hasNoBorderBottom && styles.modifiers.noBorderBottom,
-            formatBreakpointMods(inset, styles),
-            variantStyle[variant],
-            hasOverflowTab && styles.modifiers.overflow,
-            isInitializingAccent && styles.modifiers.initializingAccent,
-            className
-          )}
-          {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-          id={id && id}
-          {...props}
-          style={{
-            [linkAccentLength.name]: currentLinkAccentLength,
-            [linkAccentStart.name]: currentLinkAccentStart,
-            ...props.style
-          }}
-        >
-          {expandable && isVertical && (
-            <GenerateId>
-              {(randomId) => (
-                <div className={css(styles.tabsToggle)}>
-                  <div className={css(styles.tabsToggleButton)}>
+      <SSRSafeIds prefix="pf-random-id-" ouiaComponentType={Tabs.displayName}>
+        {(generatedId, generatedOuiaId) => {
+          const uniqueId = id || generatedId;
+          return (
+            <TabsContextProvider
+              value={{
+                variant,
+                mountOnEnter,
+                unmountOnExit,
+                localActiveKey,
+                uniqueId,
+                setAccentStyles: this.setAccentStyles,
+                handleTabClick: (...args) => this.handleTabClick(...args),
+                handleTabClose: onClose
+              }}
+            >
+              <Component
+                aria-label={ariaLabel}
+                className={css(
+                  styles.tabs,
+                  styles.modifiers.animateCurrent,
+                  isFilled && styles.modifiers.fill,
+                  isSubtab && styles.modifiers.subtab,
+                  isNav && styles.modifiers.nav,
+                  isVertical && styles.modifiers.vertical,
+                  isVertical && expandable && formatBreakpointMods(expandable, styles),
+                  isVertical && expandable && isExpandedLocal && styles.modifiers.expanded,
+                  isBox && styles.modifiers.box,
+                  showScrollButtons && styles.modifiers.scrollable,
+                  usePageInsets && styles.modifiers.pageInsets,
+                  hasNoBorderBottom && styles.modifiers.noBorderBottom,
+                  formatBreakpointMods(inset, styles),
+                  variantStyle[variant],
+                  hasOverflowTab && styles.modifiers.overflow,
+                  isInitializingAccent && styles.modifiers.initializingAccent,
+                  className
+                )}
+                {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+                id={id && id}
+                {...props}
+                style={{
+                  [linkAccentLength.name]: currentLinkAccentLength,
+                  [linkAccentStart.name]: currentLinkAccentStart,
+                  ...props.style
+                }}
+              >
+                {expandable && isVertical && (
+                  <GenerateId>
+                    {(randomId) => (
+                      <div className={css(styles.tabsToggle)}>
+                        <div className={css(styles.tabsToggleButton)}>
+                          <Button
+                            onClick={(event) => toggleTabs(event, !isExpandedLocal)}
+                            variant="plain"
+                            aria-label={toggleAriaLabel}
+                            aria-expanded={isExpandedLocal}
+                            id={`${randomId}-button`}
+                            aria-labelledby={`${randomId}-text ${randomId}-button`}
+                            icon={
+                              <span className={css(styles.tabsToggleIcon)}>
+                                <AngleRightIcon />
+                              </span>
+                            }
+                          >
+                            {toggleText && <span id={`${randomId}-text`}>{toggleText}</span>}
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  </GenerateId>
+                )}
+                {renderScrollButtons && (
+                  <div className={css(styles.tabsScrollButton)}>
+                    <Button
+                      aria-label={backScrollAriaLabel || leftScrollAriaLabel}
+                      onClick={this.scrollBack}
+                      isDisabled={disableBackScrollButton}
+                      aria-hidden={disableBackScrollButton}
+                      ref={this.leftScrollButtonRef}
+                      variant="plain"
+                      icon={<AngleLeftIcon />}
+                    />
+                  </div>
+                )}
+                <ul
+                  aria-label={tabListAriaLabel}
+                  aria-labelledby={tabListAriaLabelledBy}
+                  className={css(styles.tabsList)}
+                  ref={this.tabList}
+                  onScroll={this.handleScrollButtons}
+                  role="tablist"
+                >
+                  {isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
+                  {hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
+                </ul>
+                {renderScrollButtons && (
+                  <div className={css(styles.tabsScrollButton)}>
                     <Button
-                      onClick={(event) => toggleTabs(event, !isExpandedLocal)}
+                      aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
+                      onClick={this.scrollForward}
+                      isDisabled={disableForwardScrollButton}
+                      aria-hidden={disableForwardScrollButton}
                       variant="plain"
-                      aria-label={toggleAriaLabel}
-                      aria-expanded={isExpandedLocal}
-                      id={`${randomId}-button`}
-                      aria-labelledby={`${randomId}-text ${randomId}-button`}
-                      icon={
-                        <span className={css(styles.tabsToggleIcon)}>
-                          <AngleRightIcon />
-                        </span>
-                      }
-                    >
-                      {toggleText && <span id={`${randomId}-text`}>{toggleText}</span>}
-                    </Button>
+                      icon={<AngleRightIcon />}
+                    />
                   </div>
-                </div>
-              )}
-            </GenerateId>
-          )}
-          {renderScrollButtons && (
-            <div className={css(styles.tabsScrollButton)}>
-              <Button
-                aria-label={backScrollAriaLabel || leftScrollAriaLabel}
-                onClick={this.scrollBack}
-                isDisabled={disableBackScrollButton}
-                aria-hidden={disableBackScrollButton}
-                ref={this.leftScrollButtonRef}
-                variant="plain"
-                icon={<AngleLeftIcon />}
-              />
-            </div>
-          )}
-          <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons} role="tablist">
-            {isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
-            {hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
-          </ul>
-          {renderScrollButtons && (
-            <div className={css(styles.tabsScrollButton)}>
-              <Button
-                aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
-                onClick={this.scrollForward}
-                isDisabled={disableForwardScrollButton}
-                aria-hidden={disableForwardScrollButton}
-                variant="plain"
-                icon={<AngleRightIcon />}
-              />
-            </div>
-          )}
-          {onAdd !== undefined && (
-            <span className={css(styles.tabsAdd)}>
-              <Button
-                variant="plain"
-                aria-label={addButtonAriaLabel || 'Add tab'}
-                onClick={onAdd}
-                icon={<PlusIcon />}
-                isDisabled={isAddButtonDisabled}
-              />
-            </span>
-          )}
-        </Component>
-        {filteredChildren
-          .filter(
-            (child) =>
-              child.props.children &&
-              !(unmountOnExit && child.props.eventKey !== localActiveKey) &&
-              !(mountOnEnter && shownKeys.indexOf(child.props.eventKey) === -1)
-          )
-          .map((child) => (
-            <TabContent
-              key={child.props.eventKey}
-              activeKey={localActiveKey}
-              child={child}
-              id={child.props.id || uniqueId}
-              ouiaId={child.props.ouiaId}
-            />
-          ))}
-      </TabsContextProvider>
+                )}
+                {onAdd !== undefined && (
+                  <span className={css(styles.tabsAdd)}>
+                    <Button
+                      variant="plain"
+                      aria-label={addButtonAriaLabel || 'Add tab'}
+                      onClick={onAdd}
+                      icon={<PlusIcon />}
+                      isDisabled={isAddButtonDisabled}
+                    />
+                  </span>
+                )}
+              </Component>
+              {filteredChildren
+                .filter(
+                  (child) =>
+                    child.props.children &&
+                    !(unmountOnExit && child.props.eventKey !== localActiveKey) &&
+                    !(mountOnEnter && shownKeys.indexOf(child.props.eventKey) === -1)
+                )
+                .map((child) => (
+                  <TabContent
+                    key={child.props.eventKey}
+                    activeKey={localActiveKey}
+                    child={child}
+                    id={child.props.id || uniqueId}
+                    ouiaId={child.props.ouiaId}
+                  />
+                ))}
+            </TabsContextProvider>
+          );
+        }}
+      </SSRSafeIds>
     );
   }
 }

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

@@ -166,6 +166,66 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when unc
   expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
 });
 
+test(`Renders with class ${styles.modifiers.nav} when isNav is true`, () => {
+  render(
+    <Tabs isNav role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.nav);
+});
+
+test(`Renders with div wrapper by default`, () => {
+  render(
+    <Tabs>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
+test(`Renders with nav wrapper when component="nav"`, () => {
+  render(
+    <Tabs component="nav">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test(`Renders with nav wrapper when isNav is true`, () => {
+  render(
+    <Tabs isNav>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test(`Overrides isNav nav wrapper when component="div" is passed`, () => {
+  render(
+    <Tabs component="div" isNav>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">
@@ -682,3 +742,51 @@ test(`should render with custom inline style and accent position inline style`,
 
   expect(screen.getByRole('region')).toHaveStyle(`background-color: #12345;--pf-v6-c-tabs--link-accent--start: 0px;`);
 });
+
+test('should render tablist aria-label when provided', () => {
+  const { asFragment } = render(
+    <Tabs id="tabListLabelTabs" tabListAriaLabel="Primary tab list">
+      <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+        Tab 1 section
+      </Tab>
+      <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
+        Tab 2 section
+      </Tab>
+    </Tabs>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('should render tablist aria-labelledby when provided', () => {
+  const { asFragment } = render(
+    <>
+      <h2 id="tablistHeading">My tabs heading</h2>
+      <Tabs id="tabListLabelledByTabs" tabListAriaLabelledBy="tablistHeading">
+        <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+          Tab 1 section
+        </Tab>
+        <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
+          Tab 2 section
+        </Tab>
+      </Tabs>
+    </>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('should not render tablist aria-label or aria-labelledby when neither is provided', () => {
+  const { asFragment } = render(
+    <Tabs id="noTabListLabelTabs">
+      <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+        Tab 1 section
+      </Tab>
+      <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
+        Tab 2 section
+      </Tab>
+    </Tabs>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -27,12 +27,24 @@ exports[`Matches snapshot when expanded 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 256 512"
           width="1em"
         >
-          <path
-            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 256 512"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+            />
+          </svg>
         </svg>
       </span>
     </button>
@@ -112,12 +124,24 @@ exports[`Renders tabs passed via overflowingTabs when expanded in strict mode 1`
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 256 512"
           width="1em"
         >
-          <path
-            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 256 512"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+            />
+          </svg>
         </svg>
       </span>
     </button>

package/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`renders tab action 1`] = `
       <button
         aria-label="Tab action"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"