From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 23:52:30 +0000 (-0400)
Subject: fix(a11y): Fix some a11y markup in Searchable Select component
X-Git-Url: http://these/git/%22https:/nerdica.net/%7B%24%7B%60data:application/static/%7BinboxRss%7D?a=commitdiff_plain;h=47aafed45f1c5322aaaefcf4f8fe2a5a97e60a8e;p=lemmy-ui.git

fix(a11y): Fix some a11y markup in Searchable Select component
---

diff --git a/src/shared/components/common/searchable-select.tsx b/src/shared/components/common/searchable-select.tsx
index a29fe16..37a0c83 100644
--- a/src/shared/components/common/searchable-select.tsx
+++ b/src/shared/components/common/searchable-select.tsx
@@ -106,8 +106,11 @@ export class SearchableSelect extends Component<
         <button
           id={id}
           type="button"
+          role="combobox"
           className="form-select d-inline-block text-start"
           aria-haspopup="listbox"
+          aria-controls="searchable-select-input"
+          aria-expanded={false}
           data-bs-toggle="dropdown"
           onClick={linkEvent(this, focusSearch)}
           ref={this.toggleButtonRef}
@@ -116,17 +119,14 @@ export class SearchableSelect extends Component<
             ? `${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)}