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>
- <ArrowNext className={mfaFactorButtonStyles.icon} />
+ <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>}