fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-23 15:05:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1533 from jsit/fix/add-aria-describedby-lang-warn

Browse source 
fix: Add aria-describedby for language warning
This commit is contained in:
SleeplessOne1917 2023-06-23 21:37:48 +00:00 committed by GitHub
parent eca18ac601 dac0fa50ad
commit 6af04f1f7e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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}
> >