github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5199 from overleaf/jk-de-ng-form-messages-role

Browse source 
[web] Improve a11y of form-messages

GitOrigin-RevId: 36360bc188f9a582e891d50328a6f27b414dce2a
This commit is contained in:
June Kelly 2021-09-24 10:22:37 +01:00 committed by Copybot
parent 5900dc3b4a
commit 5141f7b452
11 changed files with 49 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
services/web/app/views/_mixins/formMessages.pug Normal file
View file

@ -0,0 +1,31 @@
mixin formMessages()
div(
data-ol-form-messages='',
role="alert"
)
mixin customFormMessage(key, kind)
if kind === 'success'
div.alert.alert-success(
hidden,
data-ol-custom-form-message=key,
role="alert"
aria-live="polite"
)
block
else if kind === 'danger'
div.alert.alert-danger(
hidden,
data-ol-custom-form-message=key,
role="alert"
aria-live="assertive"
)
block
else
div.alert.alert-warning(
hidden,
data-ol-custom-form-message=key,
role="alert"
aria-live="polite"
)
block

2
services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug
View file

@ -5,7 +5,7 @@ mixin reconfirmAffiliationNotification-marketing(userEmail, location)
) )
input(name="_csrf" type="hidden" value=csrfToken) input(name="_csrf" type="hidden" value=csrfToken)
input(name="email" type="hidden" value=userEmail.email) input(name="email" type="hidden" value=userEmail.email)
div(data-ol-form-messages) +formMessages()
.reconfirm-notification .reconfirm-notification
div(data-ol-not-sent style="width:100%;") div(data-ol-not-sent style="width:100%;")

2
services/web/app/views/layout-marketing.pug
View file

@ -1,3 +1,5 @@
include ./_mixins/formMessages
doctype html doctype html
html( html(
lang=(currentLngCode || 'en') lang=(currentLngCode || 'en')

2
services/web/app/views/user/confirm_email.pug
View file

@ -20,7 +20,7 @@ block content
input(type="hidden", name="token", value=token) input(type="hidden", name="token", value=token)
div(data-ol-not-sent) div(data-ol-not-sent)
div(data-ol-form-messages) +formMessages()
.actions .actions
button.btn-primary.btn.btn-block( button.btn-primary.btn.btn-block(

2
services/web/app/views/user/login.pug
View file

@ -13,7 +13,7 @@ block content
h1 #{translate("log_in")} h1 #{translate("log_in")}
form(data-ol-async-form, name="loginForm", action='/login', method="POST") form(data-ol-async-form, name="loginForm", action='/login', method="POST")
input(name='_csrf', type='hidden', value=csrfToken) input(name='_csrf', type='hidden', value=csrfToken)
div(data-ol-form-messages) +formMessages()
.form-group .form-group
input.form-control( input.form-control(
type='email', type='email',

2
services/web/app/views/user/logout.pug
View file

@ -17,7 +17,7 @@ block content
data-ol-auto-submit data-ol-auto-submit
) )
input(name='_csrf', type='hidden', value=csrfToken) input(name='_csrf', type='hidden', value=csrfToken)
div(data-ol-form-messages) +formMessages()
.actions .actions
button#submit-logout.btn-primary.btn.btn-block( button#submit-logout.btn-primary.btn.btn-block(
data-ol-disabled-inflight, data-ol-disabled-inflight,

2
services/web/app/views/user/passwordReset.pug
View file

@ -33,7 +33,7 @@ block content
captcha=(showCaptcha ? '' : false), captcha=(showCaptcha ? '' : false),
captcha-action-name=(showCaptcha ? "passwordReset" : false), captcha-action-name=(showCaptcha ? "passwordReset" : false),
) )
div(data-ol-form-messages) +formMessages()
input(type="hidden", name="_csrf", value=csrfToken) input(type="hidden", name="_csrf", value=csrfToken)
.form-group .form-group

2
services/web/app/views/user/reconfirm.pug
View file

@ -33,7 +33,7 @@ block content
captcha=(showCaptcha ? '' : false), captcha=(showCaptcha ? '' : false),
captcha-action-name=(showCaptcha ? "passwordReset" : false) captcha-action-name=(showCaptcha ? "passwordReset" : false)
) )
div(data-ol-form-messages) +formMessages()
input(type="hidden", name="_csrf", value=csrfToken) input(type="hidden", name="_csrf", value=csrfToken)
.form-group .form-group

16
services/web/app/views/user/setPassword.pug
View file

@ -15,25 +15,15 @@ block content
method="POST", method="POST",
) )
div(data-ol-not-sent) div(data-ol-not-sent)
div(data-ol-form-messages) +formMessages()
div.alert.alert-danger( +customFormMessage('token-expired', 'danger')
hidden
role="alert"
aria-live="assertive"
data-ol-custom-form-message='token-expired'
)
| #{translate('password_reset_token_expired')} | #{translate('password_reset_token_expired')}
br br
a(href="/user/password/reset") a(href="/user/password/reset")
| #{translate('request_new_password_reset_email')} | #{translate('request_new_password_reset_email')}
div.alert.alert-danger( +customFormMessage('invalid-password', 'danger')
hidden
role="alert"
aria-live="assertive"
data-ol-custom-form-message='invalid-password'
)
| #{translate('invalid_password')} | #{translate('invalid_password')}
div.alert.alert-success( div.alert.alert-success(

8
services/web/modules/launchpad/app/views/launchpad.pug
View file

@ -63,7 +63,7 @@ block content
method="POST" method="POST"
) )
input(name='_csrf', type='hidden', value=csrfToken) input(name='_csrf', type='hidden', value=csrfToken)
div(data-ol-form-messages) +formMessages()
.form-group .form-group
label(for='email') #{translate("email")} label(for='email') #{translate("email")}
input.form-control( input.form-control(
@ -102,7 +102,7 @@ block content
method="POST" method="POST"
) )
input(name='_csrf', type='hidden', value=csrfToken) input(name='_csrf', type='hidden', value=csrfToken)
div(data-ol-form-messages) +formMessages()
.form-group .form-group
label(for='email') #{translate("email")} label(for='email') #{translate("email")}
input.form-control( input.form-control(
@ -133,7 +133,7 @@ block content
method="POST" method="POST"
) )
input(name='_csrf', type='hidden', value=csrfToken) input(name='_csrf', type='hidden', value=csrfToken)
div(data-ol-form-messages) +formMessages()
.form-group .form-group
label(for='email') #{translate("email")} label(for='email') #{translate("email")}
input.form-control( input.form-control(
@ -204,7 +204,7 @@ block content
span(hidden data-ol-inflight="pending") #{translate("sending")}… span(hidden data-ol-inflight="pending") #{translate("sending")}…
p p
div(data-ol-form-messages) +formMessages()

16
services/web/modules/user-activate/app/views/user/activate.pug
View file

@ -17,22 +17,12 @@ block content
action="/user/password/set", action="/user/password/set",
method="POST", method="POST",
) )
div(data-ol-form-messages) +formMessages()
div.alert.alert-danger( +customFormMessage('token-expired', 'danger')
hidden
role="alert"
aria-live="assertive"
data-ol-custom-form-message='token-expired'
)
| #{translate("activation_token_expired")} | #{translate("activation_token_expired")}
div.alert.alert-danger( +customFormMessage('invalid-password', 'danger')
hidden
role="alert"
aria-live="assertive"
data-ol-custom-form-message='invalid-password'
)
| #{translate('invalid_password')} | #{translate('invalid_password')}
input(name='_csrf', type='hidden', value=csrfToken) input(name='_csrf', type='hidden', value=csrfToken)