@patternfly/react-core 4.211.0 → 4.211.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.211.0",
+  "version": "4.211.3",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.62.0",
-    "@patternfly/react-styles": "^4.61.0",
-    "@patternfly/react-tokens": "^4.63.0",
+    "@patternfly/react-icons": "^4.62.3",
+    "@patternfly/react-styles": "^4.61.3",
+    "@patternfly/react-tokens": "^4.63.3",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.193.0",
+    "@patternfly/patternfly": "4.194.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "7b52196359d23335c01897580e8a1864093cebdd"
+  "gitHead": "cbbd9d29145826f7cebc54c76ce1cbed4efd3be7"
 }

package/src/components/Menu/Menu.tsx

@@ -210,7 +210,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       ? Array.from(this.activeMenu.getElementsByTagName('UL')[0].children).filter(
           el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
         )
-      : Array.from(this.activeMenu.getElementsByTagName('LI')).filter(
+      : Array.from(this.menuRef.current.getElementsByTagName('LI')).filter(
           el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
         );
   };

package/src/components/Page/PageBreadcrumb.tsx

@@ -40,6 +40,7 @@ export const PageBreadcrumb = ({
       hasOverflowScroll && styles.modifiers.overflowScroll,
       className
     )}
+    {...(hasOverflowScroll && { tabIndex: 0 })}
     {...props}
   >
     {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}

package/src/components/Page/PageGroup.tsx

@@ -37,6 +37,7 @@ export const PageGroup = ({
       hasOverflowScroll && styles.modifiers.overflowScroll,
       className
     )}
+    {...(hasOverflowScroll && { tabIndex: 0 })}
   >
     {children}
   </div>

package/src/components/Page/PageNavigation.tsx

@@ -40,6 +40,7 @@ export const PageNavigation = ({
       hasOverflowScroll && styles.modifiers.overflowScroll,
       className
     )}
+    {...(hasOverflowScroll && { tabIndex: 0 })}
     {...props}
   >
     {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}

package/src/components/Page/PageSection.tsx

@@ -101,6 +101,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
       hasOverflowScroll && styles.modifiers.overflowScroll,
       className
     )}
+    {...(hasOverflowScroll && { tabIndex: 0 })}
   >
     {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
     {!isWidthLimited && children}

package/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap

@@ -48,6 +48,7 @@ exports[`page breadcrumb Verify overflow scroll 1`] = `
 <DocumentFragment>
   <section
     class="pf-c-page__main-breadcrumb pf-m-overflow-scroll"
+    tabindex="0"
   >
     test
   </section>

package/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap

@@ -34,6 +34,7 @@ exports[`page group Verify overflow scroll 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-page__main-group pf-m-overflow-scroll"
+    tabindex="0"
   >
     test
   </div>

package/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap

@@ -48,6 +48,7 @@ exports[`page navigation Verify overflow scroll 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-page__main-nav pf-m-overflow-scroll"
+    tabindex="0"
   >
     test
   </div>

package/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap

@@ -112,6 +112,7 @@ exports[`Verify page section overflow scroll 1`] = `
 <DocumentFragment>
   <section
     class="pf-c-page__main-section pf-m-overflow-scroll"
+    tabindex="0"
   >
     test
   </section>

package/src/components/Panel/Panel.tsx

@@ -11,13 +11,16 @@ export interface PanelProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'raised' | 'bordered';
   /** Flag to add scrollable styling to the panel */
   isScrollable?: boolean;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
 }
 
-export const Panel: React.FunctionComponent<PanelProps> = ({
+const PanelBase: React.FunctionComponent<PanelProps> = ({
   className,
   children,
   variant,
   isScrollable,
+  innerRef,
   ...props
 }: PanelProps) => (
   <div
@@ -28,10 +31,14 @@ export const Panel: React.FunctionComponent<PanelProps> = ({
       isScrollable && styles.modifiers.scrollable,
       className
     )}
+    ref={innerRef}
     {...props}
   >
     {children}
   </div>
 );
 
+export const Panel = React.forwardRef((props: PanelProps, ref: React.Ref<any>) => (
+  <PanelBase innerRef={ref} {...props} />
+));
 Panel.displayName = 'Panel';

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

@@ -56,7 +56,12 @@ class SimpleTabs extends React.Component {
 
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the default example">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isBox={isBox}
+          aria-label="Tabs in the default example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -99,7 +104,9 @@ class SimpleTabs extends React.Component {
 
 ### With tooltip react ref
 
-When using a React ref to link a Tooltip to a Tab component, an `id` must be manually set on the Tooltip component, and the Tab component must have a matching `aria-describedby` attribute so that screen readers are able to announce the Tooltip contents.
+When using a React ref to link a Tooltip to a Tab component via the `reference` prop, you should avoid manually passing in a value of "off" to the `aria-live` prop. Doing so may lead to the tooltip becoming less accessible to assistive technologies.
+
+The tooltip should also have the `id` prop passed in. The value given to this prop should then be passed into the tab's `aria-describedby` prop. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.
 
 ```js
 import React from 'react';
@@ -132,7 +139,12 @@ class SimpleTabs extends React.Component {
 
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the example with a tooltip ref">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isBox={isBox}
+          aria-label="Tabs in the example with a tooltip ref"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -153,15 +165,15 @@ class SimpleTabs extends React.Component {
             title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>}
             isAriaDisabled
             ref={tooltipRef}
-            aria-describedby="tooltip-tab-5"
+            aria-describedby="tooltip-ref1"
           >
             ARIA Disabled (Tooltip)
           </Tab>
         </Tabs>
         <Tooltip
+          id="tooltip-ref1"
           content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support."
           reference={tooltipRef}
-          id="tooltip-tab-5"
         />
         <div style={{ marginTop: '20px' }}>
           <Checkbox
@@ -338,7 +350,12 @@ class ScrollButtonsPrimaryTabs extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the default overflow example">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isBox={isBox}
+          aria-label="Tabs in the default overflow example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -424,7 +441,13 @@ class VerticalTabs extends React.Component {
 
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isVertical isBox={isBox} aria-label="Tabs in the vertical example">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isVertical
+          isBox={isBox}
+          aria-label="Tabs in the vertical example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -689,7 +712,13 @@ class PageInsetsTabs extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} usePageInsets isBox={isBox} aria-label="Tabs in the page insets example">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          usePageInsets
+          isBox={isBox}
+          aria-label="Tabs in the page insets example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -753,7 +782,11 @@ class IconAndTextTabs extends React.Component {
 
   render() {
     return (
-      <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the icons and text example">
+      <Tabs
+        activeKey={this.state.activeTabKey}
+        onSelect={this.handleTabClick}
+        aria-label="Tabs in the icons and text example"
+      >
         <Tab
           eventKey={0}
           title={
@@ -876,9 +909,19 @@ class SecondaryTabs extends React.Component {
     const { activeTabKey1, activeTabKey2, isBox } = this.state;
     return (
       <div>
-        <Tabs activeKey={activeTabKey1} onSelect={this.handleTabClickFirst} isBox={isBox} aria-label="Tabs in the tabs with subtabs example">
+        <Tabs
+          activeKey={activeTabKey1}
+          onSelect={this.handleTabClickFirst}
+          isBox={isBox}
+          aria-label="Tabs in the tabs with subtabs example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
-            <Tabs aria-label="secondary tabs for users" activeKey={activeTabKey2} isSecondary onSelect={this.handleTabClickSecond}>
+            <Tabs
+              aria-label="secondary tabs for users"
+              activeKey={activeTabKey2}
+              isSecondary
+              onSelect={this.handleTabClickSecond}
+            >
               <Tab eventKey={20} title={<TabTitleText>Secondary tab item 1</TabTitleText>}>
                 Secondary tab item 1 item section
               </Tab>
@@ -983,7 +1026,13 @@ class FilledTabs extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs isFilled activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the filled example">
+        <Tabs
+          isFilled
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isBox={isBox}
+          aria-label="Tabs in the filled example"
+        >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -1044,7 +1093,13 @@ class FilledTabsWithIcons extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs isFilled activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the filled with icons example">
+        <Tabs
+          isFilled
+          activeKey={activeTabKey}
+          onSelect={this.handleTabClick}
+          isBox={isBox}
+          aria-label="Tabs in the filled with icons example"
+        >
           <Tab
             eventKey={0}
             title={
@@ -1270,7 +1325,11 @@ class SeparateTabContent extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the seperate content example">
+        <Tabs
+          activeKey={this.state.activeTabKey}
+          onSelect={this.handleTabClick}
+          aria-label="Tabs in the seperate content example"
+        >
           <Tab
             eventKey={0}
             title={<TabTitleText>Tab item 1</TabTitleText>}
@@ -1291,13 +1350,30 @@ class SeparateTabContent extends React.Component {
           />
         </Tabs>
         <div>
-          <TabContent eventKey={0} id="refTab1Section" ref={this.contentRef1} aria-label="This is content for the first tab">
+          <TabContent
+            eventKey={0}
+            id="refTab1Section"
+            ref={this.contentRef1}
+            aria-label="This is content for the first tab"
+          >
             Tab 1 section
           </TabContent>
-          <TabContent eventKey={1} id="refTab2Section" ref={this.contentRef2} aria-label="This is content for the second tab" hidden>
+          <TabContent
+            eventKey={1}
+            id="refTab2Section"
+            ref={this.contentRef2}
+            aria-label="This is content for the second tab"
+            hidden
+          >
             Tab 2 section
           </TabContent>
-          <TabContent eventKey={2} id="refTab3Section" ref={this.contentRef3} aria-label="This is content for the third tab" hidden>
+          <TabContent
+            eventKey={2}
+            id="refTab3Section"
+            ref={this.contentRef3}
+            aria-label="This is content for the third tab"
+            hidden
+          >
             Tab 3 section
           </TabContent>
         </div>
@@ -1351,10 +1427,22 @@ const TabContentWithBody = () => {
         <TabContent eventKey={0} id="refTab1Section" ref={contentRef1} aria-label="This is content for the first tab">
           <TabContentBody hasPadding> Tab 1 section </TabContentBody>
         </TabContent>
-        <TabContent eventKey={1} id="refTab2Section" ref={contentRef2} aria-label="This is content for the second tab" hidden>
+        <TabContent
+          eventKey={1}
+          id="refTab2Section"
+          ref={contentRef2}
+          aria-label="This is content for the second tab"
+          hidden
+        >
           <TabContentBody hasPadding> Tab 2 section </TabContentBody>
         </TabContent>
-        <TabContent eventKey={2} id="refTab3Section" ref={contentRef3} aria-label="This is content for the third tab" hidden>
+        <TabContent
+          eventKey={2}
+          id="refTab3Section"
+          ref={contentRef3}
+          aria-label="This is content for the third tab"
+          hidden
+        >
           <TabContentBody hasPadding> Tab 3 section </TabContentBody>
         </TabContent>
       </div>
@@ -1385,7 +1473,12 @@ class MountingSimpleTabs extends React.Component {
 
   render() {
     return (
-      <Tabs mountOnEnter activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the children mounting on click example">
+      <Tabs
+        mountOnEnter
+        activeKey={this.state.activeTabKey}
+        onSelect={this.handleTabClick}
+        aria-label="Tabs in the children mounting on click example"
+      >
         <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>}>
           Tab 1 section
         </Tab>
@@ -1423,7 +1516,12 @@ class UnmountingSimpleTabs extends React.Component {
 
   render() {
     return (
-      <Tabs unmountOnExit activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the unmounting invisible children example">
+      <Tabs
+        unmountOnExit
+        activeKey={this.state.activeTabKey}
+        onSelect={this.handleTabClick}
+        aria-label="Tabs in the unmounting invisible children example"
+      >
         <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>}>
           Tab 1 section
         </Tab>
@@ -1473,7 +1571,11 @@ class ToggledSeparateContent extends React.Component {
           {isTab2Hidden ? 'Show' : 'Hide'} tab 2
         </Button>
         <Divider style={{ paddingTop: '1rem', paddingBottom: '1rem' }} />
-        <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the toggled separate content example">
+        <Tabs
+          activeKey={this.state.activeTabKey}
+          onSelect={this.handleTabClick}
+          aria-label="Tabs in the toggled separate content example"
+        >
           <Tab eventKey={0} title="Tab item 1" tabContentId="refTab1Section" tabContentRef={this.contentRef1} />
           {!isTab2Hidden && (
             <Tab eventKey={1} title="Tab item 2" tabContentId="refTab2Section" tabContentRef={this.contentRef2} />
@@ -1481,15 +1583,32 @@ class ToggledSeparateContent extends React.Component {
           <Tab eventKey={2} title="Tab item 3" tabContentId="refTab3Section" tabContentRef={this.contentRef3} />
         </Tabs>
         <div>
-          <TabContent eventKey={0} id="refTab1Section" ref={this.contentRef1} aria-label="This is content for the first tab">
+          <TabContent
+            eventKey={0}
+            id="refTab1Section"
+            ref={this.contentRef1}
+            aria-label="This is content for the first tab"
+          >
             Tab 1 section
           </TabContent>
           {!isTab2Hidden && (
-            <TabContent eventKey={1} id="refTab2Section" ref={this.contentRef2} aria-label="This is content for the second tab" hidden>
+            <TabContent
+              eventKey={1}
+              id="refTab2Section"
+              ref={this.contentRef2}
+              aria-label="This is content for the second tab"
+              hidden
+            >
               Tab 2 section
             </TabContent>
           )}
-          <TabContent eventKey={2} id="refTab3Section" ref={this.contentRef3} aria-label="This is content for the third tab" hidden>
+          <TabContent
+            eventKey={2}
+            id="refTab3Section"
+            ref={this.contentRef3}
+            aria-label="This is content for the third tab"
+            hidden
+          >
             Tab 3 section
           </TabContent>
         </div>

package/src/components/Tooltip/Tooltip.tsx

@@ -35,6 +35,12 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
    * If you don't want that or prefer to add the aria attribute yourself on the trigger, set aria to 'none'.
    */
   aria?: 'describedby' | 'labelledby' | 'none';
+  /**
+   * Determines whether the tooltip is an aria-live region. If the reference prop is passed in the
+   * default behavior is 'polite' in order to ensure the tooltip contents is announced to
+   * assistive technologies. Otherwise the default behavior is 'off'.
+   */
+  'aria-live'?: 'off' | 'polite';
   /**
    * The reference element to which the Tooltip is relatively placed to.
    * If you cannot wrap the reference with the Tooltip, you can use the reference prop instead.
@@ -155,6 +161,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   children,
   animationDuration = 300,
   reference,
+  'aria-live': ariaLive = reference ? 'polite' : 'off',
   boundary,
   isAppLauncher,
   tippyProps,
@@ -251,6 +258,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const hasCustomMaxWidth = maxWidth !== tooltipMaxWidth.value;
   const content = (
     <div
+      aria-live={ariaLive}
       className={css(styles.tooltip, className)}
       role="tooltip"
       id={id}