Add lang attr on desktop and browser (#14691)

libs/angular/src/platform/i18n/document-lang.setter.spec.ts

@@ -0,0 +1,36 @@
+import { mock } from "jest-mock-extended";
+import { Subject } from "rxjs";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { DocumentLangSetter } from "./document-lang.setter";
+
+describe("DocumentLangSetter", () => {
+  const document = mock<Document>();
+  const i18nService = mock<I18nService>();
+
+  const sut = new DocumentLangSetter(document, i18nService);
+
+  describe("start", () => {
+    it("reacts to locale changes while start called with a non-closed subscription", async () => {
+      const localeSubject = new Subject<string>();
+      i18nService.locale$ = localeSubject;
+
+      localeSubject.next("en");
+
+      expect(document.documentElement.lang).toBeFalsy();
+
+      const sub = sut.start();
+
+      localeSubject.next("es");
+
+      expect(document.documentElement.lang).toBe("es");
+
+      sub.unsubscribe();
+
+      localeSubject.next("ar");
+
+      expect(document.documentElement.lang).toBe("es");
+    });
+  });
+});

libs/angular/src/platform/i18n/document-lang.setter.ts

@@ -0,0 +1,26 @@
+import { Subscription } from "rxjs";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+/**
+ * A service for managing the setting of the `lang="<locale>" attribute on the
+ * main document for the application.
+ */
+export class DocumentLangSetter {
+  constructor(
+    private readonly document: Document,
+    private readonly i18nService: I18nService,
+  ) {}
+
+  /**
+   * Starts listening to an upstream source for the best locale for the user
+   * and applies it to the application document.
+   * @returns A subscription that can be unsubscribed if you wish to stop
+   * applying lang attribute updates to the application document.
+   */
+  start(): Subscription {
+    return this.i18nService.locale$.subscribe((locale) => {
+      this.document.documentElement.lang = locale;
+    });
+  }
+}

libs/angular/src/platform/i18n/index.ts

@@ -0,0 +1 @@
+export { DocumentLangSetter } from "./document-lang.setter";