Merge pull request #26456 from overleaf/td-limit-browser-translate-non-react-icons

Prevent browser translation of icons in Pug pages

GitOrigin-RevId: 97e4d3ba70a4c95bed2c9f52e66038911625613d

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

@@ -1,3 +1,5 @@
+include ./material_symbol
+
 mixin formMessages()
 	div(
 		data-ol-form-messages='',
@@ -48,7 +50,7 @@ mixin customFormMessageNewStyle(key, kind, extraClass = 'mb-3')
 			aria-live="polite"
 		)
 			div.notification-icon
-				span.material-symbols(aria-hidden="true") check_circle
+				+material-symbol("check_circle")
 			div.notification-content.text-left
 				block
 	else if kind === 'danger'
@@ -60,7 +62,7 @@ mixin customFormMessageNewStyle(key, kind, extraClass = 'mb-3')
 			aria-live="polite"
 		)
 			div.notification-icon
-				span.material-symbols(aria-hidden="true") error
+				+material-symbol("error")
 			div.notification-content.text-left
 				block
 	else
@@ -72,7 +74,7 @@ mixin customFormMessageNewStyle(key, kind, extraClass = 'mb-3')
 			aria-live="polite"
 		)
 			div.notification-icon
-				span.material-symbols(aria-hidden="true") warning
+				+material-symbol("warning")
 			div.notification-content.text-left
 				block
 
@@ -91,6 +93,6 @@ mixin customValidationMessageNewStyle(key)
 			data-ol-custom-form-message=key
 		)
 		div.notification-icon
-			span.material-symbols(aria-hidden="true") error
+			+material-symbol("error")
 		div.notification-content.text-left.small
 			block

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

@@ -1,3 +1,5 @@
+include ./material_symbol
+
 mixin linkAdvisors(linkText, linkClass, track)
 	//- To Do: verify path
 	- var gaCategory = track && track.category ? track.category : 'All'
@@ -120,4 +122,4 @@ mixin linkUniversities(linkText, linkClass)
 mixin linkWithArrow({text, href, eventTracking, eventSegmentation, eventTrackingTrigger})
 	a.link-with-arrow(href=href event-tracking=eventTracking event-segmentation=eventSegmentation, event-tracking-trigger=eventTrackingTrigger event-tracking-mb)
 		| #{text}
-		i.material-symbols(aria-hidden="true") arrow_right_alt
+		+material-symbol("arrow_right_alt")

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

@@ -0,0 +1,11 @@
+mixin material-symbol(icon, extraClass = null)
+	- extraClass = extraClass ? ' ' + extraClass : ''
+	span(aria-hidden="true", translate="no", class="material-symbols" + extraClass)&attributes(attributes) #{icon}
+	
+mixin material-symbol-outlined(icon, extraClass = null)
+	- extraClass = extraClass ? ' ' + extraClass : ''
+	+material-symbol(icon, 'material-symbols-outlined' + extraClass)&attributes(attributes)
+
+mixin material-symbol-rounded(icon, extraClass = null)
+	- extraClass = extraClass ? ' ' + extraClass : ''
+	+material-symbol(icon, 'material-symbols-rounded' + extraClass)&attributes(attributes)

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

@@ -1,14 +1,15 @@
 //- to be kept in sync with frontend/js/shared/components/notification.tsx
+include ./material_symbol
 
 mixin notificationIcon(type)
 	if type === 'info'
-		span.material-symbols(aria-hidden="true") info
+		+material-symbol("info")
 	else if type === 'success'
-		span.material-symbols(aria-hidden="true") check_circle
+		+material-symbol("check_circle")
 	else if type === 'error'
-		span.material-symbols(aria-hidden="true") error
+		+material-symbol("error")
 	else if type === 'warning'
-		span.material-symbols(aria-hidden="true") warning
+		+material-symbol("warning")
 
 
 mixin notification(options)
@@ -39,4 +40,4 @@ mixin notification(options)
 		//- if isDismissible
 		//- 	.notification-close-btn
 		//- 		button(aria-label=translate('close'))
-		//- 			span.material-symbols(aria-hidden="true") close
+		//- 			+material-symbol("close")

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

@@ -1,4 +1,6 @@
+include ./material_symbol
+
 mixin previous-page-link(href, text)
 	a.previous-page-link(href=href)
-		i.material-symbols.material-symbols-rounded(aria-hidden="true") arrow_left_alt
+		+material-symbol-rounded("arrow_left_alt")
 		| #{text}

services/web/app/views/layout/language-picker-bootstrap-5.pug

@@ -1,3 +1,5 @@
+include ../_mixins/material_symbol
+
 li.dropdown.dropup.subdued(dropdown).language-picker
 	button#language-picker-toggle.btn.btn-link.btn-inline-link(
 		dropdown-toggle,
@@ -9,7 +11,7 @@ li.dropdown.dropup.subdued(dropdown).language-picker
 		tooltip=translate('language')
 		title=translate('language')
 	)
-		span.material-symbols(aria-hidden="true") translate
+		+material-symbol("translate")
 		|  
 		span.language-picker-text #{settings.translatedLanguages[currentLngCode]}
 
@@ -22,4 +24,4 @@ li.dropdown.dropup.subdued(dropdown).language-picker
 					a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams, role="menuitem", class=isActive ? 'dropdown-item active' : 'dropdown-item', aria-selected=isActive ? 'true' : 'false')
 						| #{settings.translatedLanguages[subdomainDetails.lngCode]}
 						if subdomainDetails.lngCode === currentLngCode
-							span.material-symbols.dropdown-item-trailing-icon(aria-hidden="true") check
+							+material-symbol("check", "dropdown-item-trailing-icon")

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

@@ -1,5 +1,6 @@
 include ./_plans_faq_tabs
 include ../../_mixins/eyebrow
+include ../../_mixins/material_symbol
 
 - var managingYourSubscription = 'managingYourSubscription'
 - var overleafIndividualPlans = 'overleafIndividualPlans'
@@ -87,4 +88,4 @@ include ../../_mixins/eyebrow
 				data-bs-target=bootstrapVersion === 5 ? "#contactUsModal" : undefined
 			)
 				span(style="margin-right: 4px") #{translate('contact_support')}
-				i.icon-md.material-symbols.material-symbols-rounded.material-symbols-arrow-right(aria-hidden="true") arrow_right_alt
+				+material-symbol-rounded("arrow_right_alt", "icon-md")

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

@@ -1,5 +1,6 @@
 //- If the `plans-page-bs5` split test has been completed, remove the `data-toggle` and `data-target` because it is not needed anymore (bs5 uses `data-bs-toggle` and `data-bs-target`)
-
+include ../../_mixins/material_symbol
+	
 mixin managingYourSubscription()
 	.ol-accordions-container
 		.custom-accordion-item
@@ -14,7 +15,7 @@ mixin managingYourSubscription()
 			)
 				| Can I change plans or cancel later?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="managingYourSubscriptionQ1")
 				.custom-accordion-body
 					span Yes, you can do this at any time by going to 
@@ -32,7 +33,7 @@ mixin managingYourSubscription()
 			)
 				| If I change or cancel my Overleaf plan, will I lose my projects?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="managingYourSubscriptionQ2")
 				.custom-accordion-body
 					| No. Changing or canceling your plan won’t affect your projects, the only change will be to the features available to you. You can see which features are available only on paid plans in the comparison table.
@@ -48,7 +49,7 @@ mixin managingYourSubscription()
 			)
 				| Can I pay by invoice or purchase order?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="managingYourSubscriptionQ3")
 				.custom-accordion-body
 					| This is possible when you’re purchasing a group subscription for five or more people, or a site license. For individual subscriptions, we can only accept payment online via credit card, debit card, or PayPal.
@@ -64,7 +65,7 @@ mixin managingYourSubscription()
 			)
 				| How do I view/update the credit card being charged for my subscription?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="managingYourSubscriptionQ4")
 				.custom-accordion-body
 					| You can view and update the card on file by going to Account > 
@@ -96,7 +97,7 @@ mixin overleafIndividualPlans()
 			)
 				| How does the free trial work?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ1")
 				.custom-accordion-body
 					span You get full access to your chosen plan during your 7-day free trial, and there’s no obligation to continue beyond the trial. Your card will be charged at the end of your trial unless you cancel before then. To cancel, go to 
@@ -124,7 +125,7 @@ mixin overleafIndividualPlans()
 			)
 				| What’s a collaborator on an Overleaf individual subscription?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ2")
 				.custom-accordion-body
 					| A collaborator is someone you invite to work with you on a project. So, for example, on our Standard plan you can have up to 10 people collaborating with you on any given project. 
@@ -141,7 +142,7 @@ mixin overleafIndividualPlans()
 			)
 				| The individual Standard plan has 10 project collaborators, does it mean that 10 people will be upgraded?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ3")
 				.custom-accordion-body
 					span No. Only the subscriber’s account will be upgraded. An individual Standard subscription allows you to invite 10 people per project to edit the project with you. Your collaborators can access features such as the full document history and extended compile time, but 
@@ -159,7 +160,7 @@ mixin overleafIndividualPlans()
 			)
 				| Do collaborators also have access to the editing and collaboration features I’ve paid for?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ4")
 				.custom-accordion-body
 					span If you have an Overleaf subscription, then your project collaborators will have access to features like real-time track changes and document history, but 
@@ -177,7 +178,7 @@ mixin overleafIndividualPlans()
 			)
 				| Can I purchase an individual plan on behalf of someone else?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ5")
 				.custom-accordion-body
 					| Individual subscriptions must be purchased by the account that will be the end user. If you want to purchase a plan for someone else, you’ll need to provide them with relevant payment details to enable them to make the purchase. 
@@ -193,7 +194,7 @@ mixin overleafIndividualPlans()
 			)
 				| Who is eligible for the Student plan?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ6")
 				.custom-accordion-body
 					| As the name suggests, the Student plan is only for students at educational institutions. This includes graduate students.
@@ -209,7 +210,7 @@ mixin overleafIndividualPlans()
 			)
 				| Can I transfer an individual subscription to someone else?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ7")
 				.custom-accordion-body
 					| No. Individual plans can’t be transferred. 
@@ -232,7 +233,7 @@ mixin overleafGroupPlans()
 			)
 				| What’s the difference between users and collaborators on an Overleaf group subscription?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafGroupPlansQ1")
 				.custom-accordion-body
 					div On any of our group plans, the number of users refers to the number of people you can invite to join your group. All of these people will have access to the plan’s paid-for features across all their projects, such as real-time track changes and document history. 
@@ -249,7 +250,7 @@ mixin overleafGroupPlans()
 			)
 				| What is the benefit of purchasing an Overleaf Group plan?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafGroupPlansQ2")
 				.custom-accordion-body
 					| Our Group subscriptions allow you to purchase access to our premium features for multiple people. They’re easy to manage, help save on paperwork, and allow groups of 5 or more to purchase via purchase order (PO). We also offer discounts on purchases of Group subscriptions for more than 20 users; just get in touch with our 
@@ -275,7 +276,7 @@ mixin overleafGroupPlans()
 			)
 				| Who is eligible for the educational discount?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafGroupPlansQ3")
 				.custom-accordion-body
 					| The educational discount for group subscriptions is for students or faculty who are using Overleaf primarily for teaching. 
@@ -291,7 +292,7 @@ mixin overleafGroupPlans()
 			)
 				| How do I add more licenses to my group subscription, and what will it cost?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafGroupPlansQ4")
 				.custom-accordion-body
 					div 
@@ -340,7 +341,7 @@ mixin overleafGroupPlans()
 			)
 				| How do I upgrade my plan from Group Standard to Group Professional?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafGroupPlansQ5")
 				.custom-accordion-body
 					| You can upgrade your plan from Group Standard to Group Professional on the 

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

@@ -1,5 +1,6 @@
 extends ../layout-marketing
 include ../_mixins/recaptcha
+include ../_mixins/material_symbol
 
 block vars
 	- bootstrap5PageStatus = 'disabled'
@@ -48,7 +49,7 @@ block content
 						div(data-ol-custom-form-message="no-password-allowed-due-to-sso" hidden)
 							.notification.notification-type-error(aria-live="polite" style="margin-bottom: 10px;")
 								.notification-icon
-									span.material-symbols.material-symbols-rounded(aria-hidden="true") error
+									+material-symbol-rounded("error")
 								.notification-content-and-cta
 									.notification-content
 										p

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

@@ -1,4 +1,5 @@
 extends ../layout-marketing
+include ../_mixins/material_symbol
 
 block content
 	main.content#main-content
@@ -9,5 +10,5 @@ block content
 						h1 #{translate("restricted_no_permission")}
 					p
 						a.inline-material-symbols(href="/")
-							span.material-symbols(aria-hidden="true") arrow_left_alt
+							+material-symbol("arrow_left_alt")
 							| #{translate("take_me_home")}

services/web/config/settings.defaults.js

@@ -919,7 +919,7 @@ module.exports = {
           col: ['width'],
           figure: ['class', 'id', 'style'],
           figcaption: ['class', 'id', 'style'],
-          i: ['aria-hidden', 'aria-label', 'class', 'id'],
+          i: ['aria-hidden', 'aria-label', 'class', 'id', 'translate'],
           iframe: [
             'allowfullscreen',
             'frameborder',

services/web/frontend/js/features/contact-form/search.js

@@ -47,8 +47,9 @@ export function setupSearch(formEl) {
 
         const iconEl = document.createElement('i')
         iconEl.className = 'material-symbols dropdown-item-trailing-icon'
-        iconEl.innerText = 'open_in_new'
+        iconEl.textContent = 'open_in_new'
         iconEl.setAttribute('aria-hidden', 'true')
+        iconEl.translate = false
         linkEl.append(iconEl)
 
         resultsEl.append(liEl)

services/web/frontend/js/features/form-helpers/create-icon.js

@@ -2,6 +2,7 @@ export default function createIcon(type) {
   const icon = document.createElement('span')
   icon.className = 'material-symbols'
   icon.setAttribute('aria-hidden', 'true')
+  icon.setAttribute('translate', 'no')
   icon.textContent = type
   return icon
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/table-rendering-error.ts

@@ -17,6 +17,7 @@ export class TableRenderingErrorWidget extends WidgetType {
     const iconType = document.createElement('span')
     iconType.classList.add('material-symbols')
     iconType.setAttribute('aria-hidden', 'true')
+    iconType.setAttribute('translate', 'no')
     iconType.textContent = 'info'
     icon.appendChild(iconType)
     warning.appendChild(icon)

services/web/frontend/stylesheets/app/editor/history-react.less

@@ -390,7 +390,7 @@ history-root {
       background-color: @neutral-10;
     }
 
-    span.material-symbols {
+    .material-symbols {
       vertical-align: middle;
       font-size: inherit;
     }

services/web/frontend/stylesheets/app/website-redesign.less

@@ -169,7 +169,7 @@
           }
         }
 
-        i.material-symbols {
+        .material-symbols {
           color: var(--sapphire-blue);
         }
       }
@@ -627,7 +627,7 @@
           }
         }
 
-        i.material-symbols {
+        .material-symbols {
           vertical-align: middle;
           text-decoration: none;
         }
@@ -949,7 +949,7 @@
     font-weight: 500;
     color: var(--green-50);
 
-    i.material-symbols {
+    .material-symbols {
       vertical-align: middle;
       padding-bottom: 3px;
       font-size: 24px;
@@ -1023,7 +1023,7 @@
       .box-shadow-button-input();
     }
 
-    i {
+    .material-symbols {
       vertical-align: middle;
       margin-left: var(--spacing-02);
       padding-bottom: 3px;

services/web/frontend/stylesheets/bootstrap-5/pages/homepage.scss

@@ -284,7 +284,7 @@
       margin-top: var(--spacing-06);
       margin-bottom: var(--spacing-04);
 
-      i.material-symbols {
+      .material-symbols {
         vertical-align: middle;
         text-decoration: none;
       }

services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss

@@ -58,7 +58,7 @@
       @include box-shadow-button-input;
     }
 
-    i {
+    .material-symbols {
       vertical-align: middle;
       margin-left: var(--spacing-02);
       padding-bottom: 3px;
@@ -378,7 +378,7 @@
           }
         }
 
-        i.material-symbols {
+        .material-symbols {
           color: var(--sapphire-blue);
         }
       }

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

@@ -3,6 +3,8 @@ extends ../../../../../app/views/layout-website-redesign
 block vars
 	- isWebsiteRedesign = true
 
+include ../../../../../app/views/_mixins/material_symbol
+
 block content
 	main.content.content-alt#main-content
 		.container
@@ -11,8 +13,7 @@ block content
 					.notification.notification-type-success(aria-live="off" role="alert")
 						.notification-content-and-cta
 							.notification-icon
-								span.material-symbols(aria-hidden="true")
-									| check_circle
+								+material-symbol("check_circle")
 							.notification-content
 								p
 									| #{translate("nearly_activated")}