From 53c695b0fc7656aca527006a5fb5173b757ee276 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 12:16:29 +0000
Subject: [PATCH 1/2] lang, spellcheck and dir on text inputs seem to have been
 lost after migration #4506
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added a new `LocaleContext` (`LocaleProvider` + `useLocale`) in form2/ so
consumer apps can pass the active content language to the React input layer.
TextLineInput and TextAreaInput now read the locale and apply `lang`,
`dir="rtl"` for RTL languages, and `spellcheck="true"` on the rendered
`<input>` / `<textarea>` — restoring parity with the legacy `TextInputType`
auto-wiring.

Reused `Locale.extractLanguage` and `Locale.supportsRtl` for the RTL detection.
Added a shared `getLangAttributes` helper in `form2/utils/` with unit tests.
Added Storybook stories demonstrating Norwegian (`lang`) and Arabic (RTL).
---
 .../admin/common/js/form2/LocaleContext.tsx   | 19 ++++++++++
 .../text-area-input/TextAreaInput.stories.tsx | 35 +++++++++++++++++
 .../text-area-input/TextAreaInput.tsx         |  6 ++-
 .../text-line-input/TextLineInput.stories.tsx | 32 ++++++++++++++++
 .../text-line-input/TextLineInput.test.ts     |  3 ++
 .../text-line-input/TextLineInput.tsx         |  6 ++-
 .../assets/admin/common/js/form2/index.ts     |  1 +
 .../js/form2/utils/getLangAttributes.test.ts  | 38 +++++++++++++++++++
 .../js/form2/utils/getLangAttributes.ts       | 22 +++++++++++
 .../admin/common/js/form2/utils/index.ts      |  1 +
 10 files changed, 161 insertions(+), 2 deletions(-)
 create mode 100644 src/main/resources/assets/admin/common/js/form2/LocaleContext.tsx
 create mode 100644 src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.test.ts
 create mode 100644 src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.ts

diff --git a/src/main/resources/assets/admin/common/js/form2/LocaleContext.tsx b/src/main/resources/assets/admin/common/js/form2/LocaleContext.tsx
new file mode 100644
index 000000000..947114e2f
--- /dev/null
+++ b/src/main/resources/assets/admin/common/js/form2/LocaleContext.tsx
@@ -0,0 +1,19 @@
+import type {ReactNode} from 'react';
+import {createContext, useContext} from 'react';
+
+const LocaleContext = createContext<string | undefined>(undefined);
+
+export type LocaleProviderProps = {
+    locale: string | undefined;
+    children?: ReactNode;
+};
+
+const LOCALE_PROVIDER_NAME = 'LocaleProvider';
+
+export const LocaleProvider = ({locale, children}: LocaleProviderProps): ReactNode => {
+    return <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>;
+};
+
+LocaleProvider.displayName = LOCALE_PROVIDER_NAME;
+
+export const useLocale = (): string | undefined => useContext(LocaleContext);
diff --git a/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.stories.tsx b/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.stories.tsx
index dff927e6b..fab7cb912 100644
--- a/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.stories.tsx
+++ b/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.stories.tsx
@@ -9,6 +9,7 @@ import {OccurrencesBuilder} from '../../../form/Occurrences';
 import type {TextAreaConfig} from '../../descriptor';
 import {FieldRegistry, generateProcessingToken, type ProcessingToken} from '../../FieldRegistry';
 import {FieldRegistryProvider} from '../../FieldRegistryContext';
+import {LocaleProvider} from '../../LocaleContext';
 import type {InputTypeComponentProps} from '../../types';
 import {TextAreaInput, type TextAreaInputProps} from './TextAreaInput';
 
@@ -193,6 +194,40 @@ export const Highlight: Story = {
     render: () => <HighlightDemo />,
 };
 
+export const WithLocale: Story = {
+    name: 'Features / Locale (lang)',
+    render: () => (
+        <LocaleProvider locale='nb-NO'>
+            <div className='flex flex-col gap-y-3 p-4'>
+                <div className='max-w-120 text-sm text-subtle'>
+                    Wrapped in <code>LocaleProvider locale="nb-NO"</code>. The rendered textarea gets{' '}
+                    <code>lang="nb"</code> and <code>spellcheck="true"</code> so the browser uses the Norwegian
+                    dictionary.
+                </div>
+                <TextAreaInput
+                    {...defaultArgs}
+                    value={ValueTypes.STRING.newValue('Hei verden!\nDette er et tekstområde.')}
+                />
+            </div>
+        </LocaleProvider>
+    ),
+};
+
+export const WithRtlLocale: Story = {
+    name: 'Features / Locale (RTL)',
+    render: () => (
+        <LocaleProvider locale='ar-SA'>
+            <div className='flex flex-col gap-y-3 p-4'>
+                <div className='max-w-120 text-sm text-subtle'>
+                    Wrapped in <code>LocaleProvider locale="ar-SA"</code>. The textarea renders right-to-left with{' '}
+                    <code>lang="ar" dir="rtl"</code>.
+                </div>
+                <TextAreaInput {...defaultArgs} value={ValueTypes.STRING.newValue('مرحبا بالعالم\nهذه منطقة نصية.')} />
+            </div>
+        </LocaleProvider>
+    ),
+};
+
 const STORY_PATH = '.story.field';
 const OCCURRENCE_ID = 'occurrence-0';
 
diff --git a/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.tsx b/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.tsx
index cfbda0da8..8cfbdb811 100644
--- a/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.tsx
+++ b/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.tsx
@@ -4,8 +4,9 @@ import {useEffect, useRef} from 'react';
 
 import {ValueTypes} from '../../../data/ValueTypes';
 import type {TextAreaConfig} from '../../descriptor';
+import {useLocale} from '../../LocaleContext';
 import type {InputTypeComponentProps} from '../../types';
-import {getFirstError, getInputAccessibleName} from '../../utils';
+import {getFirstError, getInputAccessibleName, getLangAttributes} from '../../utils';
 import {Counter} from '../counter';
 
 export type TextAreaInputProps = InputTypeComponentProps<TextAreaConfig>;
@@ -31,6 +32,8 @@ export const TextAreaInput = ({
     // ? Scroll is owned by the parent InputField (gated on RevealOptions.scroll);
     // the inner blink should highlight only, never scroll again.
     const isBlinking = useBlinkAttention(textAreaRef, highlight, {scrollIntoView: false});
+    const locale = useLocale();
+    const langAttrs = getLangAttributes(locale);
 
     useEffect(() => {
         if (externalInputRef == null) return undefined;
@@ -63,6 +66,7 @@ export const TextAreaInput = ({
     return (
         <TextArea
             ref={textAreaRef}
+            {...langAttrs}
             aria-label={getInputAccessibleName(input, index)}
             autoSize
             value={stringValue}
diff --git a/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.stories.tsx b/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.stories.tsx
index dd2301c96..60ac8044c 100644
--- a/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.stories.tsx
+++ b/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.stories.tsx
@@ -9,6 +9,7 @@ import {OccurrencesBuilder} from '../../../form/Occurrences';
 import type {TextLineConfig} from '../../descriptor';
 import {FieldRegistry, generateProcessingToken, type ProcessingToken} from '../../FieldRegistry';
 import {FieldRegistryProvider} from '../../FieldRegistryContext';
+import {LocaleProvider} from '../../LocaleContext';
 import type {InputTypeComponentProps} from '../../types';
 import {TextLineInput, type TextLineInputProps} from './TextLineInput';
 
@@ -186,6 +187,37 @@ export const Highlight: Story = {
     render: () => <HighlightDemo />,
 };
 
+export const WithLocale: Story = {
+    name: 'Features / Locale (lang)',
+    render: () => (
+        <LocaleProvider locale='nb-NO'>
+            <div className='flex flex-col gap-y-3 p-4'>
+                <div className='max-w-120 text-sm text-subtle'>
+                    Wrapped in <code>LocaleProvider locale="nb-NO"</code>. The rendered input gets{' '}
+                    <code>lang="nb"</code> and <code>spellcheck="true"</code> so the browser uses the Norwegian
+                    dictionary.
+                </div>
+                <TextLineInput {...defaultArgs} value={ValueTypes.STRING.newValue('Hei verden')} />
+            </div>
+        </LocaleProvider>
+    ),
+};
+
+export const WithRtlLocale: Story = {
+    name: 'Features / Locale (RTL)',
+    render: () => (
+        <LocaleProvider locale='ar-SA'>
+            <div className='flex flex-col gap-y-3 p-4'>
+                <div className='max-w-120 text-sm text-subtle'>
+                    Wrapped in <code>LocaleProvider locale="ar-SA"</code>. The input is rendered right-to-left with{' '}
+                    <code>lang="ar" dir="rtl"</code>.
+                </div>
+                <TextLineInput {...defaultArgs} value={ValueTypes.STRING.newValue('مرحبا بالعالم')} />
+            </div>
+        </LocaleProvider>
+    ),
+};
+
 const STORY_PATH = '.story.field';
 const OCCURRENCE_ID = 'occurrence-0';
 
diff --git a/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.test.ts b/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.test.ts
index 0cf8ed905..aaab1b54a 100644
--- a/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.test.ts
+++ b/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.test.ts
@@ -16,6 +16,7 @@ const mocks = vi.hoisted(() => ({
     ]),
     useEffect: vi.fn(),
     useRef: vi.fn((initial: unknown) => ({current: initial})),
+    useContext: vi.fn(() => undefined),
     input: vi.fn(() => null),
 }));
 
@@ -27,6 +28,7 @@ vi.mock('react', async importOriginal => {
         useState: mocks.useState,
         useEffect: mocks.useEffect,
         useRef: mocks.useRef,
+        useContext: mocks.useContext,
     };
 });
 
@@ -97,6 +99,7 @@ describe('TextLineInput', () => {
         ]);
         mocks.useEffect.mockImplementation(() => undefined);
         mocks.useRef.mockImplementation((initial: unknown) => ({current: initial}));
+        mocks.useContext.mockImplementation(() => undefined);
     });
 
     describe('value transformation', () => {
diff --git a/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.tsx b/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.tsx
index ff3850062..a20fd5632 100644
--- a/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.tsx
+++ b/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.tsx
@@ -4,8 +4,9 @@ import {useEffect, useRef, useState} from 'react';
 
 import {ValueTypes} from '../../../data/ValueTypes';
 import type {TextLineConfig} from '../../descriptor';
+import {useLocale} from '../../LocaleContext';
 import type {InputTypeComponentProps} from '../../types';
-import {getFirstError, getInputAccessibleName} from '../../utils';
+import {getFirstError, getInputAccessibleName, getLangAttributes} from '../../utils';
 import {Counter} from '../counter';
 
 export type TextLineInputProps = InputTypeComponentProps<TextLineConfig>;
@@ -37,6 +38,8 @@ export const TextLineInput = ({
     // ? Scroll is owned by the parent InputField (gated on RevealOptions.scroll);
     // the inner blink should highlight only, never scroll again.
     const isBlinking = useBlinkAttention(inputRef, highlight, {scrollIntoView: false});
+    const locale = useLocale();
+    const langAttrs = getLangAttributes(locale);
     const hasMaxLength = config.maxLength > 0;
     const maxLength = hasMaxLength ? config.maxLength : undefined;
     const hasBoth = hasMaxLength && config.showCounter;
@@ -79,6 +82,7 @@ export const TextLineInput = ({
     return (
         <Input
             ref={inputRef}
+            {...langAttrs}
             aria-label={getInputAccessibleName(input, index)}
             value={rawInput}
             onChange={handleChange}
diff --git a/src/main/resources/assets/admin/common/js/form2/index.ts b/src/main/resources/assets/admin/common/js/form2/index.ts
index 08bcc3c00..74ee95f38 100644
--- a/src/main/resources/assets/admin/common/js/form2/index.ts
+++ b/src/main/resources/assets/admin/common/js/form2/index.ts
@@ -43,6 +43,7 @@ export {type UsePropertySetArrayResult, usePropertySetArray} from './hooks/usePr
 export {type UseSetOccurrenceManagerResult, useSetOccurrenceManager} from './hooks/useSetOccurrenceManager';
 export {I18nProvider, useI18n} from './I18nContext';
 export {initBuiltInTypes} from './initBuiltInTypes';
+export {LocaleProvider, type LocaleProviderProps, useLocale} from './LocaleContext';
 // Raw value tracking
 export {RawValueProvider, type RawValueProviderProps, useRawValueMap} from './RawValueContext';
 // React input type system (for CS and future consumers)
diff --git a/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.test.ts b/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.test.ts
new file mode 100644
index 000000000..47bc10b9a
--- /dev/null
+++ b/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.test.ts
@@ -0,0 +1,38 @@
+import {describe, expect, it} from 'vitest';
+import {getLangAttributes} from './getLangAttributes';
+
+describe('getLangAttributes', () => {
+    it('returns spellCheck only when locale is undefined', () => {
+        expect(getLangAttributes(undefined)).toEqual({spellCheck: true});
+    });
+
+    it('returns spellCheck only when locale is empty string', () => {
+        expect(getLangAttributes('')).toEqual({spellCheck: true});
+    });
+
+    it('extracts language from a region-qualified locale', () => {
+        expect(getLangAttributes('en-US')).toEqual({lang: 'en', spellCheck: true});
+    });
+
+    it('passes a bare language code through', () => {
+        expect(getLangAttributes('nb')).toEqual({lang: 'nb', spellCheck: true});
+    });
+
+    it('adds dir=rtl for Arabic', () => {
+        expect(getLangAttributes('ar-SA')).toEqual({lang: 'ar', dir: 'rtl', spellCheck: true});
+    });
+
+    it('adds dir=rtl for Hebrew', () => {
+        expect(getLangAttributes('he')).toEqual({lang: 'he', dir: 'rtl', spellCheck: true});
+    });
+
+    it('adds dir=rtl for Persian', () => {
+        expect(getLangAttributes('fa-IR')).toEqual({lang: 'fa', dir: 'rtl', spellCheck: true});
+    });
+
+    it('does not add dir for non-RTL languages', () => {
+        const result = getLangAttributes('de-DE');
+        expect(result).toEqual({lang: 'de', spellCheck: true});
+        expect(result.dir).toBeUndefined();
+    });
+});
diff --git a/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.ts b/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.ts
new file mode 100644
index 000000000..080adf602
--- /dev/null
+++ b/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.ts
@@ -0,0 +1,22 @@
+import {Locale} from '../../locale/Locale';
+
+export type LangAttributes = {
+    lang?: string;
+    dir?: 'rtl';
+    spellCheck: true;
+};
+
+export function getLangAttributes(locale: string | undefined): LangAttributes {
+    if (locale == null || locale.length === 0) {
+        return {spellCheck: true};
+    }
+
+    const language = Locale.extractLanguage(locale);
+    const attrs: LangAttributes = {lang: language, spellCheck: true};
+
+    if (Locale.supportsRtl(language)) {
+        attrs.dir = 'rtl';
+    }
+
+    return attrs;
+}
diff --git a/src/main/resources/assets/admin/common/js/form2/utils/index.ts b/src/main/resources/assets/admin/common/js/form2/utils/index.ts
index 9eaec8608..727e512ea 100644
--- a/src/main/resources/assets/admin/common/js/form2/utils/index.ts
+++ b/src/main/resources/assets/admin/common/js/form2/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './accessibility';
+export * from './getLangAttributes';
 export * from './validation';

From 7d48afc756c9bd7d432fa38547bbfaa8f3a668b4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 27 May 2026 08:03:53 +0000
Subject: [PATCH 2/2] Drop legacy Locale coupling and cover gaps in lang/dir
 tests

Inlined the RTL code set and Arabic-script subtag check directly into
getLangAttributes so form2 no longer depends on the legacy Locale class
for this path. Locale input is now case-insensitive (e.g. NB-NO -> nb).

Added test coverage for:
- Arabic-script subtag (ks-Arab -> dir=rtl)
- Mixed-case locale normalization
- TextLineInput VNode actually carrying lang/dir/spellCheck through the
  LocaleContext (no provider, non-RTL, RTL).
---
 .../text-line-input/TextLineInput.test.ts     | 30 ++++++++++
 .../js/form2/utils/getLangAttributes.test.ts  | 60 ++++++++++++-------
 .../js/form2/utils/getLangAttributes.ts       | 32 +++++++---
 3 files changed, 91 insertions(+), 31 deletions(-)

diff --git a/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.test.ts b/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.test.ts
index aaab1b54a..50ae89d21 100644
--- a/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.test.ts
+++ b/src/main/resources/assets/admin/common/js/form2/components/text-line-input/TextLineInput.test.ts
@@ -149,4 +149,34 @@ describe('TextLineInput', () => {
             expect(onChange.mock.calls[0][1]).toBe('abc');
         });
     });
+
+    describe('locale attributes', () => {
+        it('defaults to spellCheck only when no locale is provided', () => {
+            const element = TextLineInput(makeProps()) as VNode;
+
+            expect(element.props.spellCheck).toBe(true);
+            expect(element.props.lang).toBeUndefined();
+            expect(element.props.dir).toBeUndefined();
+        });
+
+        it('emits lang for a non-RTL locale', () => {
+            mocks.useContext.mockReturnValue('nb-NO');
+
+            const element = TextLineInput(makeProps()) as VNode;
+
+            expect(element.props.lang).toBe('nb');
+            expect(element.props.spellCheck).toBe(true);
+            expect(element.props.dir).toBeUndefined();
+        });
+
+        it('emits lang and dir=rtl for an RTL locale', () => {
+            mocks.useContext.mockReturnValue('ar-SA');
+
+            const element = TextLineInput(makeProps()) as VNode;
+
+            expect(element.props.lang).toBe('ar');
+            expect(element.props.dir).toBe('rtl');
+            expect(element.props.spellCheck).toBe(true);
+        });
+    });
 });
diff --git a/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.test.ts b/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.test.ts
index 47bc10b9a..07973aa40 100644
--- a/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.test.ts
+++ b/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.test.ts
@@ -2,37 +2,51 @@ import {describe, expect, it} from 'vitest';
 import {getLangAttributes} from './getLangAttributes';
 
 describe('getLangAttributes', () => {
-    it('returns spellCheck only when locale is undefined', () => {
-        expect(getLangAttributes(undefined)).toEqual({spellCheck: true});
-    });
+    describe('absent locale', () => {
+        it('returns spellCheck only when locale is undefined', () => {
+            expect(getLangAttributes(undefined)).toEqual({spellCheck: true});
+        });
 
-    it('returns spellCheck only when locale is empty string', () => {
-        expect(getLangAttributes('')).toEqual({spellCheck: true});
+        it('returns spellCheck only when locale is empty string', () => {
+            expect(getLangAttributes('')).toEqual({spellCheck: true});
+        });
     });
 
-    it('extracts language from a region-qualified locale', () => {
-        expect(getLangAttributes('en-US')).toEqual({lang: 'en', spellCheck: true});
-    });
+    describe('language extraction', () => {
+        it('extracts language from a region-qualified locale', () => {
+            expect(getLangAttributes('en-US')).toEqual({lang: 'en', spellCheck: true});
+        });
 
-    it('passes a bare language code through', () => {
-        expect(getLangAttributes('nb')).toEqual({lang: 'nb', spellCheck: true});
-    });
+        it('passes a bare language code through', () => {
+            expect(getLangAttributes('nb')).toEqual({lang: 'nb', spellCheck: true});
+        });
 
-    it('adds dir=rtl for Arabic', () => {
-        expect(getLangAttributes('ar-SA')).toEqual({lang: 'ar', dir: 'rtl', spellCheck: true});
+        it('lowercases mixed-case input', () => {
+            expect(getLangAttributes('NB-NO')).toEqual({lang: 'nb', spellCheck: true});
+        });
     });
 
-    it('adds dir=rtl for Hebrew', () => {
-        expect(getLangAttributes('he')).toEqual({lang: 'he', dir: 'rtl', spellCheck: true});
-    });
+    describe('RTL detection', () => {
+        it('adds dir=rtl for Arabic', () => {
+            expect(getLangAttributes('ar-SA')).toEqual({lang: 'ar', dir: 'rtl', spellCheck: true});
+        });
 
-    it('adds dir=rtl for Persian', () => {
-        expect(getLangAttributes('fa-IR')).toEqual({lang: 'fa', dir: 'rtl', spellCheck: true});
-    });
+        it('adds dir=rtl for Hebrew', () => {
+            expect(getLangAttributes('he')).toEqual({lang: 'he', dir: 'rtl', spellCheck: true});
+        });
+
+        it('adds dir=rtl for Persian with region subtag', () => {
+            expect(getLangAttributes('fa-IR')).toEqual({lang: 'fa', dir: 'rtl', spellCheck: true});
+        });
+
+        it('adds dir=rtl when the script subtag is Arabic', () => {
+            expect(getLangAttributes('ks-Arab')).toEqual({lang: 'ks', dir: 'rtl', spellCheck: true});
+        });
 
-    it('does not add dir for non-RTL languages', () => {
-        const result = getLangAttributes('de-DE');
-        expect(result).toEqual({lang: 'de', spellCheck: true});
-        expect(result.dir).toBeUndefined();
+        it('omits dir for non-RTL languages', () => {
+            const result = getLangAttributes('de-DE');
+            expect(result).toEqual({lang: 'de', spellCheck: true});
+            expect(result.dir).toBeUndefined();
+        });
     });
 });
diff --git a/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.ts b/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.ts
index 080adf602..9eb39de69 100644
--- a/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.ts
+++ b/src/main/resources/assets/admin/common/js/form2/utils/getLangAttributes.ts
@@ -1,4 +1,18 @@
-import {Locale} from '../../locale/Locale';
+const RTL_LANGUAGE_CODES: ReadonlySet<string> = new Set([
+    'ar',
+    'dv',
+    'fa',
+    'ha',
+    'he',
+    'ks',
+    'ku',
+    'ps',
+    'sd',
+    'ur',
+    'yi',
+]);
+
+const ARABIC_SCRIPT_SUBTAG = 'arab';
 
 export type LangAttributes = {
     lang?: string;
@@ -6,17 +20,19 @@ export type LangAttributes = {
     spellCheck: true;
 };
 
+function isRtl(locale: string, language: string): boolean {
+    if (RTL_LANGUAGE_CODES.has(language)) return true;
+    return locale.split('-')[1]?.toLowerCase() === ARABIC_SCRIPT_SUBTAG;
+}
+
 export function getLangAttributes(locale: string | undefined): LangAttributes {
-    if (locale == null || locale.length === 0) {
-        return {spellCheck: true};
-    }
+    if (locale == null || locale.length === 0) return {spellCheck: true};
 
-    const language = Locale.extractLanguage(locale);
+    const normalized = locale.toLowerCase();
+    const language = normalized.split('-')[0];
     const attrs: LangAttributes = {lang: language, spellCheck: true};
 
-    if (Locale.supportsRtl(language)) {
-        attrs.dir = 'rtl';
-    }
+    if (isRtl(normalized, language)) attrs.dir = 'rtl';
 
     return attrs;
 }