@patternfly/react-core 4.211.2 → 4.211.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.211.2",
+  "version": "4.211.5",
   "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.2",
-    "@patternfly/react-styles": "^4.61.2",
-    "@patternfly/react-tokens": "^4.63.2",
+    "@patternfly/react-icons": "^4.62.5",
+    "@patternfly/react-styles": "^4.61.5",
+    "@patternfly/react-tokens": "^4.63.5",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.194.0",
+    "@patternfly/patternfly": "4.194.1",
     "@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": "3cad64565c88cc096f599c141a4512e3a75d18f5"
+  "gitHead": "21e6084e6b2057c8a26d6cc7bc804fa81e825545"
 }

package/src/components/Modal/Modal.tsx

@@ -31,6 +31,10 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   'aria-label'?: string;
   /** Id to use for Modal Box descriptor */
   'aria-describedby'?: string;
+  /** Accessible label applied to the modal box body. This should be used to communicate important information about the modal box body div if needed, such as that it is scrollable */
+  bodyAriaLabel?: string;
+  /** Accessible role applied to the modal box body. This will default to region if a body aria label is applied. Set to a more appropriate role as applicable based on the modal content and context */
+  bodyAriaRole?: string;
   /** Flag to show the close button in the header area of the modal */
   showClose?: boolean;
   /** Custom footer */
@@ -206,6 +210,8 @@ export class Modal extends React.Component<ModalProps, ModalState> {
       'aria-labelledby': ariaLabelledby,
       'aria-label': ariaLabel,
       'aria-describedby': ariaDescribedby,
+      bodyAriaLabel,
+      bodyAriaRole,
       title,
       titleIconVariant,
       titleLabel,
@@ -231,6 +237,8 @@ export class Modal extends React.Component<ModalProps, ModalState> {
         aria-label={ariaLabel}
         aria-describedby={ariaDescribedby}
         aria-labelledby={ariaLabelledby}
+        bodyAriaLabel={bodyAriaLabel}
+        bodyAriaRole={bodyAriaRole}
         ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
         ouiaSafe={ouiaSafe}
       />,

package/src/components/Modal/ModalContent.tsx

@@ -47,6 +47,10 @@ export interface ModalContentProps extends OUIAProps {
   'aria-label'?: string;
   /** Id of Modal Box description */
   'aria-describedby'?: string;
+  /** Accessible label applied to the modal box body. This should be used to communicate important information about the modal box body div if needed, such as that it is scrollable */
+  bodyAriaLabel?: string;
+  /** Accessible role applied to the modal box body. This will default to region if a body aria label is applied. Set to a more appropriate role as applicable based on the modal content and context */
+  bodyAriaRole?: string;
   /** Flag to show the close button in the header area of the modal */
   showClose?: boolean;
   /** Default width of the content. */
@@ -82,6 +86,8 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   'aria-label': ariaLabel = '',
   'aria-describedby': ariaDescribedby,
   'aria-labelledby': ariaLabelledby,
+  bodyAriaLabel,
+  bodyAriaRole,
   showClose = true,
   footer = null,
   actions = [],
@@ -120,10 +126,17 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     actions.length > 0 && <ModalBoxFooter>{actions}</ModalBoxFooter>
   );
 
+  const defaultModalBodyAriaRole = bodyAriaLabel ? 'region' : undefined;
+
   const modalBody = hasNoBodyWrapper ? (
     children
   ) : (
-    <ModalBoxBody {...props} {...(!description && !ariaDescribedby && { id: descriptorId })}>
+    <ModalBoxBody
+      aria-label={bodyAriaLabel}
+      role={bodyAriaRole || defaultModalBodyAriaRole}
+      {...props}
+      {...(!description && !ariaDescribedby && { id: descriptorId })}
+    >
       {children}
     </ModalBoxBody>
   );

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

@@ -85,4 +85,60 @@ describe('Modal', () => {
 
     expect(consoleErrorMock).toHaveBeenCalled();
   });
+
+  test('The modalBoxBody has no aria-label when bodyAriaLabel is not passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(<Modal {...props}>This is a ModalBox</Modal>);
+
+    const modalBoxBody = screen.getByText('This is a ModalBox');
+    expect(modalBoxBody).not.toHaveAccessibleName('modal box body aria label');
+  });
+
+  test('The modalBoxBody has the expected aria-label when bodyAriaLabel is passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <Modal bodyAriaLabel="modal box body aria label" {...props}>
+        This is a ModalBox
+      </Modal>
+    );
+
+    const modalBoxBody = screen.getByText('This is a ModalBox');
+    expect(modalBoxBody).toHaveAccessibleName('modal box body aria label');
+  });
+
+  test('The modalBoxBody has the expected aria role when bodyAriaLabel is passed and bodyAriaRole is not', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <Modal bodyAriaLabel="modal box body aria label" {...props}>
+        This is a ModalBox
+      </Modal>
+    );
+
+    const modalBoxBody = screen.getByRole('region', { name: 'modal box body aria label' });
+    expect(modalBoxBody).toBeInTheDocument();
+  });
+
+  test('The modalBoxBody has the expected aria role when bodyAriaRole is passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <Modal bodyAriaLabel="modal box body aria label" bodyAriaRole="article" {...props}>
+        This is a ModalBox
+      </Modal>
+    );
+
+    const modalBoxBody = screen.getByRole('article', { name: 'modal box body aria label' });
+    expect(modalBoxBody).toBeInTheDocument();
+  });
 });

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

@@ -869,3 +869,10 @@ class HelpModal extends React.Component {
 ```ts file="ModalWithForm.tsx"
 
 ```
+
+### With overflowing content
+
+If the content that you're passing to the modal is likely to overflow the modal content area, pass tabIndex={0} to the modal to enable keyboard accessible scrolling.
+
+```ts file="ModalWithOverflowingContent.tsx"
+```

package/src/components/Modal/examples/ModalWithOverflowingContent.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+
+export const ModalWithOverflowingContent: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(prevIsModalOpen => !prevIsModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show modal
+      </Button>
+      <Modal
+        bodyAriaLabel="Scrollable modal content"
+        tabIndex={0}
+        variant={ModalVariant.small}
+        title="Modal with overflowing content"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae tempus.
+        Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat maecenas
+        volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi tristique
+        senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum consectetur
+        libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras sed felis eget
+        velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus ultricies tristique
+        nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Lacinia quis
+        vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget aliquet.
+        <br />
+        <br />
+        Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio
+        morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae. Quis
+        varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus. Sollicitudin
+        tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim sit amet
+        venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar elementum
+        integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis enim ut tellus
+        elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed enim. Non diam
+        phasellus vestibulum lorem sed risus ultricies tristique nulla.
+        <br />
+        <br />
+        Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed
+        nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras
+        fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices
+        sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.
+        Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.
+        <br />
+        <br />
+        Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim
+        lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna
+        etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae
+        proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi morbi
+        tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at varius vel
+        pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique magna sit amet
+        purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum morbi. Mauris a diam
+        maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.
+      </Modal>
+    </React.Fragment>
+  );
+};

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}