feat(client): add rtl direction attribute to html element (#48245)

* feat(client): add rtl direction attribute to html element

* WIP: add LangDirection as base for direction attribute selection

* DRY rtlLanguages for easier future usage

Co-authored-by: Mrugesh Mohapatra <hi@mrugesh.dev>

* Remove urdu, to avoid unknown bugs

* Fix merge conflict, by clearing import values

Co-authored-by: Mrugesh Mohapatra <hi@mrugesh.dev>

client/src/html.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { clientLocale } from '../../config/env.json';
+import { rtlLangs } from '../../config/i18n';
 
 interface HTMLProps {
   body: string;
@@ -17,8 +19,16 @@ export default function HTML({
   postBodyComponents,
   preBodyComponents
 }: HTMLProps): JSX.Element {
+  const rtlDirectionAttribute = { dir: 'rtl' };
+  const isRtlLanguage: boolean = rtlLangs.includes(clientLocale);
+
   return (
-    <html id='__fcc-html' {...htmlAttributes} lang='en'>
+    <html
+      id='__fcc-html'
+      {...(isRtlLanguage && rtlDirectionAttribute)}
+      {...htmlAttributes}
+      lang='en'
+    >
       <head>
         <meta charSet='utf-8' />
         <meta content='ie=edge' httpEquiv='x-ua-compatible' />

config/i18n.ts

@@ -185,8 +185,9 @@ export const i18nextCodes = {
   arabic: 'ar'
 };
 
-// These are for the language selector dropdown menu in the footer
 /* eslint-disable @typescript-eslint/naming-convention */
+
+// These are for the language selector dropdown menu in the footer
 export enum LangNames {
   english = 'English',
   espanol = 'Español',
@@ -223,7 +224,12 @@ export enum LangCodes {
  */
 export const hiddenLangs = ['arabic'];
 
-// locale is sourced from a JSON file, so we use getLangCode and getLangName to
+/**
+ * This array contains languages that use the RTL layouts.
+ */
+export const rtlLangs = ['arabic'];
+
+// locale is sourced from a JSON file, so we use getLangCode to
 // find the associated enum values
 
 export function getLangCode(locale: PropertyKey) {
@@ -231,11 +237,6 @@ export function getLangCode(locale: PropertyKey) {
   throw new Error(`${String(locale)} is not a valid locale`);
 }
 
-export function getLangName(locale: PropertyKey) {
-  if (isPropertyOf(LangNames, locale)) return LangNames[locale];
-  throw new Error(`${String(locale)} is not a valid locale`);
-}
-
 function isPropertyOf<O>(
   obj: Record<string, string>,
   key: PropertyKey