chore: add override prop

Shopify · Nov 22, 2023 · 9283526 · 9283526
1 parent 4e788eb
commit 9283526
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 9 deletions.
diff --git a/polaris-react/src/components/Page/components/Header/Header.tsx b/polaris-react/src/components/Page/components/Header/Header.tsx
@@ -49,6 +49,8 @@ interface PrimaryAction
 export interface HeaderProps extends TitleProps {
   /** Visually hide the title */
   titleHidden?: boolean;
+  /** A label to use for the page when the page is ready, used by screen readers. Will override the title prop if present */
+  pageReadyAccessibilityLabel?: string;
   /** Enables filtering action list items */
   filterActions?: boolean;
   /** Primary page-level action */
@@ -74,6 +76,7 @@ const LONG_TITLE = 34;
 export function Header({
   title,
   subtitle,
+  pageReadyAccessibilityLabel,
   titleMetadata,
   additionalMetadata,
   titleHidden = false,
@@ -128,15 +131,19 @@ export function Header({
     </div>
   );
 
-  const pageReadyAccessibilityLabelMarkup = title ? (
-    <div role="status">
-      <Text visuallyHidden as="p">
-        {i18n.translate('Polaris.Page.Header.pageReadyAccessibilityLabel', {
-          title,
-        })}
-      </Text>
-    </div>
-  ) : undefined;
+  const labelForPageReadyAccessibilityLabel =
+    pageReadyAccessibilityLabel || title;
+
+  const pageReadyAccessibilityLabelMarkup =
+    labelForPageReadyAccessibilityLabel ? (
+      <div role="status">
+        <Text visuallyHidden as="p">
+          {i18n.translate('Polaris.Page.Header.pageReadyAccessibilityLabel', {
+            title: labelForPageReadyAccessibilityLabel,
+          })}
+        </Text>
+      </div>
+    ) : undefined;
 
   const primaryActionMarkup = primaryAction ? (
     <PrimaryActionMarkup primaryAction={primaryAction} />

diff --git a/polaris-react/src/components/Page/components/Header/tests/Header.test.tsx b/polaris-react/src/components/Page/components/Header/tests/Header.test.tsx
@@ -9,6 +9,7 @@ import {Button} from '../../../../Button';
 import {ButtonGroup} from '../../../../ButtonGroup';
 import {Pagination} from '../../../../Pagination';
 import {Tooltip} from '../../../../Tooltip';
+import {Text} from '../../../../Text';
 import type {LinkAction, MenuActionDescriptor} from '../../../../../types';
 import {Header} from '../Header';
 import type {HeaderProps} from '../Header';
@@ -45,6 +46,30 @@ describe('<Header />', () => {
         titleMetadata: mockProps.titleMetadata,
       });
     });
+
+    it('renders an aria-live region with the title', () => {
+      const header = mountWithApp(<Header {...mockProps} />);
+      const liveRegion = header.find('div', {role: 'status'});
+      expect(liveRegion).toContainReactComponent(Text, {
+        visuallyHidden: true,
+        children: `${mockProps.title}. This page is ready`,
+      });
+    });
+
+    it('renders an aria-live region with the pageReadyAccessibilityLabel which overrides the title', () => {
+      const pageReadyAccessibilityLabel = 'page ready';
+      const header = mountWithApp(
+        <Header
+          {...mockProps}
+          pageReadyAccessibilityLabel={pageReadyAccessibilityLabel}
+        />,
+      );
+      const liveRegion = header.find('div', {role: 'status'});
+      expect(liveRegion).toContainReactComponent(Text, {
+        visuallyHidden: true,
+        children: `${pageReadyAccessibilityLabel}. This page is ready`,
+      });
+    });
   });
 
   describe('breadcrumbs', () => {