Merge pull request #8468 from surveyjs/feature/8335-lang-dir-attrs

Implemented #8335 - Improve text direction detection by adding lang and dir attributes

packages/survey-angular-ui/src/survey-content.component.html

@@ -1,5 +1,5 @@
 <ng-template #template>
-  <div #surveyContainer *ngIf="!!model" [class]="model.getRootCss()" [style]="model.themeVariables">
+  <div #surveyContainer *ngIf="!!model" [class]="model.getRootCss()" [style]="model.themeVariables" [lang]="model.locale || 'en'" [dir]="model.localeDir">
     <sv-svg-bundle *ngIf="model.needRenderIcons"></sv-svg-bundle>
     <div [class]="model.wrapperFormCss">
       <div *ngIf="!!model.renderBackgroundImage" [class]="model.css.rootBackgroundImage" [style]="model.backgroundImageStyle"></div>

packages/survey-vue3-ui/src/Survey.vue

@@ -2,6 +2,7 @@
   <div
     :class="vueSurvey.getRootCss()"
     :style="vueSurvey.themeVariables"
+    :lang="vueSurvey.locale || 'en'" :dir="vueSurvey.localeDir"
     ref="root"
   >
     <sv-svg-bundle v-if="vueSurvey.needRenderIcons"></sv-svg-bundle>

src/knockout/templates/index.html

@@ -4,7 +4,7 @@
 </script>
 
 <script type="text/html" id="survey-content-template">
-  <div data-bind="css: rootCss, elementStyle: themeVariables">
+  <div data-bind="css: rootCss, elementStyle: themeVariables, attr: { lang: locale || 'en', dir: localeDir }">
     <!-- ko if: needRenderIcons -->
       <!-- ko component: { name: 'sv-svg-bundle'} -->
       <!-- /ko -->

src/localization/arabic.ts

@@ -110,6 +110,7 @@ export var arabicSurveyStrings = {
 
 surveyLocalization.locales["ar"] = arabicSurveyStrings;
 surveyLocalization.localeNames["ar"] = "العربية";
+surveyLocalization.localeDirections["ar"] = "rtl";
 
 // The following strings have been translated by a machine translation service
 // Remove those strings that you have corrected manually
@@ -141,5 +142,5 @@ surveyLocalization.localeNames["ar"] = "العربية";
 // ok: "OK" => "موافق"
 // cancel: "Cancel" => "إلغاء الأمر"
 // refuseItemText: "Refuse to answer" => "رفض الإجابة"
-// dontKnowItemText: "Don't know" => "لا أعرف"// savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner." => "ردك يتجاوز 64 كيلوبايت. يرجى تقليل حجم الملف (الملفات) والمحاولة مرة أخرى أو الاتصال بمالك الاستطلاع."
+// dontKnowItemText: "Don't know" => "لا أعرف"// savingExceedSize: "Your response exceeds 64KB. Please reduce the size of your file(s) and try again or contact a survey owner." => "ردك يتجاوز 64 كيلوبايت. يرجى تقليل حجم الملف (الملفات) والمحاولة مرة أخرى أو الاتصال بمالك الاستطلاع."
 // signaturePlaceHolderReadOnly: "No signature" => "لا يوجد توقيع"// tabTitlePlaceholder: "New Panel" => "لوحة جديدة"

src/react/reactSurvey.tsx

@@ -107,7 +107,7 @@ export class Survey extends SurveyElementBase<any, any>
     const cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
 
     return (
-      <div id={this.rootNodeId} ref={this.rootRef} className={cssClasses} style={this.survey.themeVariables}>
+      <div id={this.rootNodeId} ref={this.rootRef} className={cssClasses} style={this.survey.themeVariables} lang={this.survey.locale || "en"} dir={this.survey.localeDir}>
         {this.survey.needRenderIcons ? <SvgBundleComponent></SvgBundleComponent> : null }
         <div className={this.survey.wrapperFormCss}>
           {backgroundImage}

src/survey.ts

@@ -1858,6 +1858,9 @@ export class SurveyModel extends SurveyElementCore
     this.localeChanged();
     this.onLocaleChangedEvent.fire(this, this.locale);
   }
+  public get localeDir(): string {
+    return surveyLocalization.localeDirections[this.locale];
+  }
   /**
    * Returns an array of locales whose translations are used in the survey.
    *

src/surveyStrings.ts

@@ -5,6 +5,7 @@ export var surveyLocalization = {
   defaultLocaleValue: "en",
   locales: <{ [index: string]: any }>{},
   localeNames: <{ [index: string]: any }>{},
+  localeDirections: <{ [index: string]: any }>{},
   supportedLocales: <Array<any>>[],
   get currentLocale() {
     return this.currentLocaleValue === this.defaultLocaleValue ? "" : this.currentLocaleValue;

src/vue/survey.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="survey.getRootCss()"
     :style="vueSurvey.themeVariables"
+    :lang="vueSurvey.locale || 'en'" :dir="vueSurvey.localeDir"
     >
     <sv-svg-bundle v-if="vueSurvey.needRenderIcons"></sv-svg-bundle>
     <div :class="vueSurvey.wrapperFormCss">

tests/markup/etalon_survey.ts

@@ -1,3 +1,4 @@
+import { surveyLocalization } from "survey-core";
 import { registerMarkupTests } from "./helper";
 
 registerMarkupTests(
@@ -44,9 +45,35 @@ registerMarkupTests(
       getSnapshot: el => {
         el.innerHTML = "";
         el.removeAttribute("data-bind");
+        el.removeAttribute("lang");
+        el.removeAttribute("dir");
         return el.outerHTML;
       },
       snapshot: "survey-theme-variables"
+    }, {
+      name: "Test Survey language and direction",
+      json: {
+        questions: [
+          {
+            "type": "html",
+            "name": "q1",
+            "html": "<div></div>"
+          }
+        ]
+      },
+      event: "onAfterRenderSurvey",
+      initSurvey: (survey) => {
+        surveyLocalization.locales["tst"] = {};
+        surveyLocalization.localeDirections["tst"] = "rtl";
+
+        survey.locale = "tst";
+      },
+      getSnapshot: el => {
+        el.innerHTML = "";
+        el.removeAttribute("data-bind");
+        return JSON.stringify({ lang: el.lang, dir: el.dir });
+      },
+      snapshot: "survey-lang-dir"
     }, {
       name: "Test Survey backgroundImage",
       json: {

tests/markup/snapshots/survey-lang-dir.snap.html

@@ -0,0 +1 @@
+{"lang":"tst","dir":"rtl"}