1
0
mirror of https://github.com/flarum/core.git synced 2025-08-05 16:07:34 +02:00

fix: Add a11y labels to auth modal inputs (#3207)

This commit is contained in:
Sami Mazouz
2021-12-16 09:30:34 +01:00
committed by GitHub
parent 6a90930373
commit 93e7b446bd
3 changed files with 21 additions and 6 deletions

View File

@@ -52,6 +52,8 @@ export default class ForgotPasswordModal<CustomAttrs extends IForgotPasswordModa
); );
} }
const emailLabel = extractText(app.translator.trans('core.forum.forgot_password.email_placeholder'));
return ( return (
<div className="Modal-body"> <div className="Modal-body">
<div className="Form Form--centered"> <div className="Form Form--centered">
@@ -61,7 +63,8 @@ export default class ForgotPasswordModal<CustomAttrs extends IForgotPasswordModa
className="FormControl" className="FormControl"
name="email" name="email"
type="email" type="email"
placeholder={extractText(app.translator.trans('core.forum.forgot_password.email_placeholder'))} placeholder={emailLabel}
aria-label={emailLabel}
bidi={this.email} bidi={this.email}
disabled={this.loading} disabled={this.loading}
/> />

View File

@@ -57,6 +57,9 @@ export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginMod
fields() { fields() {
const items = new ItemList(); const items = new ItemList();
const identificationLabel = extractText(app.translator.trans('core.forum.log_in.username_or_email_placeholder'));
const passwordLabel = extractText(app.translator.trans('core.forum.log_in.password_placeholder'));
items.add( items.add(
'identification', 'identification',
<div className="Form-group"> <div className="Form-group">
@@ -64,7 +67,8 @@ export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginMod
className="FormControl" className="FormControl"
name="identification" name="identification"
type="text" type="text"
placeholder={extractText(app.translator.trans('core.forum.log_in.username_or_email_placeholder'))} placeholder={identificationLabel}
aria-label={identificationLabel}
bidi={this.identification} bidi={this.identification}
disabled={this.loading} disabled={this.loading}
/> />
@@ -80,7 +84,8 @@ export default class LogInModal<CustomAttrs extends ILoginModalAttrs = ILoginMod
name="password" name="password"
type="password" type="password"
autocomplete="current-password" autocomplete="current-password"
placeholder={extractText(app.translator.trans('core.forum.log_in.password_placeholder'))} placeholder={passwordLabel}
aria-label={passwordLabel}
bidi={this.password} bidi={this.password}
disabled={this.loading} disabled={this.loading}
/> />

View File

@@ -68,6 +68,10 @@ export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignup
fields() { fields() {
const items = new ItemList(); const items = new ItemList();
const usernameLabel = extractText(app.translator.trans('core.forum.sign_up.username_placeholder'));
const emailLabel = extractText(app.translator.trans('core.forum.sign_up.email_placeholder'));
const passwordLabel = extractText(app.translator.trans('core.forum.sign_up.password_placeholder'));
items.add( items.add(
'username', 'username',
<div className="Form-group"> <div className="Form-group">
@@ -75,7 +79,8 @@ export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignup
className="FormControl" className="FormControl"
name="username" name="username"
type="text" type="text"
placeholder={extractText(app.translator.trans('core.forum.sign_up.username_placeholder'))} placeholder={usernameLabel}
aria-label={usernameLabel}
bidi={this.username} bidi={this.username}
disabled={this.loading || this.isProvided('username')} disabled={this.loading || this.isProvided('username')}
/> />
@@ -90,7 +95,8 @@ export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignup
className="FormControl" className="FormControl"
name="email" name="email"
type="email" type="email"
placeholder={extractText(app.translator.trans('core.forum.sign_up.email_placeholder'))} placeholder={emailLabel}
aria-label={emailLabel}
bidi={this.email} bidi={this.email}
disabled={this.loading || this.isProvided('email')} disabled={this.loading || this.isProvided('email')}
/> />
@@ -107,7 +113,8 @@ export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignup
name="password" name="password"
type="password" type="password"
autocomplete="new-password" autocomplete="new-password"
placeholder={extractText(app.translator.trans('core.forum.sign_up.password_placeholder'))} placeholder={passwordLabel}
aria-label={passwordLabel}
bidi={this.password} bidi={this.password}
disabled={this.loading} disabled={this.loading}
/> />