Merge pull request #4288 from overleaf/jel-skip-to-content

Add "Skip to content" to improve accessibility

GitOrigin-RevId: 43368a65057656bdea10b6be3c598d68bd8e2d40

services/web/app/views/beta_program/opt_in.pug

@@ -1,7 +1,7 @@
 extends ../layout
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container.beta-opt-in-wrapper
 			.row
 				.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2

services/web/app/views/general/400.pug

@@ -5,7 +5,7 @@ block vars
 
 block body
 	body.full-height
-		main.content.content-alt.full-height
+		main.content.content-alt.full-height#main-content
 			.container.full-height
 				.error-container.full-height
 					.error-details

services/web/app/views/general/404.pug

@@ -1,7 +1,7 @@
 extends ../layout
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.error-container
 				.error-details

services/web/app/views/general/500.pug

@@ -5,7 +5,7 @@ block vars
 
 block body
 	body.full-height
-		main.content.content-alt.full-height
+		main.content.content-alt.full-height#main-content
 			.container.full-height
 				.error-container.full-height
 					.error-details

services/web/app/views/general/account-merge-error.pug

@@ -1,7 +1,7 @@
 extends ../layout
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-6.col-md-offset-3

services/web/app/views/general/closed.pug

@@ -1,7 +1,7 @@
 extends ../layout
 
 block content
-	main.content
+	main.content#main-content
 		.container
 			.row
 				.col-md-8.col-md-offset-2.text-center

services/web/app/views/general/post-gateway.pug

@@ -3,6 +3,7 @@ extends ../layout
 block vars
 	- var suppressNavbar = true
 	- var suppressFooter = true
+	- var suppressSkipToContent = true
 
 block content
 	script(type="template", id="gateway-data")!= StringHelper.stringifyJsonForScript({ params: form_data })

services/web/app/views/general/unsupported-browser.pug

@@ -5,7 +5,7 @@ block vars
 
 block body
 	body.full-height
-		main.content.content-alt.full-height
+		main.content.content-alt.full-height#main-content
 			.container.full-height
 				.error-container.full-height
 					.error-details

services/web/app/views/layout.pug

@@ -107,6 +107,8 @@ html(
 		if(settings.recaptcha && settings.recaptcha.siteKeyV3)
 			script(type="text/javascript", nonce=scriptNonce, src="https://www.recaptcha.net/recaptcha/api.js?render="+settings.recaptcha.siteKeyV3)
 
+		if (typeof(suppressSkipToContent) == "undefined")
+			a(class="skip-to-content" href="#main-content") #{translate('skip_to_content')}
 
 		if (typeof(suppressNavbar) == "undefined")
 			include layout/navbar

services/web/app/views/project/editor.pug

@@ -3,6 +3,7 @@ extends ../layout
 block vars
 	- var suppressNavbar = true
 	- var suppressFooter = true
+	- var suppressSkipToContent = true
 	- metadata.robotsNoindexNofollow = true
 
 block _headLinks

services/web/app/views/project/importing.pug

@@ -3,6 +3,7 @@ extends ../layout
 block vars
 	- var suppressNavbar = true
 	- var suppressFooter = true
+	- var suppressSkipToContent = true
 	- metadata.robotsNoindexNofollow = true
 
 block content

services/web/app/views/project/invite/not-valid.pug

@@ -1,7 +1,7 @@
 extends ../../layout
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-8.col-md-offset-2
@@ -15,4 +15,4 @@ block content
 						.row.text-center.actions
 							.col-md-12
 								a.btn.btn-info(href="/project") #{translate("back_to_your_projects")}
-							
+							

services/web/app/views/project/invite/show.pug

@@ -1,7 +1,7 @@
 extends ../../layout
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-8.col-md-offset-2

services/web/app/views/project/list.pug

@@ -16,7 +16,7 @@ block append meta
 
 block content
 
-	main.content.content-alt.project-list-page(
+	main.content.content-alt.project-list-page#main-content(
 		ng-controller="ProjectPageController"
 		role="main"
 	)

services/web/app/views/subscriptions/canceled_subscription.pug

@@ -1,7 +1,7 @@
 extends ../layout
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-8.col-md-offset-2

services/web/app/views/subscriptions/dashboard.pug

@@ -14,7 +14,7 @@ block append meta
 		meta(name="ol-recomendedCurrency" content=personalSubscription.recurly.currency)
 
 block content
-	main.content.content-alt(ng-cloak)
+	main.content.content-alt#main-content(ng-cloak)
 		.container
 			.row
 				.col-md-8.col-md-offset-2

services/web/app/views/subscriptions/new.pug

@@ -9,7 +9,7 @@ block head-scripts
 	script(type="text/javascript", nonce=scriptNonce, src="https://js.recurly.com/v4/recurly.js")
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container(ng-controller="NewSubscriptionController" ng-cloak)
 			.row.card-group
 				.col-md-5.col-md-push-4

services/web/app/views/subscriptions/plans.pug

@@ -11,7 +11,7 @@ block append meta
 	meta(name="ol-groupPlans" data-type="json" content=groupPlans)
 
 block content
-	.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.user-notifications
 				ul.list-unstyled(ng-cloak)
@@ -21,7 +21,7 @@ block content
 								span To help you work from home throughout 2021, we're providing discounted plans and special initiatives.
 							.notification-action
 								a.btn.btn-sm.btn-info(href="https://www.overleaf.com/events/wfh2021" event-tracking="Event-Pages" event-tracking-trigger="click" event-tracking-ga="WFH-Offer-Click" event-tracking-label="Plans-Banner") Upgrade
-		main.content-page
+		.content-page
 			.plans(ng-controller="PlansController")
 				.container(ng-cloak)
 					.row

services/web/app/views/subscriptions/successful_subscription.pug

@@ -1,7 +1,7 @@
 extends ../layout
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-8.col-md-offset-2

services/web/app/views/subscriptions/team/invite.pug

@@ -5,7 +5,7 @@ block append meta
 	meta(name="ol-inviteToken" content=inviteToken)
 
 block content
-	main.content.content-alt.team-invite
+	main.content.content-alt.team-invite#main-content
 		.container
 			.row
 				.col-md-8.col-md-offset-2

services/web/app/views/subscriptions/upgradeToAnnual.pug

@@ -2,7 +2,7 @@ extends ../layout
 
 block content
 
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container(ng-controller="AnnualUpgradeController")
 			.row(ng-cloak)
 				.col-md-6.col-md-offset-3
@@ -22,5 +22,3 @@ block content
 
 						div(ng-show="upgradeComplete")
 							h3  #{translate("annual_billing_enabled")}, #{translate("thank_you")}.
-
-

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

@@ -1,7 +1,7 @@
 extends ../layout
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4

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

@@ -4,7 +4,7 @@ block vars
 	- metadata = { viewport: true }
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4

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

@@ -5,7 +5,7 @@ block vars
 
 block content
 	.content.content-alt
-		main.login-register-container
+		main.login-register-container#main-content
 			.card.login-register-card
 				.login-register-header
 					h1.login-register-header-heading #{translate("log_out")}

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

@@ -4,7 +4,7 @@ block vars
 	- metadata = { viewport: true }
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4

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

@@ -16,7 +16,7 @@ block content
 			data-badge="inline"
 		)
 
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4

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

@@ -14,7 +14,7 @@ block content
 			data-badge="inline"
 		)
 
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-sm-12.col-md-6.col-md-offset-3

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

@@ -1,7 +1,7 @@
 extends ../layout
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.registration_message

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

@@ -1,7 +1,7 @@
 extends ../layout
 
 block content
-	main.content
+	main.content#main-content
 		.container
 			.row
 				.col-md-8.col-md-offset-2.text-center
@@ -10,4 +10,4 @@ block content
 					p
 						a(href="/")
 							i.fa.fa-arrow-circle-o-left(aria-hidden="true")
-							|  #{translate("take_me_home")}
+							|  #{translate("take_me_home")}

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

@@ -6,7 +6,7 @@ block append meta
 
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2

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

@@ -4,7 +4,7 @@ block append meta
 	meta(name="ol-passwordStrengthOptions" data-type="json" content=settings.passwordStrengthOptions)
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4

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

@@ -8,7 +8,7 @@ block append meta
 	meta(name="ol-thirdPartyIds", data-type="json", content=thirdPartyIds)
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-12.col-lg-10.col-lg-offset-1

services/web/app/views/user_membership/index.pug

@@ -6,7 +6,7 @@ block append meta
 	meta(name="ol-groupSize", data-type="json", content=groupSize)
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-10.col-md-offset-1

services/web/app/views/user_membership/new.pug

@@ -1,7 +1,7 @@
 extends ../layout
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-10.col-md-offset-1

services/web/frontend/stylesheets/components/navbar.less

@@ -585,3 +585,27 @@
     padding: @navbar-default-padding-v 0;
   }
 }
+
+// Accessibility
+.skip-to-content {
+  color: @navbar-default-link-color;
+  background-color: @navbar-default-link-bg;
+  border: 2px solid transparent;
+  border-radius: @navbar-btn-border-radius;
+  font-size: @navbar-btn-font-size;
+  font-weight: @navbar-btn-font-weight;
+  left: @navbar-brand-width + @padding-lg;
+  line-height: @navbar-btn-line-height;
+  padding: @navbar-btn-padding;
+  position: absolute;
+  top: -200px;
+  z-index: @zindex-navbar + 1;
+
+  &:focus {
+    background-color: @navbar-default-link-hover-bg;
+    border: 2px solid @navbar-default-link-hover-color;
+    color: @white;
+    text-decoration: none;
+    top: @navbar-default-padding-v;
+  }
+}

services/web/locales/en.json

@@ -1478,5 +1478,6 @@
   "page_current": "Page __page__, Current Page",
   "go_page": "Go to page __page__",
   "pagination_navigation": "Pagination Navigation",
-  "can_now_relink_dropbox": "You can now <0>relink your Dropbox account</0>."
+  "can_now_relink_dropbox": "You can now <0>relink your Dropbox account</0>.",
+  "skip_to_content": "Skip to content"
 }

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

@@ -4,7 +4,7 @@ block append meta
 	meta(name="ol-passwordStrengthOptions" data-type="json" content=settings.passwordStrengthOptions)
 
 block content
-	main.content.content-alt
+	main.content.content-alt#main-content
 		.container
 			.row
 				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4