From ee0da58445432c8380bdd406cc1d3f7fd1d482c6 Mon Sep 17 00:00:00 2001
From: Jonathan Olson <jonathan.olson@colorado.edu>
Date: Tue, 30 Aug 2022 18:09:25 -0600
Subject: [PATCH] Grunt update. Adding linebreak dependency for unicode-correct
 line break detection. Adding back directional marks into
 load-unbuilt-strings. Proper RichText line break handling. See
 https://github.com/phetsims/joist/issues/843

---
 joist-tests.html                          |  1 +
 joist_en.html                             |  1 +
 js/isLeftToRightProperty.ts               | 22 ++++++++++++++++++++++
 js/preferences/GeneralPreferencesPanel.ts | 14 ++++++++++++--
 4 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 js/isLeftToRightProperty.ts

diff --git a/joist-tests.html b/joist-tests.html
index c8e0e322..9a41df53 100644
--- a/joist-tests.html
+++ b/joist-tests.html
@@ -87,6 +87,7 @@
     '../sherpa/lib/lodash-4.17.4.js',
     '../sherpa/lib/FileSaver-b8054a2.js',
     '../sherpa/lib/himalaya-1.1.0.js',
+    '../sherpa/lib/linebreak-1.1.0.js',
     '../sherpa/lib/flatqueue-1.2.1.js',
     '../sherpa/lib/he-1.1.1.js',
     '../assert/js/assert.js',
diff --git a/joist_en.html b/joist_en.html
index 4c61e518..8cc5d7ff 100644
--- a/joist_en.html
+++ b/joist_en.html
@@ -87,6 +87,7 @@
     '../sherpa/lib/lodash-4.17.4.js',
     '../sherpa/lib/FileSaver-b8054a2.js',
     '../sherpa/lib/himalaya-1.1.0.js',
+    '../sherpa/lib/linebreak-1.1.0.js',
     '../sherpa/lib/flatqueue-1.2.1.js',
     '../sherpa/lib/he-1.1.1.js',
     '../assert/js/assert.js',
diff --git a/js/isLeftToRightProperty.ts b/js/isLeftToRightProperty.ts
new file mode 100644
index 00000000..1813a799
--- /dev/null
+++ b/js/isLeftToRightProperty.ts
@@ -0,0 +1,22 @@
+// Copyright 2022, University of Colorado Boulder
+
+/**
+ * A universal locale-based Property that is true when text is meant to be laid out left-to-right, and false
+ * when the reverse is true (text should be laid out right-to-left).
+ *
+ * @author Jonathan Olson <jonathan.olson@colorado.edu>
+ */
+
+import DerivedProperty from '../../axon/js/DerivedProperty.js';
+import localeInfoModule from '../../chipper/js/data/localeInfoModule.js';
+import joist from './joist.js';
+import localeProperty from './localeProperty.js';
+
+const isLeftToRightProperty = new DerivedProperty( [ localeProperty ], locale => {
+  // @ts-ignore keyof localeInfoModule not helping here.
+  return localeInfoModule[ locale ].direction === 'ltr';
+} );
+
+joist.register( 'isLeftToRightProperty', isLeftToRightProperty );
+
+export default isLeftToRightProperty;
diff --git a/js/preferences/GeneralPreferencesPanel.ts b/js/preferences/GeneralPreferencesPanel.ts
index cfbe2ed9..cee7b028 100644
--- a/js/preferences/GeneralPreferencesPanel.ts
+++ b/js/preferences/GeneralPreferencesPanel.ts
@@ -19,6 +19,7 @@ import optionize, { EmptySelfOptions } from '../../../phet-core/js/optionize.js'
 import PickRequired from '../../../phet-core/js/types/PickRequired.js';
 import PreferencesPanelSection from './PreferencesPanelSection.js';
 import Emitter from '../../../axon/js/Emitter.js';
+import isLeftToRightProperty from '../isLeftToRightProperty.js';
 
 type SelfOptions = EmptySelfOptions;
 type GeneralPreferencesPanelOptions = SelfOptions & VBoxOptions & PickRequired<VBoxOptions, 'tandem'>;
@@ -52,7 +53,6 @@ class GeneralPreferencesPanel extends VBox {
     // All panel content collected in this final array
     const panelContent = [];
 
-    const introParagraphs = new VBox( { spacing: 10, align: 'left' } );
     const introTextOptions = merge( {}, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS, {
 
       // using lineWrap instead of default maxWidth for content
@@ -60,11 +60,21 @@ class GeneralPreferencesPanel extends VBox {
       lineWrap: 600,
       tagName: 'p'
     } );
-    introParagraphs.children = [
+    const introParagraphsTexts = [
       new VoicingRichText( joistStrings.preferences.tabs.general.accessibilityIntroStringProperty, introTextOptions ),
       new VoicingRichText( joistStrings.preferences.tabs.general.moreAccessibilityStringProperty, introTextOptions )
     ];
 
+    const introParagraphs = new VBox( { spacing: 10, children: introParagraphsTexts } );
+
+    isLeftToRightProperty.link( isLTR => {
+      introParagraphsTexts.forEach( text => {
+        const align = isLTR ? 'left' : 'right';
+        text.align = align;
+        introParagraphs.align = align;
+      } );
+    } );
+
     // Just the provided panel content with its own spacing
     const providedChildren: Node[] = [];