From 4216c08c85476558f008ca858f12444ad1726cd7 Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Tue, 10 Feb 2026 17:52:08 +0000
Subject: [PATCH 01/11] only switch fish sets if not already showing

---
 package.json                                |  2 +-
 src/oceans/components/common/Guide.jsx      | 26 ++--------
 src/oceans/components/scenes/pond/index.jsx | 13 +++--
 src/oceans/styles/index.js                  |  3 --
 webpack.config.js                           |  1 +
 yarn.lock                                   | 57 +++++++--------------
 6 files changed, 35 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index 20cd1ccc..ab030ece 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
-    "messageformat": "^1.1.0",
+    "messageformat": "2.3.0",
     "react-typist": "^2.0.5"
   },
   "files": [
diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx
index cc1f342c..7b98f3b9 100644
--- a/src/oceans/components/common/Guide.jsx
+++ b/src/oceans/components/common/Guide.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Radium from 'radium';
-import Typist from 'react-typist';
 
 import '@ml/oceans/styles/fade.css';
 
@@ -144,17 +143,9 @@ let UnwrappedGuide = class Guide extends React.Component {
       }
     }
 
-    // Start playing the typing sounds.
-    if (
-      !state.textToSpeechLocale &&
-      !state.guideShowing &&
-      !state.guideTypingTimer &&
-      currentGuide
-    ) {
-      const guideTypingTimer = setInterval(() => {
-        soundLibrary.playSound('no', 0.5);
-      }, 1000 / 10);
-      setState({guideTypingTimer}, {skipCallback: true});
+    // Skip typing animation - show text immediately
+    if (!state.guideShowing && currentGuide) {
+      setState({guideShowing: true}, {skipCallback: true});
     }
 
     if (this.attemptTextToSpeechTextToSpeech(false)) {
@@ -211,16 +202,9 @@ let UnwrappedGuide = class Guide extends React.Component {
                   <div style={{position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden'}} aria-live="polite">
                     {currentGuide.textFn(getState())}
                   </div>
-                  {/* Visible Typist animation for sighted users */}
+                  {/* Visible guide text (no typing animation) */}
                   <div style={styles.guideTypingText} aria-hidden="true">
-                    <Typist
-                      avgTypingDelay={35}
-                      stdTypingDelay={15}
-                      cursor={{show: false}}
-                      onTypingDone={this.onTypingDone}
-                    >
-                      {currentGuide.textFn(getState())}
-                    </Typist>
+                    {currentGuide.textFn(getState())}
                   </div>
 
                   <div
diff --git a/src/oceans/components/scenes/pond/index.jsx b/src/oceans/components/scenes/pond/index.jsx
index 63470f5a..aecce44d 100644
--- a/src/oceans/components/scenes/pond/index.jsx
+++ b/src/oceans/components/scenes/pond/index.jsx
@@ -38,7 +38,7 @@ let UnwrappedPond = class Pond extends React.Component {
     super(props);
   }
 
-  toggleRecall = e => {
+  getMatchingFishSet = (e, showMatching) => {
     const state = getState();
 
     // No-op if transition is already in progress.
@@ -46,6 +46,13 @@ let UnwrappedPond = class Pond extends React.Component {
       return;
     }
 
+    // No-op if already showing the desired fish set (matching or non-matching).
+    // Note that recallFish are fish that are not matching the word/attribute.
+    // pondFish are fish that are matching the word/attribute.
+    if (state.showRecallFish !== showMatching) {
+      return;
+    }
+
     let currentFishSet, nextFishSet;
     if (state.showRecallFish) {
       currentFishSet = state.recallFish;
@@ -194,7 +201,7 @@ let UnwrappedPond = class Pond extends React.Component {
         <div style={recallIconsStyle}>
           <button
             type="button"
-            onClick={this.toggleRecall}
+            onClick={e => this.getMatchingFishSet(e, true)}
             aria-label={I18n.t('switchToMatchingItems')}
             style={{
               ...styles.recallIcon,
@@ -209,7 +216,7 @@ let UnwrappedPond = class Pond extends React.Component {
           </button>
           <button
             type="button"
-            onClick={this.toggleRecall}
+            onClick={e => this.getMatchingFishSet(e, false)}
             aria-label={I18n.t('switchToNonMatchingItems')}
             style={{
               ...styles.recallIcon,
diff --git a/src/oceans/styles/index.js b/src/oceans/styles/index.js
index da8ed85a..5009c073 100644
--- a/src/oceans/styles/index.js
+++ b/src/oceans/styles/index.js
@@ -408,11 +408,8 @@ const styles = {
     position: 'absolute',
     top: '2%',
     right: '7%',
-    backgroundColor: colors.white,
-    color: colors.grey,
     height: '8.5%',
     width: '9.5%',
-    borderRadius: 8,
     display: 'flex',
     alignItems: 'center',
     direction: 'ltr'
diff --git a/webpack.config.js b/webpack.config.js
index d0ea5893..26d9b575 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,6 +21,7 @@ const commonConfig = {
     rules: [
       {
         test: /\.js$/,
+        exclude: /node_modules\/messageformat/,
         loader: 'babel-loader'
       },
       {test: /\.css$/, loader: 'style-loader!css-loader'},
diff --git a/yarn.lock b/yarn.lock
index 16bd0687..1741e134 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3755,18 +3755,6 @@ glob@^7.1.1, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@~7.0.6:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
-  integrity sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.2"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 global-modules@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -5570,7 +5558,7 @@ make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-make-plural@^4.1.1:
+make-plural@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/make-plural/-/make-plural-4.3.0.tgz#f23de08efdb0cac2e0c9ba9f315b0dff6b4c2735"
   integrity sha512-xTYd4JVHpSCW+aqDof6w/MebaMVNTVYBZhbB/vi513xXdiPT92JMVCo0Jq8W2UZnzYRFeVbQiQ+I25l13JuKvA==
@@ -5733,21 +5721,24 @@ merge@^1.2.0:
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
   integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
 
-messageformat-parser@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/messageformat-parser/-/messageformat-parser-1.1.0.tgz#13ba2250a76bbde8e0fca0dbb3475f95c594a90a"
-  integrity sha512-Hwem6G3MsKDLS1FtBRGIs8T50P1Q00r3srS6QJePCFbad9fq0nYxwf3rnU2BreApRGhmpKMV7oZI06Sy1c9TPA==
+messageformat-formatters@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/messageformat-formatters/-/messageformat-formatters-2.0.1.tgz#0492c1402a48775f751c9b17c0354e92be012b08"
+  integrity sha512-E/lQRXhtHwGuiQjI7qxkLp8AHbMD5r2217XNe/SREbBlSawe0lOqsFb7rflZJmlQFSULNLIqlcjjsCPlB3m3Mg==
 
-messageformat@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/messageformat/-/messageformat-1.1.1.tgz#ceaa2e6c86929d4807058275a7372b1bd963bdf6"
-  integrity sha512-Q0uXcDtF5pEZsVSyhzDOGgZZK6ykN79VY9CwU3Nv0gsqx62BjdJW0MT+63UkHQ4exe3HE33ZlxR2/YwoJarRTg==
+messageformat-parser@^4.1.2:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/messageformat-parser/-/messageformat-parser-4.1.3.tgz#b824787f57fcda7d50769f5b63e8d4fda68f5b9e"
+  integrity sha512-2fU3XDCanRqeOCkn7R5zW5VQHWf+T3hH65SzuqRvjatBK7r4uyFa5mEX+k6F9Bd04LVM5G4/BHBTUJsOdW7uyg==
+
+messageformat@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/messageformat/-/messageformat-2.3.0.tgz#de263c49029d5eae65d7ee25e0754f57f425ad91"
+  integrity sha512-uTzvsv0lTeQxYI2y1NPa1lItL5VRI8Gb93Y2K2ue5gBPyrbJxfDi/EYWxh2PKv5yO42AJeeqblS9MJSh/IEk4w==
   dependencies:
-    glob "~7.0.6"
-    make-plural "^4.1.1"
-    messageformat-parser "^1.1.0"
-    nopt "~3.0.6"
-    reserved-words "^0.1.2"
+    make-plural "^4.3.0"
+    messageformat-formatters "^2.0.1"
+    messageformat-parser "^4.1.2"
 
 methods@~1.1.2:
   version "1.1.2"
@@ -5847,7 +5838,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
+minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -6170,13 +6161,6 @@ nopt@^5.0.0:
   dependencies:
     abbrev "1"
 
-nopt@~3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
-  dependencies:
-    abbrev "1"
-
 normalize-package-data@^2.3.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -7496,11 +7480,6 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
-reserved-words@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
-  integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
-
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"

From 0c3546b8f05d485133ce276f5540ebad58dea2e5 Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Tue, 10 Feb 2026 17:53:40 +0000
Subject: [PATCH 02/11] Revert "only switch fish sets if not already showing"

This reverts commit 4216c08c85476558f008ca858f12444ad1726cd7.
---
 package.json                                |  2 +-
 src/oceans/components/common/Guide.jsx      | 26 ++++++++--
 src/oceans/components/scenes/pond/index.jsx | 13 ++---
 src/oceans/styles/index.js                  |  3 ++
 webpack.config.js                           |  1 -
 yarn.lock                                   | 57 ++++++++++++++-------
 6 files changed, 67 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index ab030ece..20cd1ccc 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
-    "messageformat": "2.3.0",
+    "messageformat": "^1.1.0",
     "react-typist": "^2.0.5"
   },
   "files": [
diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx
index 7b98f3b9..cc1f342c 100644
--- a/src/oceans/components/common/Guide.jsx
+++ b/src/oceans/components/common/Guide.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Radium from 'radium';
+import Typist from 'react-typist';
 
 import '@ml/oceans/styles/fade.css';
 
@@ -143,9 +144,17 @@ let UnwrappedGuide = class Guide extends React.Component {
       }
     }
 
-    // Skip typing animation - show text immediately
-    if (!state.guideShowing && currentGuide) {
-      setState({guideShowing: true}, {skipCallback: true});
+    // Start playing the typing sounds.
+    if (
+      !state.textToSpeechLocale &&
+      !state.guideShowing &&
+      !state.guideTypingTimer &&
+      currentGuide
+    ) {
+      const guideTypingTimer = setInterval(() => {
+        soundLibrary.playSound('no', 0.5);
+      }, 1000 / 10);
+      setState({guideTypingTimer}, {skipCallback: true});
     }
 
     if (this.attemptTextToSpeechTextToSpeech(false)) {
@@ -202,9 +211,16 @@ let UnwrappedGuide = class Guide extends React.Component {
                   <div style={{position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden'}} aria-live="polite">
                     {currentGuide.textFn(getState())}
                   </div>
-                  {/* Visible guide text (no typing animation) */}
+                  {/* Visible Typist animation for sighted users */}
                   <div style={styles.guideTypingText} aria-hidden="true">
-                    {currentGuide.textFn(getState())}
+                    <Typist
+                      avgTypingDelay={35}
+                      stdTypingDelay={15}
+                      cursor={{show: false}}
+                      onTypingDone={this.onTypingDone}
+                    >
+                      {currentGuide.textFn(getState())}
+                    </Typist>
                   </div>
 
                   <div
diff --git a/src/oceans/components/scenes/pond/index.jsx b/src/oceans/components/scenes/pond/index.jsx
index aecce44d..63470f5a 100644
--- a/src/oceans/components/scenes/pond/index.jsx
+++ b/src/oceans/components/scenes/pond/index.jsx
@@ -38,7 +38,7 @@ let UnwrappedPond = class Pond extends React.Component {
     super(props);
   }
 
-  getMatchingFishSet = (e, showMatching) => {
+  toggleRecall = e => {
     const state = getState();
 
     // No-op if transition is already in progress.
@@ -46,13 +46,6 @@ let UnwrappedPond = class Pond extends React.Component {
       return;
     }
 
-    // No-op if already showing the desired fish set (matching or non-matching).
-    // Note that recallFish are fish that are not matching the word/attribute.
-    // pondFish are fish that are matching the word/attribute.
-    if (state.showRecallFish !== showMatching) {
-      return;
-    }
-
     let currentFishSet, nextFishSet;
     if (state.showRecallFish) {
       currentFishSet = state.recallFish;
@@ -201,7 +194,7 @@ let UnwrappedPond = class Pond extends React.Component {
         <div style={recallIconsStyle}>
           <button
             type="button"
-            onClick={e => this.getMatchingFishSet(e, true)}
+            onClick={this.toggleRecall}
             aria-label={I18n.t('switchToMatchingItems')}
             style={{
               ...styles.recallIcon,
@@ -216,7 +209,7 @@ let UnwrappedPond = class Pond extends React.Component {
           </button>
           <button
             type="button"
-            onClick={e => this.getMatchingFishSet(e, false)}
+            onClick={this.toggleRecall}
             aria-label={I18n.t('switchToNonMatchingItems')}
             style={{
               ...styles.recallIcon,
diff --git a/src/oceans/styles/index.js b/src/oceans/styles/index.js
index 5009c073..da8ed85a 100644
--- a/src/oceans/styles/index.js
+++ b/src/oceans/styles/index.js
@@ -408,8 +408,11 @@ const styles = {
     position: 'absolute',
     top: '2%',
     right: '7%',
+    backgroundColor: colors.white,
+    color: colors.grey,
     height: '8.5%',
     width: '9.5%',
+    borderRadius: 8,
     display: 'flex',
     alignItems: 'center',
     direction: 'ltr'
diff --git a/webpack.config.js b/webpack.config.js
index 26d9b575..d0ea5893 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,7 +21,6 @@ const commonConfig = {
     rules: [
       {
         test: /\.js$/,
-        exclude: /node_modules\/messageformat/,
         loader: 'babel-loader'
       },
       {test: /\.css$/, loader: 'style-loader!css-loader'},
diff --git a/yarn.lock b/yarn.lock
index 1741e134..16bd0687 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3755,6 +3755,18 @@ glob@^7.1.1, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@~7.0.6:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  integrity sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-modules@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -5558,7 +5570,7 @@ make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-make-plural@^4.3.0:
+make-plural@^4.1.1:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/make-plural/-/make-plural-4.3.0.tgz#f23de08efdb0cac2e0c9ba9f315b0dff6b4c2735"
   integrity sha512-xTYd4JVHpSCW+aqDof6w/MebaMVNTVYBZhbB/vi513xXdiPT92JMVCo0Jq8W2UZnzYRFeVbQiQ+I25l13JuKvA==
@@ -5721,24 +5733,21 @@ merge@^1.2.0:
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
   integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
 
-messageformat-formatters@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/messageformat-formatters/-/messageformat-formatters-2.0.1.tgz#0492c1402a48775f751c9b17c0354e92be012b08"
-  integrity sha512-E/lQRXhtHwGuiQjI7qxkLp8AHbMD5r2217XNe/SREbBlSawe0lOqsFb7rflZJmlQFSULNLIqlcjjsCPlB3m3Mg==
-
-messageformat-parser@^4.1.2:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/messageformat-parser/-/messageformat-parser-4.1.3.tgz#b824787f57fcda7d50769f5b63e8d4fda68f5b9e"
-  integrity sha512-2fU3XDCanRqeOCkn7R5zW5VQHWf+T3hH65SzuqRvjatBK7r4uyFa5mEX+k6F9Bd04LVM5G4/BHBTUJsOdW7uyg==
+messageformat-parser@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/messageformat-parser/-/messageformat-parser-1.1.0.tgz#13ba2250a76bbde8e0fca0dbb3475f95c594a90a"
+  integrity sha512-Hwem6G3MsKDLS1FtBRGIs8T50P1Q00r3srS6QJePCFbad9fq0nYxwf3rnU2BreApRGhmpKMV7oZI06Sy1c9TPA==
 
-messageformat@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/messageformat/-/messageformat-2.3.0.tgz#de263c49029d5eae65d7ee25e0754f57f425ad91"
-  integrity sha512-uTzvsv0lTeQxYI2y1NPa1lItL5VRI8Gb93Y2K2ue5gBPyrbJxfDi/EYWxh2PKv5yO42AJeeqblS9MJSh/IEk4w==
+messageformat@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/messageformat/-/messageformat-1.1.1.tgz#ceaa2e6c86929d4807058275a7372b1bd963bdf6"
+  integrity sha512-Q0uXcDtF5pEZsVSyhzDOGgZZK6ykN79VY9CwU3Nv0gsqx62BjdJW0MT+63UkHQ4exe3HE33ZlxR2/YwoJarRTg==
   dependencies:
-    make-plural "^4.3.0"
-    messageformat-formatters "^2.0.1"
-    messageformat-parser "^4.1.2"
+    glob "~7.0.6"
+    make-plural "^4.1.1"
+    messageformat-parser "^1.1.0"
+    nopt "~3.0.6"
+    reserved-words "^0.1.2"
 
 methods@~1.1.2:
   version "1.1.2"
@@ -5838,7 +5847,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@^3.0.3, minimatch@^3.0.4:
+minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -6161,6 +6170,13 @@ nopt@^5.0.0:
   dependencies:
     abbrev "1"
 
+nopt@~3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
+  dependencies:
+    abbrev "1"
+
 normalize-package-data@^2.3.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -7480,6 +7496,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reserved-words@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
+  integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"

From 0b27a8446ccc15e10e4b7239249f8e275081fe3b Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Tue, 10 Feb 2026 17:56:28 +0000
Subject: [PATCH 03/11] only switch fish sets if not already showing

---
 src/oceans/components/scenes/pond/index.jsx | 13 ++++++++++---
 src/oceans/styles/index.js                  |  3 ---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/oceans/components/scenes/pond/index.jsx b/src/oceans/components/scenes/pond/index.jsx
index 63470f5a..aecce44d 100644
--- a/src/oceans/components/scenes/pond/index.jsx
+++ b/src/oceans/components/scenes/pond/index.jsx
@@ -38,7 +38,7 @@ let UnwrappedPond = class Pond extends React.Component {
     super(props);
   }
 
-  toggleRecall = e => {
+  getMatchingFishSet = (e, showMatching) => {
     const state = getState();
 
     // No-op if transition is already in progress.
@@ -46,6 +46,13 @@ let UnwrappedPond = class Pond extends React.Component {
       return;
     }
 
+    // No-op if already showing the desired fish set (matching or non-matching).
+    // Note that recallFish are fish that are not matching the word/attribute.
+    // pondFish are fish that are matching the word/attribute.
+    if (state.showRecallFish !== showMatching) {
+      return;
+    }
+
     let currentFishSet, nextFishSet;
     if (state.showRecallFish) {
       currentFishSet = state.recallFish;
@@ -194,7 +201,7 @@ let UnwrappedPond = class Pond extends React.Component {
         <div style={recallIconsStyle}>
           <button
             type="button"
-            onClick={this.toggleRecall}
+            onClick={e => this.getMatchingFishSet(e, true)}
             aria-label={I18n.t('switchToMatchingItems')}
             style={{
               ...styles.recallIcon,
@@ -209,7 +216,7 @@ let UnwrappedPond = class Pond extends React.Component {
           </button>
           <button
             type="button"
-            onClick={this.toggleRecall}
+            onClick={e => this.getMatchingFishSet(e, false)}
             aria-label={I18n.t('switchToNonMatchingItems')}
             style={{
               ...styles.recallIcon,
diff --git a/src/oceans/styles/index.js b/src/oceans/styles/index.js
index da8ed85a..5009c073 100644
--- a/src/oceans/styles/index.js
+++ b/src/oceans/styles/index.js
@@ -408,11 +408,8 @@ const styles = {
     position: 'absolute',
     top: '2%',
     right: '7%',
-    backgroundColor: colors.white,
-    color: colors.grey,
     height: '8.5%',
     width: '9.5%',
-    borderRadius: 8,
     display: 'flex',
     alignItems: 'center',
     direction: 'ltr'

From ab7ee326c723098e1f472c275ed2dc05ecc57be9 Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Tue, 10 Feb 2026 20:03:21 +0000
Subject: [PATCH 04/11] update test

---
 test/unit/qualityTest.test.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/test/unit/qualityTest.test.js b/test/unit/qualityTest.test.js
index 8a05d535..9c97a075 100644
--- a/test/unit/qualityTest.test.js
+++ b/test/unit/qualityTest.test.js
@@ -600,11 +600,13 @@ describe('Model quality test', () => {
 
     trainer.train();
 
-    const details = trainer.detailedExplanation(trainingOcean[0].fieldInfos);
     const summary = trainer.summarize(trainingOcean[0].fieldInfos);
     console.log(summary);
-    const top_two = [summary[0].partType, summary[1].partType];
-    expect(top_two).toContain('bodies');
-    expect(top_two).toContain('dorsalFins');
+    // Both bodies and dorsalFins should be among top 3 (ordering can vary with random data)
+    const top_three = summary
+      .slice(0, 3)
+      .map(entry => entry.partType);
+    expect(top_three).toContain('bodies');
+    expect(top_three).toContain('dorsalFins');
   });
 });

From 4ee03d6ceef4d47cad057383ef6a89b67842216d Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Tue, 10 Feb 2026 20:05:42 +0000
Subject: [PATCH 05/11] combine conditions into one

---
 src/oceans/components/scenes/pond/index.jsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/oceans/components/scenes/pond/index.jsx b/src/oceans/components/scenes/pond/index.jsx
index aecce44d..2a3e3dbb 100644
--- a/src/oceans/components/scenes/pond/index.jsx
+++ b/src/oceans/components/scenes/pond/index.jsx
@@ -41,15 +41,10 @@ let UnwrappedPond = class Pond extends React.Component {
   getMatchingFishSet = (e, showMatching) => {
     const state = getState();
 
-    // No-op if transition is already in progress.
-    if (state.pondFishTransitionStartTime) {
-      return;
-    }
-
-    // No-op if already showing the desired fish set (matching or non-matching).
+    // No-op if transition is already in progress or if already showing the desired fish set.
     // Note that recallFish are fish that are not matching the word/attribute.
     // pondFish are fish that are matching the word/attribute.
-    if (state.showRecallFish !== showMatching) {
+    if (state.pondFishTransitionStartTime || state.showRecallFish === showMatching) {
       return;
     }
 

From 409b70cf3a7284a17085764f336c8221fc08cedd Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Tue, 10 Feb 2026 21:04:54 +0000
Subject: [PATCH 06/11] Revert "update test"

This reverts commit ab7ee326c723098e1f472c275ed2dc05ecc57be9.
---
 test/unit/qualityTest.test.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/test/unit/qualityTest.test.js b/test/unit/qualityTest.test.js
index 9c97a075..8a05d535 100644
--- a/test/unit/qualityTest.test.js
+++ b/test/unit/qualityTest.test.js
@@ -600,13 +600,11 @@ describe('Model quality test', () => {
 
     trainer.train();
 
+    const details = trainer.detailedExplanation(trainingOcean[0].fieldInfos);
     const summary = trainer.summarize(trainingOcean[0].fieldInfos);
     console.log(summary);
-    // Both bodies and dorsalFins should be among top 3 (ordering can vary with random data)
-    const top_three = summary
-      .slice(0, 3)
-      .map(entry => entry.partType);
-    expect(top_three).toContain('bodies');
-    expect(top_three).toContain('dorsalFins');
+    const top_two = [summary[0].partType, summary[1].partType];
+    expect(top_two).toContain('bodies');
+    expect(top_two).toContain('dorsalFins');
   });
 });

From 897344d1b544b8545dc0c601c05b8bd915efe87b Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Wed, 11 Feb 2026 03:03:16 +0000
Subject: [PATCH 07/11] fix no-op condition and update unit test setup for i18n

---
 package.json                                |  2 +-
 src/oceans/components/common/Guide.jsx      | 26 ++--------
 src/oceans/components/scenes/pond/index.jsx |  4 +-
 test/unit/oceans/ui.test.js                 |  4 ++
 webpack.config.js                           |  1 +
 yarn.lock                                   | 57 +++++++--------------
 6 files changed, 32 insertions(+), 62 deletions(-)

diff --git a/package.json b/package.json
index 20cd1ccc..ab030ece 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
-    "messageformat": "^1.1.0",
+    "messageformat": "2.3.0",
     "react-typist": "^2.0.5"
   },
   "files": [
diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx
index cc1f342c..7b98f3b9 100644
--- a/src/oceans/components/common/Guide.jsx
+++ b/src/oceans/components/common/Guide.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Radium from 'radium';
-import Typist from 'react-typist';
 
 import '@ml/oceans/styles/fade.css';
 
@@ -144,17 +143,9 @@ let UnwrappedGuide = class Guide extends React.Component {
       }
     }
 
-    // Start playing the typing sounds.
-    if (
-      !state.textToSpeechLocale &&
-      !state.guideShowing &&
-      !state.guideTypingTimer &&
-      currentGuide
-    ) {
-      const guideTypingTimer = setInterval(() => {
-        soundLibrary.playSound('no', 0.5);
-      }, 1000 / 10);
-      setState({guideTypingTimer}, {skipCallback: true});
+    // Skip typing animation - show text immediately
+    if (!state.guideShowing && currentGuide) {
+      setState({guideShowing: true}, {skipCallback: true});
     }
 
     if (this.attemptTextToSpeechTextToSpeech(false)) {
@@ -211,16 +202,9 @@ let UnwrappedGuide = class Guide extends React.Component {
                   <div style={{position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden'}} aria-live="polite">
                     {currentGuide.textFn(getState())}
                   </div>
-                  {/* Visible Typist animation for sighted users */}
+                  {/* Visible guide text (no typing animation) */}
                   <div style={styles.guideTypingText} aria-hidden="true">
-                    <Typist
-                      avgTypingDelay={35}
-                      stdTypingDelay={15}
-                      cursor={{show: false}}
-                      onTypingDone={this.onTypingDone}
-                    >
-                      {currentGuide.textFn(getState())}
-                    </Typist>
+                    {currentGuide.textFn(getState())}
                   </div>
 
                   <div
diff --git a/src/oceans/components/scenes/pond/index.jsx b/src/oceans/components/scenes/pond/index.jsx
index 2a3e3dbb..e355cdee 100644
--- a/src/oceans/components/scenes/pond/index.jsx
+++ b/src/oceans/components/scenes/pond/index.jsx
@@ -44,7 +44,9 @@ let UnwrappedPond = class Pond extends React.Component {
     // No-op if transition is already in progress or if already showing the desired fish set.
     // Note that recallFish are fish that are not matching the word/attribute.
     // pondFish are fish that are matching the word/attribute.
-    if (state.pondFishTransitionStartTime || state.showRecallFish === showMatching) {
+    // showMatching true -> want matching (showRecallFish false)
+    // showMatching false -> want recalled fish (showRecallFish true).
+    if (state.pondFishTransitionStartTime || state.showRecallFish === !showMatching) {
       return;
     }
 
diff --git a/test/unit/oceans/ui.test.js b/test/unit/oceans/ui.test.js
index 6527cac4..b19400e4 100644
--- a/test/unit/oceans/ui.test.js
+++ b/test/unit/oceans/ui.test.js
@@ -448,6 +448,10 @@ describe('Predict', () => {
 describe('Pond', () => {
   let playSoundStub;
 
+  beforeAll(() => {
+    I18n.initI18n();
+  });
+
   beforeEach(() => {
     playSoundStub = sinon.stub(soundLibrary, 'playSound');
   });
diff --git a/webpack.config.js b/webpack.config.js
index d0ea5893..26d9b575 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,6 +21,7 @@ const commonConfig = {
     rules: [
       {
         test: /\.js$/,
+        exclude: /node_modules\/messageformat/,
         loader: 'babel-loader'
       },
       {test: /\.css$/, loader: 'style-loader!css-loader'},
diff --git a/yarn.lock b/yarn.lock
index 16bd0687..1741e134 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3755,18 +3755,6 @@ glob@^7.1.1, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@~7.0.6:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
-  integrity sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.2"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 global-modules@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -5570,7 +5558,7 @@ make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-make-plural@^4.1.1:
+make-plural@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/make-plural/-/make-plural-4.3.0.tgz#f23de08efdb0cac2e0c9ba9f315b0dff6b4c2735"
   integrity sha512-xTYd4JVHpSCW+aqDof6w/MebaMVNTVYBZhbB/vi513xXdiPT92JMVCo0Jq8W2UZnzYRFeVbQiQ+I25l13JuKvA==
@@ -5733,21 +5721,24 @@ merge@^1.2.0:
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
   integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
 
-messageformat-parser@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/messageformat-parser/-/messageformat-parser-1.1.0.tgz#13ba2250a76bbde8e0fca0dbb3475f95c594a90a"
-  integrity sha512-Hwem6G3MsKDLS1FtBRGIs8T50P1Q00r3srS6QJePCFbad9fq0nYxwf3rnU2BreApRGhmpKMV7oZI06Sy1c9TPA==
+messageformat-formatters@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/messageformat-formatters/-/messageformat-formatters-2.0.1.tgz#0492c1402a48775f751c9b17c0354e92be012b08"
+  integrity sha512-E/lQRXhtHwGuiQjI7qxkLp8AHbMD5r2217XNe/SREbBlSawe0lOqsFb7rflZJmlQFSULNLIqlcjjsCPlB3m3Mg==
 
-messageformat@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/messageformat/-/messageformat-1.1.1.tgz#ceaa2e6c86929d4807058275a7372b1bd963bdf6"
-  integrity sha512-Q0uXcDtF5pEZsVSyhzDOGgZZK6ykN79VY9CwU3Nv0gsqx62BjdJW0MT+63UkHQ4exe3HE33ZlxR2/YwoJarRTg==
+messageformat-parser@^4.1.2:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/messageformat-parser/-/messageformat-parser-4.1.3.tgz#b824787f57fcda7d50769f5b63e8d4fda68f5b9e"
+  integrity sha512-2fU3XDCanRqeOCkn7R5zW5VQHWf+T3hH65SzuqRvjatBK7r4uyFa5mEX+k6F9Bd04LVM5G4/BHBTUJsOdW7uyg==
+
+messageformat@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/messageformat/-/messageformat-2.3.0.tgz#de263c49029d5eae65d7ee25e0754f57f425ad91"
+  integrity sha512-uTzvsv0lTeQxYI2y1NPa1lItL5VRI8Gb93Y2K2ue5gBPyrbJxfDi/EYWxh2PKv5yO42AJeeqblS9MJSh/IEk4w==
   dependencies:
-    glob "~7.0.6"
-    make-plural "^4.1.1"
-    messageformat-parser "^1.1.0"
-    nopt "~3.0.6"
-    reserved-words "^0.1.2"
+    make-plural "^4.3.0"
+    messageformat-formatters "^2.0.1"
+    messageformat-parser "^4.1.2"
 
 methods@~1.1.2:
   version "1.1.2"
@@ -5847,7 +5838,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
+minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -6170,13 +6161,6 @@ nopt@^5.0.0:
   dependencies:
     abbrev "1"
 
-nopt@~3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
-  dependencies:
-    abbrev "1"
-
 normalize-package-data@^2.3.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -7496,11 +7480,6 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
-reserved-words@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
-  integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
-
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"

From 14374e6f64b7e0044a266afc27c9cc372c68c70f Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Wed, 11 Feb 2026 03:04:53 +0000
Subject: [PATCH 08/11] Revert "fix no-op condition and update unit test setup
 for i18n"

This reverts commit 897344d1b544b8545dc0c601c05b8bd915efe87b.
---
 package.json                                |  2 +-
 src/oceans/components/common/Guide.jsx      | 26 ++++++++--
 src/oceans/components/scenes/pond/index.jsx |  4 +-
 test/unit/oceans/ui.test.js                 |  4 --
 webpack.config.js                           |  1 -
 yarn.lock                                   | 57 ++++++++++++++-------
 6 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index ab030ece..20cd1ccc 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
-    "messageformat": "2.3.0",
+    "messageformat": "^1.1.0",
     "react-typist": "^2.0.5"
   },
   "files": [
diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx
index 7b98f3b9..cc1f342c 100644
--- a/src/oceans/components/common/Guide.jsx
+++ b/src/oceans/components/common/Guide.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Radium from 'radium';
+import Typist from 'react-typist';
 
 import '@ml/oceans/styles/fade.css';
 
@@ -143,9 +144,17 @@ let UnwrappedGuide = class Guide extends React.Component {
       }
     }
 
-    // Skip typing animation - show text immediately
-    if (!state.guideShowing && currentGuide) {
-      setState({guideShowing: true}, {skipCallback: true});
+    // Start playing the typing sounds.
+    if (
+      !state.textToSpeechLocale &&
+      !state.guideShowing &&
+      !state.guideTypingTimer &&
+      currentGuide
+    ) {
+      const guideTypingTimer = setInterval(() => {
+        soundLibrary.playSound('no', 0.5);
+      }, 1000 / 10);
+      setState({guideTypingTimer}, {skipCallback: true});
     }
 
     if (this.attemptTextToSpeechTextToSpeech(false)) {
@@ -202,9 +211,16 @@ let UnwrappedGuide = class Guide extends React.Component {
                   <div style={{position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden'}} aria-live="polite">
                     {currentGuide.textFn(getState())}
                   </div>
-                  {/* Visible guide text (no typing animation) */}
+                  {/* Visible Typist animation for sighted users */}
                   <div style={styles.guideTypingText} aria-hidden="true">
-                    {currentGuide.textFn(getState())}
+                    <Typist
+                      avgTypingDelay={35}
+                      stdTypingDelay={15}
+                      cursor={{show: false}}
+                      onTypingDone={this.onTypingDone}
+                    >
+                      {currentGuide.textFn(getState())}
+                    </Typist>
                   </div>
 
                   <div
diff --git a/src/oceans/components/scenes/pond/index.jsx b/src/oceans/components/scenes/pond/index.jsx
index e355cdee..2a3e3dbb 100644
--- a/src/oceans/components/scenes/pond/index.jsx
+++ b/src/oceans/components/scenes/pond/index.jsx
@@ -44,9 +44,7 @@ let UnwrappedPond = class Pond extends React.Component {
     // No-op if transition is already in progress or if already showing the desired fish set.
     // Note that recallFish are fish that are not matching the word/attribute.
     // pondFish are fish that are matching the word/attribute.
-    // showMatching true -> want matching (showRecallFish false)
-    // showMatching false -> want recalled fish (showRecallFish true).
-    if (state.pondFishTransitionStartTime || state.showRecallFish === !showMatching) {
+    if (state.pondFishTransitionStartTime || state.showRecallFish === showMatching) {
       return;
     }
 
diff --git a/test/unit/oceans/ui.test.js b/test/unit/oceans/ui.test.js
index b19400e4..6527cac4 100644
--- a/test/unit/oceans/ui.test.js
+++ b/test/unit/oceans/ui.test.js
@@ -448,10 +448,6 @@ describe('Predict', () => {
 describe('Pond', () => {
   let playSoundStub;
 
-  beforeAll(() => {
-    I18n.initI18n();
-  });
-
   beforeEach(() => {
     playSoundStub = sinon.stub(soundLibrary, 'playSound');
   });
diff --git a/webpack.config.js b/webpack.config.js
index 26d9b575..d0ea5893 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,7 +21,6 @@ const commonConfig = {
     rules: [
       {
         test: /\.js$/,
-        exclude: /node_modules\/messageformat/,
         loader: 'babel-loader'
       },
       {test: /\.css$/, loader: 'style-loader!css-loader'},
diff --git a/yarn.lock b/yarn.lock
index 1741e134..16bd0687 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3755,6 +3755,18 @@ glob@^7.1.1, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@~7.0.6:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+  integrity sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-modules@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -5558,7 +5570,7 @@ make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-make-plural@^4.3.0:
+make-plural@^4.1.1:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/make-plural/-/make-plural-4.3.0.tgz#f23de08efdb0cac2e0c9ba9f315b0dff6b4c2735"
   integrity sha512-xTYd4JVHpSCW+aqDof6w/MebaMVNTVYBZhbB/vi513xXdiPT92JMVCo0Jq8W2UZnzYRFeVbQiQ+I25l13JuKvA==
@@ -5721,24 +5733,21 @@ merge@^1.2.0:
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
   integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
 
-messageformat-formatters@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/messageformat-formatters/-/messageformat-formatters-2.0.1.tgz#0492c1402a48775f751c9b17c0354e92be012b08"
-  integrity sha512-E/lQRXhtHwGuiQjI7qxkLp8AHbMD5r2217XNe/SREbBlSawe0lOqsFb7rflZJmlQFSULNLIqlcjjsCPlB3m3Mg==
-
-messageformat-parser@^4.1.2:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/messageformat-parser/-/messageformat-parser-4.1.3.tgz#b824787f57fcda7d50769f5b63e8d4fda68f5b9e"
-  integrity sha512-2fU3XDCanRqeOCkn7R5zW5VQHWf+T3hH65SzuqRvjatBK7r4uyFa5mEX+k6F9Bd04LVM5G4/BHBTUJsOdW7uyg==
+messageformat-parser@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/messageformat-parser/-/messageformat-parser-1.1.0.tgz#13ba2250a76bbde8e0fca0dbb3475f95c594a90a"
+  integrity sha512-Hwem6G3MsKDLS1FtBRGIs8T50P1Q00r3srS6QJePCFbad9fq0nYxwf3rnU2BreApRGhmpKMV7oZI06Sy1c9TPA==
 
-messageformat@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/messageformat/-/messageformat-2.3.0.tgz#de263c49029d5eae65d7ee25e0754f57f425ad91"
-  integrity sha512-uTzvsv0lTeQxYI2y1NPa1lItL5VRI8Gb93Y2K2ue5gBPyrbJxfDi/EYWxh2PKv5yO42AJeeqblS9MJSh/IEk4w==
+messageformat@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/messageformat/-/messageformat-1.1.1.tgz#ceaa2e6c86929d4807058275a7372b1bd963bdf6"
+  integrity sha512-Q0uXcDtF5pEZsVSyhzDOGgZZK6ykN79VY9CwU3Nv0gsqx62BjdJW0MT+63UkHQ4exe3HE33ZlxR2/YwoJarRTg==
   dependencies:
-    make-plural "^4.3.0"
-    messageformat-formatters "^2.0.1"
-    messageformat-parser "^4.1.2"
+    glob "~7.0.6"
+    make-plural "^4.1.1"
+    messageformat-parser "^1.1.0"
+    nopt "~3.0.6"
+    reserved-words "^0.1.2"
 
 methods@~1.1.2:
   version "1.1.2"
@@ -5838,7 +5847,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@^3.0.3, minimatch@^3.0.4:
+minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -6161,6 +6170,13 @@ nopt@^5.0.0:
   dependencies:
     abbrev "1"
 
+nopt@~3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
+  dependencies:
+    abbrev "1"
+
 normalize-package-data@^2.3.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -7480,6 +7496,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reserved-words@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
+  integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"

From e619f9631560b08ed988aca107cbb5a8afe74f13 Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Wed, 11 Feb 2026 03:07:15 +0000
Subject: [PATCH 09/11] fix no-op condition and update unit test setup for i18n

---
 src/oceans/components/scenes/pond/index.jsx | 4 +++-
 test/unit/oceans/ui.test.js                 | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/oceans/components/scenes/pond/index.jsx b/src/oceans/components/scenes/pond/index.jsx
index 2a3e3dbb..e355cdee 100644
--- a/src/oceans/components/scenes/pond/index.jsx
+++ b/src/oceans/components/scenes/pond/index.jsx
@@ -44,7 +44,9 @@ let UnwrappedPond = class Pond extends React.Component {
     // No-op if transition is already in progress or if already showing the desired fish set.
     // Note that recallFish are fish that are not matching the word/attribute.
     // pondFish are fish that are matching the word/attribute.
-    if (state.pondFishTransitionStartTime || state.showRecallFish === showMatching) {
+    // showMatching true -> want matching (showRecallFish false)
+    // showMatching false -> want recalled fish (showRecallFish true).
+    if (state.pondFishTransitionStartTime || state.showRecallFish === !showMatching) {
       return;
     }
 
diff --git a/test/unit/oceans/ui.test.js b/test/unit/oceans/ui.test.js
index 6527cac4..b19400e4 100644
--- a/test/unit/oceans/ui.test.js
+++ b/test/unit/oceans/ui.test.js
@@ -448,6 +448,10 @@ describe('Predict', () => {
 describe('Pond', () => {
   let playSoundStub;
 
+  beforeAll(() => {
+    I18n.initI18n();
+  });
+
   beforeEach(() => {
     playSoundStub = sinon.stub(soundLibrary, 'playSound');
   });

From 653fa885a06353e512a9b431f90cd53a44fa5c17 Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Wed, 11 Feb 2026 03:29:51 +0000
Subject: [PATCH 10/11] update border-radius toggle buttons styling

---
 src/oceans/components/scenes/pond/index.jsx |  8 ++++----
 src/oceans/styles/index.js                  | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/oceans/components/scenes/pond/index.jsx b/src/oceans/components/scenes/pond/index.jsx
index e355cdee..a3759efe 100644
--- a/src/oceans/components/scenes/pond/index.jsx
+++ b/src/oceans/components/scenes/pond/index.jsx
@@ -201,8 +201,8 @@ let UnwrappedPond = class Pond extends React.Component {
             onClick={e => this.getMatchingFishSet(e, true)}
             aria-label={I18n.t('switchToMatchingItems')}
             style={{
-              ...styles.recallIcon,
-              ...{borderTopLeftRadius: 8, borderBottomLeftRadius: 8},
+              ...styles.toggleIcon,
+              ...styles.matchingIconLeft,
               ...(state.showRecallFish ? {} : styles.bgGreen)
             }}
           >
@@ -216,8 +216,8 @@ let UnwrappedPond = class Pond extends React.Component {
             onClick={e => this.getMatchingFishSet(e, false)}
             aria-label={I18n.t('switchToNonMatchingItems')}
             style={{
-              ...styles.recallIcon,
-              ...{borderTopRightRadius: 8, borderBottomRightRadius: 8},
+              ...styles.toggleIcon,
+              ...styles.nonMatchingIconRight,
               ...(state.showRecallFish ? styles.bgRed : {})
             }}
           >
diff --git a/src/oceans/styles/index.js b/src/oceans/styles/index.js
index 5009c073..d67cec79 100644
--- a/src/oceans/styles/index.js
+++ b/src/oceans/styles/index.js
@@ -414,13 +414,25 @@ const styles = {
     alignItems: 'center',
     direction: 'ltr'
   },
-  recallIcon: {
+  toggleIcon: {
     cursor: 'pointer',
     height: '100%',
     border: 'none',
     padding: '10px',
     margin: 0
   },
+  matchingIconLeft: {
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  nonMatchingIconRight: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8
+  },
   infoIconContainer: {
     position: 'absolute',
     top: '2%',

From d565bac7e60a6ad8e6312cd49c3c118d472f32d9 Mon Sep 17 00:00:00 2001
From: Alice Fisher <alice.fisher@code.org>
Date: Wed, 11 Feb 2026 03:40:04 +0000
Subject: [PATCH 11/11] fix focus

---
 src/oceans/components/scenes/pond/index.jsx | 2 ++
 src/oceans/styles/index.js                  | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/oceans/components/scenes/pond/index.jsx b/src/oceans/components/scenes/pond/index.jsx
index a3759efe..1668c01a 100644
--- a/src/oceans/components/scenes/pond/index.jsx
+++ b/src/oceans/components/scenes/pond/index.jsx
@@ -197,6 +197,7 @@ let UnwrappedPond = class Pond extends React.Component {
         <div onClick={this.onPondClick} style={styles.pondSurface} />
         <div style={recallIconsStyle}>
           <button
+            key="toggle-matching"
             type="button"
             onClick={e => this.getMatchingFishSet(e, true)}
             aria-label={I18n.t('switchToMatchingItems')}
@@ -212,6 +213,7 @@ let UnwrappedPond = class Pond extends React.Component {
             />
           </button>
           <button
+            key="toggle-non-matching"
             type="button"
             onClick={e => this.getMatchingFishSet(e, false)}
             aria-label={I18n.t('switchToNonMatchingItems')}
diff --git a/src/oceans/styles/index.js b/src/oceans/styles/index.js
index d67cec79..03e15c2a 100644
--- a/src/oceans/styles/index.js
+++ b/src/oceans/styles/index.js
@@ -419,7 +419,11 @@ const styles = {
     height: '100%',
     border: 'none',
     padding: '10px',
-    margin: 0
+    margin: 0,
+    ':focus': {
+      position: 'relative',
+      zIndex: 1
+    }
   },
   matchingIconLeft: {
     borderTopLeftRadius: 8,