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

[web] Improve a11y of form-messages

GitOrigin-RevId: 36360bc188f9a582e891d50328a6f27b414dce2a

services/web/app/views/_mixins/formMessages.pug

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

services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug

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

services/web/app/views/layout-marketing.pug

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

services/web/app/views/user/confirm_email.pug

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

services/web/app/views/user/login.pug

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

services/web/app/views/user/logout.pug

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

services/web/app/views/user/passwordReset.pug

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

services/web/app/views/user/reconfirm.pug

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

services/web/app/views/user/setPassword.pug

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

services/web/modules/launchpad/app/views/launchpad.pug

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

services/web/modules/user-activate/app/views/user/activate.pug

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