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

Add "Skip to content" to improve accessibility

GitOrigin-RevId: 43368a65057656bdea10b6be3c598d68bd8e2d40
This commit is contained in:
Jessica Lawshe
2021-07-27 08:23:05 -05:00
committed by Copybot
parent c5d45c1bac
commit bb882c697c
37 changed files with 65 additions and 37 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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")}.

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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