From 68a226d8844f8ae8e11a3b507899e7d0a58c3c7c Mon Sep 17 00:00:00 2001
From: Simon Bates <sbates@ocadu.ca>
Date: Wed, 21 May 2025 10:48:41 -0400
Subject: [PATCH] GH-547: Maintain focus after changing language

* In LanguageSelector, use React.forwardRef() to enable users of
  LanguageSelector to obtain a ref to the LanguageSelector button

* Add 2 new instance properties to App: 'languageSelectorRef', a ref
  to the language selector (forwarded to the button, as above), and
  'focusLanguageSelector', a boolean to indicate that focus should be
  set on the language selector

* Add a new language change handler to App that sets
  'focusLanguageSelector' when the language is changed and new code to
  'componentDidUpdate()' to check 'focusLanguageSelector' and set
  focus if requested
---
 src/App.js              | 30 ++++++++++++++++++++++++++++--
 src/LanguageSelector.js | 21 ++++++++++++---------
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 804a463c..d22842f9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -145,6 +145,7 @@ export class App extends React.Component<AppProps, AppState> {
     customBackgroundSerializer: CustomBackgroundSerializer;
     speedLookUp: Array<number>;
     pushStateTimeoutID: ?TimeoutID;
+    languageSelectorRef: { current: any };
     programBlockEditorRef: { current: any };
     sequenceInProgress: Array<KeyboardEvent>;
     announcementBuilder: AnnouncementBuilder;
@@ -152,6 +153,7 @@ export class App extends React.Component<AppProps, AppState> {
     designModeCursorDescriptionBuilder: DesignModeCursorDescriptionBuilder;
     programChangeController: ProgramChangeController;
     defaultWorld: WorldName;
+    focusLanguageSelector: boolean;
 
     constructor(props: any) {
         super(props);
@@ -180,6 +182,8 @@ export class App extends React.Component<AppProps, AppState> {
 
         this.defaultWorld = 'Sketchpad';
 
+        this.focusLanguageSelector = false;
+
         // Initialize startingX, startingY, and startingDirection to the world starting position
         const startingX = getWorldProperties(this.defaultWorld).startingX;
         const startingY = getWorldProperties(this.defaultWorld).startingY;
@@ -247,6 +251,8 @@ export class App extends React.Component<AppProps, AppState> {
         this.programChangeController = new ProgramChangeController(this,
             this.audioManager);
 
+        this.languageSelectorRef = React.createRef();
+
         this.programBlockEditorRef = React.createRef();
 
         const actionsHandler = new ActionsHandler(this, this.audioManager,
@@ -333,6 +339,15 @@ export class App extends React.Component<AppProps, AppState> {
 
     // Handlers
 
+    handleChangeLanguage = (language: LanguageTag) => {
+        // Changing the language will cause the App to update and for focus to
+        // be lost. Set this.focusLanguageSelector to true to indicate that we
+        // want to set focus back to the language selector after the update.
+        this.focusLanguageSelector = true;
+        // Call the provided handler
+        this.props.onChangeLanguage(language);
+    };
+
     handleProgramSequenceChange = (programSequence: ProgramSequence) => {
         this.setState({
             programSequence: programSequence
@@ -1278,7 +1293,8 @@ export class App extends React.Component<AppProps, AppState> {
                 <div className='App__PrivacyButtonLanguageSelectorRow'>
                     <LanguageSelector
                         value={this.props.language}
-                        onChange={this.props.onChangeLanguage}
+                        onChange={this.handleChangeLanguage}
+                        ref={this.languageSelectorRef}
                     />
                     <button
                         aria-label={this.props.intl.formatMessage({id: 'App.privacyModalToggle.ariaLabel'})}
@@ -1881,7 +1897,7 @@ export class App extends React.Component<AppProps, AppState> {
         document.addEventListener('keydown', this.handleDocumentKeyDown);
     }
 
-    componentDidUpdate(prevProps: {}, prevState: AppState) {
+    componentDidUpdate(prevProps: AppProps, prevState: AppState) {
         if (this.state.programSequence !== prevState.programSequence
             || this.state.characterState !== prevState.characterState
             || this.state.settings.theme !== prevState.settings.theme
@@ -1981,6 +1997,16 @@ export class App extends React.Component<AppProps, AppState> {
                 );
             }
         }
+
+        // If the language has been changed and this.focusLanguageSelector is
+        // set, then set focus to the language selector
+        if (this.props.language !== prevProps.language
+                && this.focusLanguageSelector) {
+            if (this.languageSelectorRef.current) {
+                this.languageSelectorRef.current.focus();
+            }
+            this.focusLanguageSelector = false;
+        }
     }
 
     componentWillUnmount() {
diff --git a/src/LanguageSelector.js b/src/LanguageSelector.js
index e2bdf2ed..cd1e498c 100644
--- a/src/LanguageSelector.js
+++ b/src/LanguageSelector.js
@@ -9,23 +9,26 @@ type LanguageSelectorProps = {
     onChange: (value: LanguageTag) => void
 };
 
-export default class LanguageSelector extends React.PureComponent<LanguageSelectorProps, {}> {
-    handleClick = () => {
-        this.props.onChange(this.props.value === 'en' ? 'fr' : 'en');
-    };
+const LanguageSelector = React.forwardRef<LanguageSelectorProps, HTMLButtonElement>(
+    (props, ref) => {
+        const handleClick = () => {
+            props.onChange(props.value === 'en' ? 'fr' : 'en');
+        };
 
-    render() {
-        const label = this.props.value === 'en' ? 'Français' : 'English';
-        const labelLang = this.props.value === 'en' ? 'fr' : 'en';
+        const label = props.value === 'en' ? 'Français' : 'English';
+        const labelLang = props.value === 'en' ? 'fr' : 'en';
 
         return (
             <button
                 className='LanguageSelector'
                 lang={labelLang}
-                onClick={this.handleClick}
+                onClick={handleClick}
+                ref={ref}
             >
                 {label}
             </button>
         );
     }
-};
+);
+
+export default LanguageSelector;