fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-27 19:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Add aria-describedby for language warning

Browse source
This commit is contained in:
Jay Sitter 2023-06-23 15:20:49 -04:00
parent e5e8f29c67
commit 87e8ce8d79
1 changed files with 36 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/shared/components/common/language-select.tsx
View file

@ -49,13 +49,7 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
return this.props.iconVersion ? (
this.selectBtn
) : (
<div className="language-select">
{this.props.multiple && this.props.showLanguageWarning && (
<div className="alert alert-warning" role="alert">
{I18NextService.i18n.t("undetermined_language_warning")}
</div>
)}
<div className="mb-3 row">
<div className="language-select mb-3">
<label
className={classNames(
"col-form-label",
@ -67,6 +61,15 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
this.props.multiple ? "language_plural" : "language"
)}
</label>
{this.props.multiple && this.props.showLanguageWarning && (
<div
id="lang-warning"
className="alert small alert-warning"
role="alert"
>
{I18NextService.i18n.t("undetermined_language_warning")}
</div>
)}
<div
className={classNames(`col-sm-${this.props.multiple ? 9 : 10}`, {
"input-group": this.props.multiple,
@ -83,7 +86,6 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
)}
</div>
</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}
>