Implement share and export components

app/components/modals/ModalHeader/ModalHeader.types.ts

@@ -3,5 +3,9 @@ export interface ModalHeaderProps {
   onMoreOptions?: () => void;
   showCloseButton?: boolean;
   showMoreOptionsButton?: boolean;
+  /** When set, used for the close control’s accessible name (e.g. localized). */
+  closeButtonAriaLabel?: string;
+  /** When set, used for the more-options control’s accessible name (e.g. localized). */
+  moreOptionsAriaLabel?: string;
   className?: string;
 }

app/components/modals/ModalHeader/ModalHeader.view.tsx

@@ -9,6 +9,8 @@ export function ModalHeaderView({
   onMoreOptions,
   showCloseButton = true,
   showMoreOptionsButton = true,
+  closeButtonAriaLabel = "Close dialog",
+  moreOptionsAriaLabel = "More options",
   className = "",
 }: ModalHeaderProps) {
   return (
@@ -21,7 +23,7 @@ export function ModalHeaderView({
           type="button"
           onClick={onClose}
           className={`${iconButtonClass} left-[24px] top-[12px]`}
-          aria-label="Close dialog"
+          aria-label={closeButtonAriaLabel}
         >
           {/* eslint-disable-next-line @next/next/no-img-element -- icon asset */}
           <img
@@ -41,7 +43,7 @@ export function ModalHeaderView({
           type="button"
           onClick={onMoreOptions}
           className={`${iconButtonClass} right-[24px] top-[12px]`}
-          aria-label="More options"
+          aria-label={moreOptionsAriaLabel}
         >
           <svg
             width="16"