@patternfly/react-core 6.5.0-prerelease.34 → 6.5.0-prerelease.35

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.5.0-prerelease.33","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.5.0-prerelease.34","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.5.0-prerelease.33","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.5.0-prerelease.34","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.5.0-prerelease.33","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.5.0-prerelease.34","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.34",
+  "version": "6.5.0-prerelease.35",
   "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 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "1e5d932bb15d8f512a2602455fd3cd0c1d9d9d1e"
+  "gitHead": "dbf8cae7e1258f9120e013998f87423eeca56708"
 }

package/src/components/Tabs/Tabs.tsx

@@ -60,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 */
@@ -499,6 +503,8 @@ class Tabs extends Component<TabsProps, TabsState> {
       toggleText,
       toggleAriaLabel,
       addButtonAriaLabel,
+      tabListAriaLabel,
+      tabListAriaLabelledBy,
       onToggle,
       onClose,
       onAdd,
@@ -625,7 +631,14 @@ class Tabs extends Component<TabsProps, TabsState> {
               />
             </div>
           )}
-          <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons} role="tablist">
+          <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>

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

@@ -742,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__/Tabs.test.tsx.snap

@@ -1118,6 +1118,266 @@ exports[`should render subtabs 1`] = `
 </DocumentFragment>
 `;
 
+exports[`should render tablist aria-label when provided 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-38"
+    data-ouia-component-type="PF6/Tabs"
+    data-ouia-safe="true"
+    id="tabListLabelTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
+  >
+    <ul
+      aria-label="Primary tab list"
+      class="pf-v6-c-tabs__list"
+      role="tablist"
+    >
+      <li
+        class="pf-v6-c-tabs__item pf-m-current"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-0-tab1"
+          aria-selected="true"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-0-tab1"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 1"
+          </span>
+        </button>
+      </li>
+      <li
+        class="pf-v6-c-tabs__item"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-1-tab2"
+          aria-selected="false"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-1-tab2"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 2"
+          </span>
+        </button>
+      </li>
+    </ul>
+  </div>
+  <section
+    aria-labelledby="pf-tab-0-tab1"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    id="pf-tab-section-0-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>
+</DocumentFragment>
+`;
+
+exports[`should render tablist aria-labelledby when provided 1`] = `
+<DocumentFragment>
+  <h2
+    id="tablistHeading"
+  >
+    My tabs heading
+  </h2>
+  <div
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-39"
+    data-ouia-component-type="PF6/Tabs"
+    data-ouia-safe="true"
+    id="tabListLabelledByTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
+  >
+    <ul
+      aria-labelledby="tablistHeading"
+      class="pf-v6-c-tabs__list"
+      role="tablist"
+    >
+      <li
+        class="pf-v6-c-tabs__item pf-m-current"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-0-tab1"
+          aria-selected="true"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-0-tab1"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 1"
+          </span>
+        </button>
+      </li>
+      <li
+        class="pf-v6-c-tabs__item"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-1-tab2"
+          aria-selected="false"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-1-tab2"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 2"
+          </span>
+        </button>
+      </li>
+    </ul>
+  </div>
+  <section
+    aria-labelledby="pf-tab-0-tab1"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    id="pf-tab-section-0-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>
+</DocumentFragment>
+`;
+
+
+exports[`should not render tablist aria-label or aria-labelledby when neither is provided 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-40"
+    data-ouia-component-type="PF6/Tabs"
+    data-ouia-safe="true"
+    id="noTabListLabelTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
+  >
+    <ul
+      class="pf-v6-c-tabs__list"
+      role="tablist"
+    >
+      <li
+        class="pf-v6-c-tabs__item pf-m-current"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-0-tab1"
+          aria-selected="true"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-0-tab1"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 1"
+          </span>
+        </button>
+      </li>
+      <li
+        class="pf-v6-c-tabs__item"
+        role="presentation"
+      >
+        <button
+          aria-controls="pf-tab-section-1-tab2"
+          aria-selected="false"
+          class="pf-v6-c-tabs__link"
+          data-ouia-component-type="PF6/TabButton"
+          data-ouia-safe="true"
+          id="pf-tab-1-tab2"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="pf-v6-c-tabs__item-text"
+          >
+            "Tab item 2"
+          </span>
+        </button>
+      </li>
+    </ul>
+  </div>
+  <section
+    aria-labelledby="pf-tab-0-tab1"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    id="pf-tab-section-0-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-v6-c-tab-content"
+    data-ouia-component-type="PF6/TabContent"
+    data-ouia-safe="true"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>
+</DocumentFragment>
+`;
+
 exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div

package/src/components/Tabs/examples/Tabs.md

@@ -159,6 +159,8 @@ Use subtabs within other components, like modals. Subtabs have less visually pro
 
 To apply subtab styling to tabs, use the `isSubtab` property.
 
+For accessibility, give the primary tablist an accessible name (for example, `tabListAriaLabel="Primary"`) and give any subtab tablist an accessible name that matches the currently selected primary tab (for example, `tabListAriaLabel="Users"`).
+
 ```ts file="./TabsSubtabs.tsx"
 
 ```

package/src/components/Tabs/examples/TabsNavSubtab.tsx

@@ -27,6 +27,7 @@ export const TabsNavSubtab: React.FunctionComponent = () => {
       onSelect={handleTabClickFirst}
       component={TabsComponent.nav}
       aria-label="Tabs in the sub tabs with nav element example"
+      tabListAriaLabel="Primary"
     >
       <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#" aria-label="Subtabs with nav content users">
         <Tabs
@@ -35,6 +36,7 @@ export const TabsNavSubtab: React.FunctionComponent = () => {
           onSelect={handleTabClickSecond}
           aria-label="Local secondary"
           component={TabsComponent.nav}
+          tabListAriaLabel="Users"
         >
           <Tab eventKey={20} title={<TabTitleText>Item 1</TabTitleText>} href="#">
             Item 1 item section

package/src/components/Tabs/examples/TabsSubtabs.tsx

@@ -33,6 +33,7 @@ export const TabsSubtabs: React.FunctionComponent = () => {
         onSelect={handleTabClickFirst}
         isBox={isBox}
         aria-label="Tabs in the tabs with subtabs example"
+        tabListAriaLabel="Primary"
         role="region"
       >
         <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Tabs with subtabs content users">
@@ -41,6 +42,7 @@ export const TabsSubtabs: React.FunctionComponent = () => {
             role="region"
             activeKey={activeTabKey2}
             isSubtab
+            tabListAriaLabel="Users"
             onSelect={handleTabClickSecond}
           >
             <Tab eventKey={20} title={<TabTitleText>Subtab item 1</TabTitleText>}>