Merge branch 'main' into main

Author: tonyganchev

src/app-layout/__tests__/runtime-feature-notifications.test.tsx

@@ -520,6 +520,38 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
     });
   });
 
+  test('renders labels from i18nStrings payload prop', () => {
+    const i18nStringsPayload: FeatureNotificationsPayload<string>['i18nStrings'] = {
+      titleText: 'Payload title',
+      viewAllText: 'Payload view all',
+      closeButtonAriaLabel: 'Payload close',
+      contentAriaLabel: 'Payload content',
+      triggerButtonAriaLabel: 'Payload trigger',
+      resizeHandleAriaLabel: 'Payload resize',
+    };
+    featureNotifications.registerFeatureNotifications({
+      ...featureNotificationsDefaults,
+      i18nStrings: i18nStringsPayload,
+    });
+    const { wrapper } = renderComponent(<AppLayout />);
+
+    expect(wrapper.findDrawerTriggerById(featureNotificationsDefaults.id)!.getElement()).toHaveAttribute(
+      'aria-label',
+      'Payload trigger'
+    );
+    wrapper.findDrawerTriggerById(featureNotificationsDefaults.id)!.click();
+
+    const activeDrawerWrapper = wrapper.findActiveDrawer()!;
+
+    expect(activeDrawerWrapper.getElement()).toHaveAttribute('aria-label', 'Payload content');
+    expect(activeDrawerWrapper.getElement()).toHaveTextContent('Payload title');
+    expect(activeDrawerWrapper.getElement()).toHaveTextContent('Payload view all');
+    expect(wrapper.findActiveDrawerCloseButton()!.getElement()).toHaveAttribute('aria-label', 'Payload close');
+    if (size === 'desktop') {
+      expect(wrapper.findActiveDrawerResizeHandle()!.getElement()).toHaveAttribute('aria-label', 'Payload resize');
+    }
+  });
+
   test('renders feature notifications drawer alongside tools', () => {
     featureNotifications.registerFeatureNotifications(featureNotificationsDefaults);
     const { wrapper } = renderComponent(

src/app-layout/visual-refresh-toolbar/drawer/feature-notifications-drawer-content.tsx

@@ -5,7 +5,7 @@ import React, { useEffect, useRef } from 'react';
 import Box from '../../../box/internal';
 import { InternalDrawer } from '../../../drawer/internal';
 import { useInternalI18n } from '../../../i18n/context';
-import { Feature, MountContentPart } from '../../../internal/plugins/widget/interfaces';
+import { Feature, FeatureNotificationsPayload, MountContentPart } from '../../../internal/plugins/widget/interfaces';
 import { formatDate } from '../../../internal/utils/date-time';
 import Link from '../../../link/internal';
 import List from '../../../list/internal';
@@ -42,15 +42,17 @@ export default function RuntimeFeaturesNotificationDrawer<T>({
   features,
   mountItem,
   featuresPageLink,
+  i18nStrings,
 }: {
   features: Array<Feature<T>>;
   mountItem?: MountContentPart<T>;
   featuresPageLink?: string;
+  i18nStrings?: FeatureNotificationsPayload<unknown>['i18nStrings'];
 }) {
   const i18n = useInternalI18n('features-notification-drawer');
 
   return (
-    <InternalDrawer header={i18n('i18nStrings.title', undefined)} disableContentPaddings={true}>
+    <InternalDrawer header={i18n('i18nStrings.title', i18nStrings?.titleText)} disableContentPaddings={true}>
       <div className={styles['runtime-feature-notifications-drawer-content']}>
         <Box padding={{ top: 'm', left: 'xl', right: 'xl', bottom: 'm' }}>
           <List
@@ -83,7 +85,7 @@ export default function RuntimeFeaturesNotificationDrawer<T>({
           {!!featuresPageLink && (
             <footer className={styles['runtime-feature-notifications-footer']}>
               <Box padding={{ top: 's' }}>
-                <Link href={featuresPageLink}>{i18n('i18nStrings.viewAll', undefined)}</Link>
+                <Link href={featuresPageLink}>{i18n('i18nStrings.viewAll', i18nStrings?.viewAllText)}</Link>
               </Box>
             </footer>
           )}

src/app-layout/visual-refresh-toolbar/state/use-feature-notifications.tsx

@@ -90,6 +90,7 @@ export function useFeatureNotifications() {
           features={payload.features}
           featuresPageLink={payload.featuresPageLink}
           mountItem={payload.mountItem}
+          i18nStrings={payload.i18nStrings}
         />
       ),
       trigger: {
@@ -102,10 +103,10 @@ export function useFeatureNotifications() {
         ),
       },
       ariaLabels: {
-        closeButton: i18n('ariaLabels.closeButton', undefined),
-        drawerName: i18n('ariaLabels.content', undefined) ?? '',
-        triggerButton: i18n('ariaLabels.triggerButton', undefined),
-        resizeHandle: i18n('ariaLabels.resizeHandle', undefined),
+        closeButton: i18n('ariaLabels.closeButton', payload.i18nStrings?.closeButtonAriaLabel),
+        drawerName: i18n('ariaLabels.content', payload.i18nStrings?.contentAriaLabel) ?? '',
+        triggerButton: i18n('ariaLabels.triggerButton', payload.i18nStrings?.triggerButtonAriaLabel),
+        resizeHandle: i18n('ariaLabels.resizeHandle', payload.i18nStrings?.resizeHandleAriaLabel),
       },
       resizable: true,
       defaultSize: 320,

src/internal/plugins/widget/interfaces.ts

@@ -174,6 +174,15 @@ export interface FeatureNotificationsPayload<T> {
    * Should return a dictionary mapping feature IDs to their release date strings.
    */
   __retrieveFeatureNotifications?: RetrieveFeatureNotifications;
+
+  i18nStrings?: {
+    titleText?: string;
+    viewAllText?: string;
+    closeButtonAriaLabel?: string;
+    contentAriaLabel?: string;
+    triggerButtonAriaLabel?: string;
+    resizeHandleAriaLabel?: string;
+  };
 }
 
 export type FeatureNotificationsPayloadPublic<T> = Omit<