chore: add a11y region for title of page

Shopify · Nov 7, 2023 · e854106 · e854106
1 parent 636d133
commit e854106
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/polaris-react/locales/en.json b/polaris-react/locales/en.json
@@ -242,7 +242,8 @@
     },
     "Page": {
       "Header": {
-        "rollupActionsLabel": "View actions for {title}"
+        "rollupActionsLabel": "View actions for {title}",
+        "pageReadyAccessibilityLabel": "{title}. This page is ready"
       }
     },
     "Pagination": {

diff --git a/polaris-react/src/components/Page/components/Header/Header.tsx b/polaris-react/src/components/Page/components/Header/Header.tsx
@@ -128,6 +128,14 @@ export function Header({
     </div>
   );
 
+  const pageReadyAccessibilityLabelMarkup = title ? (
+    <div role="status">
+      <Text visuallyHidden as="p">
+        {i18n.translate('pageReadyAccessibilityLabel', {title})}
+      </Text>
+    </div>
+  ) : undefined;
+
   const primaryActionMarkup = primaryAction ? (
     <PrimaryActionMarkup primaryAction={primaryAction} />
   ) : null;
@@ -208,6 +216,7 @@ export function Header({
       paddingInlineEnd={{xs: '400', sm: '0'}}
       visuallyHidden={titleHidden}
     >
+      {pageReadyAccessibilityLabelMarkup}
       <div className={headerClassNames}>
         <FilterActionsProvider filterActions={Boolean(filterActions)}>
           <ConditionalRender