From d78514c665eb90d7ab858bbf2b698e214e087b9f Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 23 Jun 2023 15:20:49 -0400
Subject: [PATCH] fix: Add aria-describedby for language warning

---
 .../components/common/language-select.tsx     | 65 ++++++++++---------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/shared/components/common/language-select.tsx b/src/shared/components/common/language-select.tsx
index 382eff1e..3caf5893 100644
--- a/src/shared/components/common/language-select.tsx
+++ b/src/shared/components/common/language-select.tsx
@@ -49,39 +49,41 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
     return this.props.iconVersion ? (
       this.selectBtn
     ) : (
-      <div className="language-select">
+      <div className="language-select mb-3">
+        <label
+          className={classNames(
+            "col-form-label",
+            `col-sm-${this.props.multiple ? 3 : 2}`
+          )}
+          htmlFor={this.id}
+        >
+          {I18NextService.i18n.t(
+            this.props.multiple ? "language_plural" : "language"
+          )}
+        </label>
         {this.props.multiple && this.props.showLanguageWarning && (
-          <div className="alert alert-warning" role="alert">
+          <div
+            id="lang-warning"
+            className="alert small alert-warning"
+            role="alert"
+          >
             {I18NextService.i18n.t("undetermined_language_warning")}
           </div>
         )}
-        <div className="mb-3 row">
-          <label
-            className={classNames(
-              "col-form-label",
-              `col-sm-${this.props.multiple ? 3 : 2}`
-            )}
-            htmlFor={this.id}
-          >
-            {I18NextService.i18n.t(
-              this.props.multiple ? "language_plural" : "language"
-            )}
-          </label>
-          <div
-            className={classNames(`col-sm-${this.props.multiple ? 9 : 10}`, {
-              "input-group": this.props.multiple,
-            })}
-          >
-            {this.selectBtn}
-            {this.props.multiple && (
-              <button
-                className="btn btn-outline-secondary"
-                onClick={linkEvent(this, this.handleDeselectAll)}
-              >
-                <Icon icon="x" />
-              </button>
-            )}
-          </div>
+        <div
+          className={classNames(`col-sm-${this.props.multiple ? 9 : 10}`, {
+            "input-group": this.props.multiple,
+          })}
+        >
+          {this.selectBtn}
+          {this.props.multiple && (
+            <button
+              className="btn btn-outline-secondary"
+              onClick={linkEvent(this, this.handleDeselectAll)}
+            >
+              <Icon icon="x" />
+            </button>
+          )}
         </div>
       </div>
     );
@@ -105,6 +107,11 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
         id={this.id}
         onChange={linkEvent(this, this.handleLanguageChange)}
         aria-label={I18NextService.i18n.t("language_select_placeholder")}
+        aria-describedby={
+          this.props.multiple && this.props.showLanguageWarning
+            ? "lang-warning"
+            : ""
+        }
         multiple={this.props.multiple}
         disabled={this.props.disabled}
       >