Merge pull request #2524 from overleaf/sk-add-aria-attribs-on-close-buttons

Add aria labels to close buttons ("X" on modal)

GitOrigin-RevId: 4255844e29d4b0eedb0acb36bb2356337c543bcd

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

@@ -102,7 +102,9 @@ block content
 				type="button"
 				data-dismiss="modal"
 				ng-click="done()"
-			) ×
+				aria-label="Close"
+			)
+				span(aria-hidden="true") ×
 			h3 {{ title }}
 		.modal-body(ng-bind-html="message")
 		.modal-footer

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

@@ -11,7 +11,9 @@ script(type="text/ng-template", id="historyRestoreDiffModalTemplate")
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("restore")} {{diff.doc.name}}
 	.modal-body.modal-body-share
 		p !{translate("sure_you_want_to_restore_before", {filename:"<strong>{{diff.doc.name}}</strong>", date:"{{diff.start_ts | formatDate}}"})}
@@ -47,7 +49,9 @@ script(type="text/ng-template", id="historyLabelTpl")
 			ng-if="$ctrl.isOwnedByCurrentUser && !$ctrl.isPseudoCurrentStateLabel"
 			stop-propagation="click"
 			ng-click="$ctrl.onLabelDelete()"
-		) &times;
+			aria-label=translate("delete")
+		)
+			span(aria-hidden="true") &times;
 
 script(type="text/ng-template", id="historyLabelTooltipTpl")
 	.history-label-tooltip

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

@@ -4,7 +4,9 @@ script(type="text/ng-template", id="hotkeysModalTemplate")
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("hotkeys")}
 	.modal-body.modal-hotkeys
 		h3 #{translate("common")}

services/web/app/views/project/editor/review-panel.pug

@@ -548,7 +548,9 @@ script(type="text/ng-template", id="trackChangesUpgradeModalTemplate")
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("upgrade_to_track_changes")}
 	.modal-body
 		.teaser-video-container
@@ -597,7 +599,9 @@ script(type="text/ng-template", id="bulkActionsModalTemplate")
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 {{ isAccept ? '#{translate("accept_all")}' : '#{translate("reject_all")}' }}
 	.modal-body 
 		p(ng-if="isAccept") #{translate("bulk_accept_confirm", { nChanges: "{{ nChanges }}"})}

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

@@ -4,7 +4,9 @@ script(type='text/ng-template', id='shareProjectModalTemplate')
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("share_project")}
 	.modal-body.modal-body-share
 		.container-fluid
@@ -262,7 +264,9 @@ script(type="text/ng-template", id="ownershipTransferConfirmTemplate")
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("change_project_owner")}
 	.modal-body
 		p !{translate('project_ownership_transfer_confirmation_1', { user: '<strong>{{ member.email }}</strong>', project: '<strong>{{ project.name }}</strong>' })}

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

@@ -31,7 +31,8 @@ td.project-list-table-name-cell(ng-if-start="!project.isV1Project")
 					button.label.label-default.tag-label-remove(
 						ng-click="removeProjectFromTag(project, tag)"
 						aria-label="Remove tag {{ tag.name }}"
-					) ×
+					)
+						span(aria-hidden="true") ×
 
 td.project-list-table-owner-cell
 	span.owner(ng-if='project.owner') {{getOwnerName(project)}}

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

@@ -4,7 +4,9 @@ script(type='text/ng-template', id='newTagModalTemplate')
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("create_new_folder")}
 	.modal-body
 		form(name="newTagForm", novalidate)
@@ -40,7 +42,9 @@ script(type='text/ng-template', id='deleteTagModalTemplate')
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("delete_folder")}
 	.modal-body
 		p #{translate("about_to_delete_folder")}
@@ -66,7 +70,9 @@ script(type='text/ng-template', id='renameTagModalTemplate')
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("rename_folder")}
 	.modal-body
 		form(name="renameTagForm", novalidate)
@@ -95,7 +101,9 @@ script(type='text/ng-template', id='renameProjectModalTemplate')
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("rename_project")}
 	.modal-body
 		.alert.alert-danger(ng-show="state.error.message") {{state.error.message}}
@@ -124,7 +132,9 @@ script(type='text/ng-template', id='cloneProjectModalTemplate')
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("copy_project")}
 	.modal-body
 		.alert.alert-danger(ng-show="state.error.message") {{state.error.message === "invalid element name" ? "#{translate("invalid_element_name")}" : state.error.message}}
@@ -158,7 +168,9 @@ script(type='text/ng-template', id='newProjectModalTemplate')
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("new_project")}
 	.modal-body
 		.alert.alert-danger(ng-show="state.error.message") {{state.error.message}}
@@ -190,7 +202,9 @@ script(type='text/ng-template', id='archiveTrashLeaveOrDeleteProjectsModalTempla
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3(ng-if="action === 'archive'") #{translate("archive_projects")}
 		h3(ng-if="action === 'trash'") #{translate("trash_projects")}
 		h3(ng-if="action === 'leave'") #{translate("leave_projects")}
@@ -264,7 +278,9 @@ script(type="text/ng-template", id="uploadProjectModalTemplate")
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("upload_zipped_project")}
 	.modal-body(
 		fine-upload
@@ -284,7 +300,9 @@ script(type="text/ng-template", id="showErrorModalTemplate")
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 #{translate("generic_something_went_wrong")}
 	.modal-body
 		.alert.alert-danger(ng-show="error.message") {{error.message === "invalid element name" ? "#{translate("invalid_element_name")}" : error.message}}
@@ -292,58 +310,6 @@ script(type="text/ng-template", id="showErrorModalTemplate")
 	.modal-footer
 		button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}
 
-script(type="text/ng-template", id="userProfileModalTemplate")
-	.modal-header
-		button.close(
-			type="button"
-			data-dismiss="modal"
-			ng-click="done()"
-		) ×
-		h3 #{translate("your_profile")}
-	.modal-body
-		form(enctype='multipart/form-data', method='post')
-
-			.form-group
-				label(for="first_name") #{translate("first_name")}
-				input.form-control(
-					type='text',
-					name='first_name',
-					ng-model="userInfoForm.first_name",
-					placeholder="First Name",
-					select-when="formVisable"
-				)
-
-			.form-group
-				label(for="last_name") #{translate("last_name")}
-				input.form-control(
-					type='text',
-					name='last_name',
-					ng-model="userInfoForm.last_name",
-					placeholder='Last Name'
-				)
-
-			.form-group.user_details_auto_complete
-				label(for="institution") #{translate("institution")}
-				autocomplete(
-					ng-model="userInfoForm.institution",
-					name="institution",
-					data="institutions",
-					on-type="updateInstitutionsList",
-					attr-placeholder="Institution",
-					attr-inputclass="form-control"
-				)
-
-			.form-group.user_details_auto_complete
-				label(for="role") #{translate("role")}
-				autocomplete(
-					ng-model="userInfoForm.role",
-					name="role",
-					data="roles",
-					attr-placeholder="Role",
-					attr-inputclass="form-control"
-				)
-
-
 	.modal-footer
 		button.btn.btn-info(ng-click="done()") #{translate("done")}
 

services/web/app/views/referal/bonus.pug

@@ -100,7 +100,9 @@ block content
 									type="button"
 									data-dismiss="modal"
 									ng-click="cancel()"
-								) ×
+									aria-label="Close"
+								)
+									span(aria-hidden="true") ×
 								h3 #{translate("link_to_sl")}
 							.modal-body.modal-body-share.link-modal
 

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

@@ -4,7 +4,9 @@ script(type="text/ng-template", id="BonusLinkToUsModal")
 			type="button"
 			data-dismiss="modal"
 			ng-click="cancel()"
-		) ×
+			aria-label="Close"
+		)
+			span(aria-hidden="true") ×
 		h3 Dropbox link
 	.modal-body.modal-body-share