fix: Add LiveRegion to non-dismissible Popover (#3692)

Co-authored-by: Johannes Weber <[email protected]>

Author: johannes-weber

src/popover/__tests__/popover.test.tsx

@@ -279,9 +279,12 @@ describe('ARIA labels', () => {
   });
 
   it('uses aria-live if dismissButton is false', () => {
-    const wrapper = renderPopover({ children: 'Trigger', content: 'Popover', dismissButton: false });
+    const wrapper = renderPopover({ children: 'Trigger', content: 'Popover content', dismissButton: false });
     wrapper.findTrigger().click();
-    expect(wrapper.find('[aria-live="polite"]')).toBeTruthy();
+
+    const liveRegion = createWrapper().findLiveRegion()!;
+    expect(liveRegion).toBeDefined();
+    expect(liveRegion.getElement()).toHaveTextContent('Popover content');
   });
 
   it('does not pass the dismissAriaLabel to the dismiss button if not defined', () => {
@@ -308,15 +311,39 @@ describe('ARIA labels', () => {
     expect(wrapper.findBody()!.getElement()).not.toHaveAttribute('role', 'dialog');
   });
 
-  it('accessibility validation basic popover', async () => {
-    const wrapper = renderPopover({
-      children: 'Trigger',
-      content: 'Popover',
-      dismissButton: false,
-      renderWithPortal: true,
+  describe('live region', () => {
+    it('do not render live region when closed', () => {
+      renderPopover({
+        children: 'Trigger',
+        content: 'Popover',
+        dismissButton: false,
+        renderWithPortal: true,
+      });
+      expect(createWrapper().findLiveRegion()).toBeNull();
+    });
+
+    it('render live region when opened and dismissButton = false', () => {
+      const wrapper = renderPopover({
+        children: 'Trigger',
+        content: 'Popover',
+        dismissButton: false,
+        renderWithPortal: true,
+      });
+      wrapper.findTrigger().click();
+      const liveRegion = createWrapper().findLiveRegion()!.getElement()!;
+      expect(liveRegion).toHaveTextContent('Popover');
+    });
+
+    it('do not render live region when opened and dismissButton = true', () => {
+      const wrapper = renderPopover({
+        children: 'Trigger',
+        content: 'Popover',
+        dismissButton: true,
+        renderWithPortal: true,
+      });
+      wrapper.findTrigger().click();
+      expect(createWrapper().findLiveRegion()).toBeNull();
     });
-    wrapper.findTrigger().click();
-    await expect(document.body).toValidateA11y();
   });
 
   it('accessibility validation for popover with dismiss button and header', async () => {

src/popover/conditional-live-region.tsx

@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { ReactNode } from 'react';
+
+import InternalLiveRegion from '../live-region/internal';
+
+interface ConditionalLiveRegionProps {
+  condition: boolean;
+  children: ReactNode;
+}
+
+const ConditionalLiveRegion = ({ condition, children }: ConditionalLiveRegionProps) => {
+  if (condition) {
+    return <InternalLiveRegion>{children}</InternalLiveRegion>;
+  }
+  return <>{children}</>;
+};
+
+export default ConditionalLiveRegion;

src/popover/internal.tsx

@@ -17,6 +17,7 @@ import { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes'
 import { KeyCode } from '../internal/keycode';
 import Arrow from './arrow';
 import PopoverBody from './body';
+import ConditionalLiveRegion from './conditional-live-region';
 import PopoverContainer from './container';
 import { PopoverProps } from './interfaces';
 
@@ -144,8 +145,6 @@ function InternalPopover(
 
   const popoverContent = (
     <div
-      aria-live={dismissButton ? undefined : 'polite'}
-      aria-atomic={dismissButton ? undefined : true}
       className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}
       data-awsui-referrer-id={referrerId}
     >
@@ -167,7 +166,7 @@ function InternalPopover(
             overflowVisible="both"
             closeAnalyticsAction={__closeAnalyticsAction}
           >
-            {content}
+            <ConditionalLiveRegion condition={!dismissButton}>{content}</ConditionalLiveRegion>
           </PopoverBody>
         </LinkDefaultVariantContext.Provider>
       </PopoverContainer>