Merge pull request #1142 from sharelatex/jel-img-alt-and-icon-alt-a11y

Image alt tags and accessible icons

GitOrigin-RevId: 58f0609682c0dbeec95cad4e234e3f94b7b3c004

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

@@ -7,12 +7,17 @@ mixin faq_search(headerText, headerClass)
 				.form-group.has-feedback.has-feedback-left
 					.col-sm-12
 						input.form-control(type='text', ng-model='searchQueryText', ng-keyup='search()', placeholder="Search help library....")
-						i.fa.fa-search.form-control-feedback-left
+						i.fa.fa-search.form-control-feedback-left(aria-hidden)
 						i.fa.fa-times.form-control-feedback(
 							ng-click="clearSearchText()",
 							style="cursor: pointer;",
 							ng-show="searchQueryText.length > 0"
+							aria-hidden
 						)
+						button.sr-only(
+							ng-click="clearSearchText()",
+							ng-show="searchQueryText.length > 0"
+						) #{translate('clear_search')}
 
 			.row
 				.col-md-12(ng-cloak)

services/web/app/views/layout/footer.pug

@@ -13,9 +13,10 @@ footer.site-footer
 							data-toggle="dropdown",
 							aria-haspopup="true",
 							aria-expanded="false",
+							aria-label="Select " + translate('language')
 							tooltip=translate('language')
 						)
-							figure(class="sprite-icon sprite-icon-lang sprite-icon-"+currentLngCode)
+							figure(class="sprite-icon sprite-icon-lang sprite-icon-"+currentLngCode alt=translate(currentLngCode))
 
 						ul.dropdown-menu(role="menu")
 							li.dropdown-header #{translate("language")}
@@ -23,7 +24,7 @@ footer.site-footer
 								if !subdomainDetails.hide
 									li.lngOption
 										a.menu-indent(href=subdomainDetails.url+currentUrl)
-											figure(class="sprite-icon sprite-icon-lang sprite-icon-"+subdomainDetails.lngCode)
+											figure(class="sprite-icon sprite-icon-lang sprite-icon-"+subdomainDetails.lngCode alt=translate(subdomainDetails.lngCode))
 											|  #{translate(subdomainDetails.lngCode)}
 										//- img(src="/img/flags/24/.png")
 				each item in nav.left_footer

services/web/app/views/layout/navbar.pug

@@ -1,8 +1,8 @@
 nav.navbar.navbar-default.navbar-main
 	.container-fluid
 		.navbar-header
-			button.navbar-toggle(ng-init="navCollapsed = true", ng-click="navCollapsed = !navCollapsed", ng-class="{active: !navCollapsed}")
-				i.fa.fa-bars
+			button.navbar-toggle(ng-init="navCollapsed = true", ng-click="navCollapsed = !navCollapsed", ng-class="{active: !navCollapsed}", aria-label="Toggle " + translate('navigation'))
+				i.fa.fa-bars(aria-hidden)
 			if settings.nav.custom_logo
 				a(href='/', aria-label=settings.appName, style='background-image:url("'+settings.nav.custom_logo+'")').navbar-brand
 			else if (nav.title)

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

@@ -93,7 +93,8 @@ block content
 									button.btn-link.pull-right.project-list-sidebar-v2-pane-toggle(
 										ng-click="toggle()"
 									)
-										i.fa.fa-fw(ng-class="{ 'fa-chevron-up': !visible, 'fa-close': visible }")
+										i.fa.fa-fw(ng-class="{ 'fa-chevron-up': !visible, 'fa-close': visible }" aria-hidden)
+										span.sr-only Toggle welcome to #{settings.appName} message
 									| Welcome to Overleaf v2!
 								div(ng-show="visible") #[a(href="https://www.overleaf.com/help/342-overleaf-v2-faq") Find out more].
 								if userIsFromOLv1(user)

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

@@ -39,7 +39,9 @@ div(class=titleClasses)
 			tooltip=translate("link_sharing")
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
+			aria-hidden
 		)
+		span.sr-only #{translate("link_sharing")}
 
 div(class=lastUpdatedClasses)
 	if settings.overleaf
@@ -53,52 +55,59 @@ if settings.overleaf
 			ng-if="!project.isTableActionInflight"
 		)
 			button.btn.btn-link.action-btn(
+				aria-label=translate('copy'),
 				tooltip=translate('copy'),
 				tooltip-placement="top",
 				tooltip-append-to-body="true",
 				ng-click="clone($event)"
 			)
-				i.icon.fa.fa-files-o
+				i.icon.fa.fa-files-o(aria-hidden)
 			button.btn.btn-link.action-btn(
+				aria-label=translate('download'),
 				tooltip=translate('download'),
 				tooltip-placement="top",
 				tooltip-append-to-body="true",
 				ng-click="download($event)"
 			)
-				i.icon.fa.fa-cloud-download
+				i.icon.fa.fa-cloud-download(aria-hidden)
 			button.btn.btn-link.action-btn(
 				ng-if="!project.archived && isOwner()"
+				aria-label=translate('archive'),
 				tooltip=translate('archive'),
 				tooltip-placement="top",
 				tooltip-append-to-body="true",
 				ng-click="archiveOrLeave($event)"
 			)
-				i.icon.fa.fa-inbox
+				i.icon.fa.fa-inbox(aria-hidden)
 			button.btn.btn-link.action-btn(
 				ng-if="!project.archived && !isOwner()"
+				aria-label=translate('leave'),
 				tooltip=translate('leave'),
 				tooltip-placement="top",
 				tooltip-append-to-body="true",
 				ng-click="archiveOrLeave($event)"
 			)
-				i.icon.fa.fa-sign-out
+				i.icon.fa.fa-sign-out(aria-hidden)
 			button.btn.btn-link.action-btn(
 				ng-if="project.archived"
+				aria-label=translate('unarchive'),
 				tooltip=translate('unarchive'),
 				tooltip-placement="top",
 				tooltip-append-to-body="true",
 				ng-click="restore($event)"
 			)
-				i.icon.fa.fa-reply
+				i.icon.fa.fa-reply(aria-hidden)
 			button.btn.btn-link.action-btn(
 				ng-if="project.archived && isOwner()"
+				aria-label=translate('delete_forever'),
 				tooltip=translate('delete_forever'),
 				tooltip-placement="top",
 				tooltip-append-to-body="true",
 				ng-click="deleteProject($event)"
 			)
-				i.icon.fa.fa-trash
+				i.icon.fa.fa-trash(aria-hidden)
 		div(
 			ng-if="project.isTableActionInflight"
+			aria-label=translate('processing')
 		)
-			i.fa.fa-spinner.fa-spin
+			i.fa.fa-spinner.fa-spin(aria-hidden)

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

@@ -16,7 +16,7 @@ span(ng-controller="NotificationsController").userNotifications
 									a.pull-right.btn.btn-sm.btn-info(href, ng-click="accept()", ng-disabled="notification.inflight")
 										span(ng-show="!notification.inflight") #{translate("join_project")}
 										span(ng-show="notification.inflight")
-											i.fa.fa-fw.fa-spinner.fa-spin
+											i.fa.fa-fw.fa-spinner.fa-spin(aria-hidden)
 											|  
 											| #{translate("joining")}...
 								.notification_body(ng-show="notification.accepted")
@@ -82,6 +82,6 @@ span(ng-controller="NotificationsController").userNotifications
 						.notification_inner(
 							ng-if="userEmail.confirmationInflight"
 						)
-							i.fa.fa-spinner.fa-spin
+							i.fa.fa-spinner.fa-spin(aria-hidden)
 							|
 							| #{translate('resending_confirmation_email')}…

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

@@ -13,12 +13,17 @@
 					focus-on='search:clear',
 					ng-keyup="searchProjects()"
 				)
-				i.fa.fa-search.form-control-feedback-left
+				i.fa.fa-search.form-control-feedback-left(aria-hidden)
 				i.fa.fa-times.form-control-feedback(
 					ng-click="clearSearchText()",
 					style="cursor: pointer;",
 					ng-show="searchText.value.length > 0"
+					aria-hidden
 				)
+				button.sr-only(
+					ng-click="clearSearchText()"
+					ng-show="searchText.value.length > 0"
+				) #{translate('clear_search')}
 			//- i.fa.fa-remove
 
 		.project-tools(ng-cloak)
@@ -26,22 +31,24 @@
 				.btn-group(ng-hide="selectedProjects.length < 1")
 					a.btn.btn-default(
 						href,
+						aria-label=translate('download'),
 						tooltip=translate('download'),
 						tooltip-placement="bottom",
 						tooltip-append-to-body="true",
 						ng-click="downloadSelectedProjects()"
 					)
-						i.fa.fa-cloud-download
+						i.fa.fa-cloud-download(aria-hidden)
 					- var archiveButtonString = settings.overleaf ? translate("archive") : translate("delete")
 					- var archiveButtonIcon = settings.overleaf ? "fa-inbox" : "fa-trash-o"
 					a.btn.btn-default(
 						href,
+						aria-label=`{{ isArchiveableProjectSelected ? '${archiveButtonString}' : '${translate("leave")}' }}`,
 						tooltip=`{{ isArchiveableProjectSelected ? '${archiveButtonString}' : '${translate("leave")}' }}`,
 						tooltip-placement="bottom",
 						tooltip-append-to-body="true",
 						ng-click="openArchiveProjectsModal()"
 					)
-						i.fa(ng-class=`isArchiveableProjectSelected ? '${archiveButtonIcon}' : 'fa-sign-out'`)
+						i.fa(ng-class=`isArchiveableProjectSelected ? '${archiveButtonIcon}' : 'fa-sign-out'` aria-hidden)
 
 				.btn-group.dropdown(ng-hide="selectedProjects.length < 1", dropdown)
 					a.btn.btn-default.dropdown-toggle(
@@ -55,6 +62,7 @@
 						i.fa.fa-folder-open-o
 						|  
 						span.caret
+						span.sr-only #{translate('add_to_folders')}
 					ul.dropdown-menu.dropdown-menu-right.js-tags-dropdown-menu.tags-dropdown-menu(
 						role="menu"
 						ng-controller="TagListController"
@@ -73,6 +81,7 @@
 										'fa-minus-square-o': areSelectedProjectsInTag == 'partial'\
 									}"
 								)
+								span.sr-only Add or remove project from tag
 								|  {{tag.name}}
 						li.divider
 						li
@@ -141,13 +150,16 @@
 								aria-label=translate('select_all_projects')
 							)
 							span.header.clickable(ng-click="changePredicate('name')") #{translate("title")}
-								i.tablesort.fa(ng-class="getSortIconClass('name')")
+								i.tablesort.fa(ng-class="getSortIconClass('name')" aria-hidden)
+							button.sr-only(ng-click="changePredicate('name')") Sort by #{translate("title")}
 						.col-xs-2
 							span.header.clickable(ng-click="changePredicate('accessLevel')") #{translate("owner")}
-								i.tablesort.fa(ng-class="getSortIconClass('accessLevel')")
+								i.tablesort.fa(ng-class="getSortIconClass('accessLevel')" aria-hidden)
+							button.sr-only(ng-click="changePredicate('accessLevel')") Sort by #{translate("owner")}
 						div(class=lastUpdatedClasses)
 							span.header.clickable(ng-click="changePredicate('lastUpdated')") #{translate("last_modified")}
-								i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')")
+								i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')" aria-hidden)
+							button.sr-only(ng-click="changePredicate('accessLevel')") Sort by #{translate("last_modified")}
 						if settings.overleaf
 							.hidden-xs.col-sm-3.col-md-2.action-btn-row-header
 								span.header #{translate("actions")}

services/web/app/views/project/list/side-bar.pug

@@ -52,7 +52,7 @@
 			h2 #{translate("tags_slash_folders")}
 		li.tag(ng-cloak)
 			a.tag-name(href, ng-click="openNewTagModal()")
-				i.fa.fa-fw.fa-plus
+				i.fa.fa-fw.fa-plus(aria-hidden)
 				span.name #{translate("new_folder")}
 		li.tag(
 			ng-repeat="tag in tags | orderBy:'name'",
@@ -66,6 +66,7 @@
 						'fa-folder-open-o': tag.selected,\
 						'fa-folder-o': !tag.selected\
 					}"
+					aria-hidden
 				)
 				span.name {{tag.name}} 
 					span.subdued  ({{tag.project_ids.length}})
@@ -107,7 +108,7 @@
 .row-spaced(ng-if="projects.length == 0", ng-cloak)
 	.first-project
 		div
-			i.fa.fa-arrow-up.fa-2x
+			i.fa.fa-arrow-up.fa-2x(aria-hidden)
 		div
 			strong #{translate("create_your_first_project")}
 			

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

@@ -32,9 +32,11 @@ mixin table_premium
 						if feature.value == 'str'
 							| #{plan}
 						else if plan
-							i.fa.fa-check
+							i.fa.fa-check(aria-hidden)
+							span.sr-only Feature included
 						else
-							i.fa.fa-times
+							i.fa.fa-times(aria-hidden)
+							span.sr-only Feature not included
 
 		tr
 			td
@@ -51,9 +53,11 @@ mixin table_cell_student(feature)
 	if feature.value == 'str'
 		| #{feature.student}
 	else if feature.student
-		i.fa.fa-check
+		i.fa.fa-check(aria-hidden)
+		span.sr-only Feature included
 	else
-		i.fa.fa-times
+		i.fa.fa-times(aria-hidden)
+		span.sr-only Feature not included
 
 mixin table_student
 	table.card.plans-table
@@ -86,9 +90,11 @@ mixin table_student
 					if feature.value == 'str'
 						| #{feature.plans.free}
 					else if feature.plans.free
-						i.fa.fa-check
+						i.fa.fa-check(aria-hidden)
+						span.sr-only Feature included
 					else
-						i.fa.fa-times
+						i.fa.fa-times(aria-hidden)
+						span.sr-only Feature included
 				td
 					+table_cell_student(feature)
 				td

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

@@ -42,7 +42,7 @@ block content
 				.col-md-8.col-md-offset-2
 					if saved_billing_details
 						.alert.alert-success
-							i.fa.fa-check
+							i.fa.fa-check(aria-hidden)
 							|  
 							| #{translate("your_billing_details_were_saved")}
 					.card(ng-if="view == 'overview'")

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

@@ -64,17 +64,19 @@ block content
 												ng-click="setPaymentMethod('credit_card');"
 												ng-class="paymentMethod.value === 'credit_card' ? 'payment-method-toggle-switch-selected' : ''"
 											)
-												i.fa.fa-cc-mastercard.fa-2x
+												i.fa.fa-cc-mastercard.fa-2x(aria-hidden)
 												span  
-												i.fa.fa-cc-visa.fa-2x
+												i.fa.fa-cc-visa.fa-2x(aria-hidden)
 												span  
-												i.fa.fa-cc-amex.fa-2x
+												i.fa.fa-cc-amex.fa-2x(aria-hidden)
+												span.sr-only Pay with Mastercard, Visa, or Amex
 											a.payment-method-toggle-switch(
 												href
 												ng-click="setPaymentMethod('paypal');"
 												ng-class="paymentMethod.value === 'paypal' ? 'payment-method-toggle-switch-selected' : ''"
 											)
-												i.fa.fa-cc-paypal.fa-2x
+												i.fa.fa-cc-paypal.fa-2x(aria-hidden)
+												span.sr-only Pay with PayPal
 										
 										.alert.alert-warning.small(ng-show="genericError")
 											strong {{genericError}}
@@ -200,7 +202,8 @@ block content
 													ng-disabled="processing  || !isFormValid(simpleCCForm);" 
 												) 
 													span(ng-show="processing") 
-														i.fa.fa-spinner.fa-spin
+														i.fa.fa-spinner.fa-spin(aria-hidden)
+														span.sr-only #{translate('processing')}
 														|  
 													span(ng-if="paymentMethod.value === 'credit_card'")
 														| {{ monthlyBilling ? '#{translate("upgrade_cc_btn")}' : '#{translate("upgrade_now")}'}}

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

@@ -80,10 +80,14 @@ block content
 
 				.row.row-spaced-large.text-centered
 					.col-xs-12
-						i.fa.fa-cc-mastercard.fa-2x  
-						i.fa.fa-cc-visa.fa-2x  
-						i.fa.fa-cc-amex.fa-2x  
-						i.fa.fa-cc-paypal.fa-2x  
+						i.fa.fa-cc-mastercard.fa-2x(aria-hidden)  
+						span.sr-only Mastercard accepted
+						i.fa.fa-cc-visa.fa-2x(aria-hidden)  
+						span.sr-only Visa accepted
+						i.fa.fa-cc-amex.fa-2x(aria-hidden)  
+						span.sr-only Amex accepted
+						i.fa.fa-cc-paypal.fa-2x(aria-hidden)  
+						span.sr-only Paypal accepted
 						div.text-centered #{translate('change_plans_any_time')}<br/> #{translate('billed_after_x_days', {len:'{{trial_len}}'})}
 
 				.row.row-spaced-large

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

@@ -23,6 +23,6 @@ block content
 								.alert.alert-success(ng-show="confirmEmailForm.response.success")
 									| Thank you, your email is now confirmed
 							p.text-center(ng-show="!confirmEmailForm.response.success && !confirmEmailForm.response.error")
-								i.fa.fa-fw.fa-spin.fa-spinner
+								i.fa.fa-fw.fa-spin.fa-spinner(aria-hidden)
 								| 
 								| Confirming your email...

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

@@ -9,5 +9,5 @@ block content
 						h2 #{translate("restricted_no_permission")}
 					p
 						a(href="/")
-							i.fa.fa-arrow-circle-o-left
+							i.fa.fa-arrow-circle-o-left(aria-hidden)
 							|  #{translate("take_me_home")}

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

@@ -172,12 +172,12 @@ block content
 									span(
 										ng-show="unsubscribing"
 									)
-										i.fa.fa-spin.fa-refresh
+										i.fa.fa-spin.fa-refresh(aria-hidden)
 										| #{translate("unsubscribing")}
 									span.text-success(
 										ng-show="!subscribed"
 									)
-										i.fa.fa-check
+										i.fa.fa-check(aria-hidden)
 										| #{translate("unsubscribed")}
 
 									if !settings.overleaf && user.overleaf

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

@@ -88,7 +88,8 @@ form.row(
 							ng-disabled="ui.isMakingRequest"
 							tooltip=translate("remove")
 						)
-							i.fa.fa-fw.fa-trash
+							i.fa.fa-fw.fa-trash(aria-hidden)
+							span.sr-only #{translate("remove")}
 				tr.affiliations-table-highlighted-row(
 					ng-if="!ui.showAddEmailUI && !ui.isMakingRequest"
 				)
@@ -153,20 +154,20 @@ form.row(
 					ng-if="ui.isMakingRequest"
 				)
 					td.text-center(colspan="3", ng-if="ui.isLoadingEmails") 
-						i.fa.fa-fw.fa-spin.fa-refresh
+						i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden)
 						|  #{translate("loading")}...
 					td.text-center(colspan="3", ng-if="ui.isResendingConfirmation") 
-						i.fa.fa-fw.fa-spin.fa-refresh
+						i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden)
 						|  #{translate("sending")}...
 					td.text-center(colspan="3", ng-if="!ui.isLoadingEmails && !ui.isResendingConfirmation") 
-						i.fa.fa-fw.fa-spin.fa-refresh
+						i.fa.fa-fw.fa-spin.fa-refresh(aria-hidden)
 						|  #{translate("saving")}...
 				tr.affiliations-table-error-row(
 					ng-if="ui.hasError"
 				)
 					td.text-center(colspan="3") 
 						div
-							i.fa.fa-fw.fa-exclamation-triangle 
+							i.fa.fa-fw.fa-exclamation-triangle(aria-hidden)
 							span(ng-if="!ui.errorMessage")  #{translate("error_performing_request")}
 							span(ng-if="ui.errorMessage")  {{ui.errorMessage}}
 				

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

@@ -56,8 +56,10 @@ block content
 											span.name {{ user.first_name }} {{ user.last_name }}
 										.col-md-2
 											span.registered
-												i.fa.fa-check.text-success(ng-show="!user.invite")
-												i.fa.fa-times(ng-show="user.invite")
+												i.fa.fa-check.text-success(ng-show="!user.invite" aria-hidden)
+												span.sr-only(ng-show="!user.invite") #{translate('accepted_invite')}
+												i.fa.fa-times(ng-show="user.invite" aria-hidden)
+												span.sr-only(ng-show="user.invite") #{translate('invite_not_accepted')}
 								li(
 									ng-if="users.length == 0",
 									ng-cloak

services/web/app/views/view_templates/bonus_templates.pug

@@ -34,7 +34,7 @@ script(type="text/ng-template", id="BonusLinkToUsModal")
 
 		div(ng-hide="dbState.gotLinkStatus")
 			span.small   checking dropbox status  
-			i.fa.fa-refresh.fa-spin 
+			i.fa.fa-refresh.fa-spin(aria-hidden)