Merge remote-tracking branch 'lemmy/main' into fix/fix-long-words-in-titles-overflow

[lemmy-ui.git] / src / shared / components / common / searchable-select.tsx

diff --git a/src/shared/components/common/searchable-select.tsx b/src/shared/components/common/searchable-select.tsx
index 1d98de3d625d75687b5b09bc1e9d707bb60632c1..ef59a8c247c286a5616b87e215c76793a97ce210 100644 (file)
--- a/src/shared/components/common/searchable-select.tsx
+++ b/src/shared/components/common/searchable-select.tsx
@@ -1,3 +1,4 @@
+import { Choice } from "@utils/types";
 import classNames from "classnames";
 import {
   ChangeEvent,
@@ -6,8 +7,7 @@ import {
   linkEvent,
   RefObject,
 } from "inferno";
-import { i18n } from "../../i18next";
-import { Choice } from "../../utils";
+import { I18NextService } from "../../services";
 import { Icon, Spinner } from "./icon";
 
 interface SearchableSelectProps {
@@ -102,36 +102,37 @@ export class SearchableSelect extends Component<
     const { searchText, selectedIndex, loadingEllipses } = this.state;
 
     return (
-      <div className="searchable-select dropdown">
+      <div className="searchable-select dropdown col-12 col-sm-auto flex-grow-1">
         <button
           id={id}
           type="button"
+          role="combobox"
           className="form-select d-inline-block text-start"
           aria-haspopup="listbox"
+          aria-controls="searchable-select-input"
+          aria-activedescendant={options[selectedIndex].label}
+          aria-expanded={false}
           data-bs-toggle="dropdown"
           onClick={linkEvent(this, focusSearch)}
           ref={this.toggleButtonRef}
         >
           {loading
-            ? `${i18n.t("loading")}${loadingEllipses}`
+            ? `${I18NextService.i18n.t("loading")}${loadingEllipses}`
             : options[selectedIndex].label}
         </button>
-        <div
-          role="combobox"
-          aria-activedescendant={options[selectedIndex].label}
-          className="modlog-choices-font-size dropdown-menu w-100 p-2"
-        >
+        <div className="modlog-choices-font-size dropdown-menu w-100 p-2">
           <div className="input-group">
             <span className="input-group-text">
               {loading ? <Spinner /> : <Icon icon="search" />}
             </span>
             <input
               type="text"
+              id="searchable-select-input"
               className="form-control"
               ref={this.searchInputRef}
               onInput={linkEvent(this, handleSearch)}
               value={searchText}
-              placeholder={`${i18n.t("search")}...`}
+              placeholder={`${I18NextService.i18n.t("search")}...`}
             />
           </div>
           {!loading &&