fix(experience-legacy): flip arrow icons on rtl (#6584)

packages/experience-legacy/src/components/Button/MfaFactorButton.tsx

@@ -8,6 +8,7 @@ import FactorTotp from '@/assets/icons/factor-totp.svg?react';
 import FactorWebAuthn from '@/assets/icons/factor-webauthn.svg?react';
 
 import DynamicT from '../DynamicT';
+import FlipOnRtl from '../FlipOnRtl';
 
 import mfaFactorButtonStyles from './MfaFactorButton.module.scss';
 import styles from './index.module.scss';
@@ -65,7 +66,9 @@ const MfaFactorButton = ({ factor, isBinding, onClick }: Props) => {
           <DynamicT forKey={(isBinding ? linkFactorDescription : factorDescription)[factor]} />
         </div>
       </div>
+      <FlipOnRtl>
         <ArrowNext className={mfaFactorButtonStyles.icon} />
+      </FlipOnRtl>
     </button>
   );
 };

packages/experience-legacy/src/components/FlipOnRtl/index.module.scss

@@ -0,0 +1,3 @@
+.flip {
+  transform: scaleX(-1);
+}

packages/experience-legacy/src/components/FlipOnRtl/index.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { cloneElement, isValidElement, type ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './index.module.scss';
+
+type Props = {
+  readonly children: ReactElement<HTMLElement>;
+};
+
+/**
+ * This component flips its child element horizontally if the browser's text direction is RTL (right-to-left).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FlipOnRtl>
+ *   <SVG />
+ * </FlipOnRtl>
+ * ```
+ *
+ * @param {React.ReactNode} children - The SVG or other HTML content to render and flip if RTL.
+ * @returns {JSX.Element} The flipped content.
+ */
+function FlipOnRtl({ children }: Props) {
+  const { i18n } = useTranslation();
+  const isRtl = i18n.dir() === 'rtl';
+
+  if (!isValidElement(children)) {
+    return children;
+  }
+
+  return cloneElement(children, {
+    className: classNames(children.props.className, isRtl && styles.flip),
+  });
+}
+
+export default FlipOnRtl;

packages/experience-legacy/src/components/NavBar/index.tsx

@@ -7,6 +7,8 @@ import ArrowPrev from '@/assets/icons/arrow-prev.svg?react';
 import NavClose from '@/assets/icons/nav-close.svg?react';
 import { onKeyDownHandler } from '@/utils/a11y';
 
+import FlipOnRtl from '../FlipOnRtl';
+
 import styles from './index.module.scss';
 
 type Props = {
@@ -48,7 +50,13 @@ const NavBar = ({ title, type = 'back', isHidden, onClose, onSkip }: Props) => {
         onKeyDown={onKeyDownHandler(clickHandler)}
         onClick={clickHandler}
       >
-        {isClosable ? <NavClose /> : <ArrowPrev />}
+        {isClosable ? (
+          <NavClose />
+        ) : (
+          <FlipOnRtl>
+            <ArrowPrev />
+          </FlipOnRtl>
+        )}
         {!isClosable && <span>{t('action.nav_back')}</span>}
       </div>
       {title && <div className={styles.title}>{title}</div>}