LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-26 14:21:13 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Jay Sitter 2023-06-24 19:52:30 -04:00
parent dccfc72e73
commit 47aafed45f
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/shared/components/common/searchable-select.tsx
View file

@ -106,8 +106,11 @@ export class SearchableSelect extends Component<
<button <button
id={id} id={id}
type="button" type="button"
role="combobox"
className="form-select d-inline-block text-start" className="form-select d-inline-block text-start"
aria-haspopup="listbox" aria-haspopup="listbox"
aria-controls="searchable-select-input"
aria-expanded={false}
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
onClick={linkEvent(this, focusSearch)} onClick={linkEvent(this, focusSearch)}
ref={this.toggleButtonRef} ref={this.toggleButtonRef}
@ -116,17 +119,14 @@ export class SearchableSelect extends Component<
? `${I18NextService.i18n.t("loading")}${loadingEllipses}` ? `${I18NextService.i18n.t("loading")}${loadingEllipses}`
: options[selectedIndex].label} : options[selectedIndex].label}
</button> </button>
<div <div className="modlog-choices-font-size dropdown-menu w-100 p-2">
role="combobox"
aria-activedescendant={options[selectedIndex].label}
className="modlog-choices-font-size dropdown-menu w-100 p-2"
>
<div className="input-group"> <div className="input-group">
<span className="input-group-text"> <span className="input-group-text">
{loading ? <Spinner /> : <Icon icon="search" />} {loading ? <Spinner /> : <Icon icon="search" />}
</span> </span>
<input <input
type="text" type="text"
id="searchable-select-input"
className="form-control" className="form-control"
ref={this.searchInputRef} ref={this.searchInputRef}
onInput={linkEvent(this, handleSearch)} onInput={linkEvent(this, handleSearch)}