mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-01 10:09:56 +00:00
fix: Add aria-describedby for language warning
This commit is contained in:
parent
d735369db0
commit
d78514c665
1 changed files with 36 additions and 29 deletions
|
@ -49,39 +49,41 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
||||||
return this.props.iconVersion ? (
|
return this.props.iconVersion ? (
|
||||||
this.selectBtn
|
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 && (
|
{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")}
|
{I18NextService.i18n.t("undetermined_language_warning")}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="mb-3 row">
|
<div
|
||||||
<label
|
className={classNames(`col-sm-${this.props.multiple ? 9 : 10}`, {
|
||||||
className={classNames(
|
"input-group": this.props.multiple,
|
||||||
"col-form-label",
|
})}
|
||||||
`col-sm-${this.props.multiple ? 3 : 2}`
|
>
|
||||||
)}
|
{this.selectBtn}
|
||||||
htmlFor={this.id}
|
{this.props.multiple && (
|
||||||
>
|
<button
|
||||||
{I18NextService.i18n.t(
|
className="btn btn-outline-secondary"
|
||||||
this.props.multiple ? "language_plural" : "language"
|
onClick={linkEvent(this, this.handleDeselectAll)}
|
||||||
)}
|
>
|
||||||
</label>
|
<Icon icon="x" />
|
||||||
<div
|
</button>
|
||||||
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -105,6 +107,11 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
||||||
id={this.id}
|
id={this.id}
|
||||||
onChange={linkEvent(this, this.handleLanguageChange)}
|
onChange={linkEvent(this, this.handleLanguageChange)}
|
||||||
aria-label={I18NextService.i18n.t("language_select_placeholder")}
|
aria-label={I18NextService.i18n.t("language_select_placeholder")}
|
||||||
|
aria-describedby={
|
||||||
|
this.props.multiple && this.props.showLanguageWarning
|
||||||
|
? "lang-warning"
|
||||||
|
: ""
|
||||||
|
}
|
||||||
multiple={this.props.multiple}
|
multiple={this.props.multiple}
|
||||||
disabled={this.props.disabled}
|
disabled={this.props.disabled}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue