feat: enable i18n support for back button in header component [UFO-13…

…00] (#2971) * feat: enable i18n support for back button in header component * chore: add changeset
contentful · Jan 10, 2025 · efc27b7 · efc27b7
1 parent e7c8f65
commit efc27b7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/.changeset/metal-teachers-repair.md b/.changeset/metal-teachers-repair.md
@@ -0,0 +1,5 @@
+---
+'@contentful/f36-header': patch
+---
+
+Enables a dynamic string for the aria-label on the BackButton in the Header Component.
diff --git a/packages/components/header/src/BackButton.tsx b/packages/components/header/src/BackButton.tsx
@@ -4,17 +4,23 @@ import { ArrowBackwardIcon } from '@contentful/f36-icons';
 
 export type BackButtonProps = Omit<
   Partial<IconButtonProps>,
-  'aria-label' | 'children' | 'icon' | 'variant' | 'size'
->;
+  'children' | 'icon' | 'variant' | 'size'
+> & {
+  'aria-label'?: string;
+};
 
 function _BackButton(
-  { onClick, ...otherProps }: BackButtonProps,
+  {
+    onClick,
+    'aria-label': ariaLabel = 'Go back',
+    ...otherProps
+  }: BackButtonProps,
   ref: Ref<HTMLButtonElement>,
 ) {
   return (
     <IconButton
       {...otherProps}
-      aria-label="Go back"
+      aria-label={ariaLabel}
       icon={<ArrowBackwardIcon variant="muted" />}
       onClick={onClick}
       size="small"

diff --git a/packages/components/header/stories/Header.stories.tsx b/packages/components/header/stories/Header.stories.tsx
@@ -22,7 +22,10 @@ export const Default: Story<HeaderProps> = ({
   <Box style={{ minWidth: '1000px' }}>
     <Header
       withBackButton={true}
-      backButtonProps={{ onClick: action('back button click') }}
+      backButtonProps={{
+        onClick: action('back button click'),
+        'aria-label': 'Custom go back aria-label',
+      }}
       breadcrumbs={[
         {
           content: 'Content Types',