From 72dbdcd3e352253b5edeb4cec89c5060064183d8 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Thu, 26 Jun 2025 19:07:41 +0200
Subject: [PATCH] Improve selectors to reduce flaky E2E tests (#26413)

* Use the leadingIcon prop instead of spacing

* Remove duplicated ID

* Make the alt text to be empty since image is decorative

* Make switcher input visually hidden

The switcher's input previously used 'pointer-events: none', which prevented proper interaction in the test. It replaces that hack.

* Add accessibilityLabel to the info icon that is actually a clickable link

* Use more specific selectors

* It should display

* Use more specific selectors

* Use more specific selectors

GitOrigin-RevId: a555d96cf972d06dd5432f44a23b02355cedcd94
---
 services/web/frontend/extracted-translations.json          | 1 +
 .../editor-left-menu/components/editor-left-menu.tsx       | 1 +
 .../file-tree-create/file-tree-modal-create-file-mode.tsx  | 4 +---
 .../history/components/change-list/change-list.tsx         | 4 +++-
 .../js/features/pdf-preview/components/pdf-js-viewer.tsx   | 7 ++++++-
 .../js/features/pdf-preview/components/pdf-logs-viewer.tsx | 1 +
 .../features/pdf-preview/components/pdf-preview-pane.tsx   | 2 +-
 .../project-list/components/modals/create-tag-modal.tsx    | 2 +-
 .../project-list/components/sidebar/sidebar-ds-nav.tsx     | 6 +++++-
 .../welcome-message-new/welcome-message-link.tsx           | 7 +------
 .../settings/components/emails/confirm-email-form.tsx      | 1 +
 .../stylesheets/bootstrap-5/pages/editor/toolbar.scss      | 4 +---
 services/web/locales/en.json                               | 1 +
 13 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 123ff8e190..cb1da29d7a 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -1301,6 +1301,7 @@
   "project_files": "",
   "project_flagged_too_many_compiles": "",
   "project_has_too_many_files": "",
+  "project_history_list": "",
   "project_last_published_at": "",
   "project_layout_sharing_submission": "",
   "project_linked_to": "",
diff --git a/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx b/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
index 40eed9e77e..183e4d1836 100644
--- a/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
@@ -43,6 +43,7 @@ function EditorLeftMenu() {
             shown: leftMenuShown,
           })}
           id="left-menu"
+          data-testid="left-menu"
         >
           <LazyEditorLeftMenuWithErrorBoundary />
         </Offcanvas.Body>
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-mode.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-mode.tsx
index 40a3d7ba9e..eb7e0466f4 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-mode.tsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-mode.tsx
@@ -2,7 +2,6 @@ import classnames from 'classnames'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
 import OLButton from '@/features/ui/components/ol/ol-button'
-import MaterialIcon from '@/shared/components/material-icon'
 
 export default function FileTreeModalCreateFileMode({
   mode,
@@ -26,9 +25,8 @@ export default function FileTreeModalCreateFileMode({
         variant="link"
         onClick={handleClick}
         className="modal-new-file-mode"
+        leadingIcon={icon}
       >
-        <MaterialIcon type={icon} />
-        &nbsp;
         {label}
       </OLButton>
     </li>
diff --git a/services/web/frontend/js/features/history/components/change-list/change-list.tsx b/services/web/frontend/js/features/history/components/change-list/change-list.tsx
index f072d24a57..0078cc2916 100644
--- a/services/web/frontend/js/features/history/components/change-list/change-list.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/change-list.tsx
@@ -2,12 +2,14 @@ import ToggleSwitch from './toggle-switch'
 import AllHistoryList from './all-history-list'
 import LabelsList from './labels-list'
 import { useHistoryContext } from '../../context/history-context'
+import { useTranslation } from 'react-i18next'
 
 function ChangeList() {
   const { labelsOnly, setLabelsOnly } = useHistoryContext()
+  const { t } = useTranslation()
 
   return (
-    <aside className="change-list">
+    <aside className="change-list" aria-label={t('project_history_list')}>
       <div className="history-header history-toggle-switch-container">
         <ToggleSwitch labelsOnly={labelsOnly} setLabelsOnly={setLabelsOnly} />
       </div>
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx
index 9d0cfca638..4a098e67da 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx
@@ -497,7 +497,12 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
       onKeyDown={handleKeyDown}
       tabIndex={-1}
     >
-      <div className="pdfjs-viewer-inner" tabIndex={0} role="tabpanel">
+      <div
+        className="pdfjs-viewer-inner"
+        tabIndex={0}
+        role="tabpanel"
+        data-testid="pdfjs-viewer-inner"
+      >
         <div className="pdfViewer" />
       </div>
       {toolbarInfoLoaded && (
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.tsx
index f9fbcae42a..afd4401cbe 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-logs-viewer.tsx
@@ -51,6 +51,7 @@ function PdfLogsViewer({ alwaysVisible = false }: { alwaysVisible?: boolean }) {
       className={classnames('logs-pane', {
         hidden: !showLogs && !alwaysVisible && !loadingError,
       })}
+      data-testid="logs-pane"
     >
       <div className="logs-pane-content">
         {codeCheckFailed && <PdfCodeCheckFailedNotice />}
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx
index e063c20c76..82f2946d63 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx
@@ -40,7 +40,7 @@ function PdfPreviewPane() {
           {compileTimeout < 60 && <CompileTimeWarningUpgradePrompt />}
         </PdfPreviewMessages>
         <Suspense fallback={<FullSizeLoadingSpinner delay={500} />}>
-          <div className="pdf-viewer">
+          <div className="pdf-viewer" data-testid="pdf-viewer">
             <PdfViewer />
           </div>
         </Suspense>
diff --git a/services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx b/services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx
index 4133d8e07f..51d44865a9 100644
--- a/services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx
+++ b/services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx
@@ -85,7 +85,7 @@ export default function CreateTagModal({
       </OLModalHeader>
 
       <OLModalBody>
-        <OLForm id="create-tag-modal-form" onSubmit={handleSubmit}>
+        <OLForm onSubmit={handleSubmit}>
           <OLFormGroup controlId="create-tag-modal-form">
             <OLFormLabel>{t('new_tag_name')}</OLFormLabel>
             <OLFormControl
diff --git a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
index eba033ea76..289fb5bbb0 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
@@ -49,7 +49,11 @@ function SidebarDsNav() {
         id="new-project-button-sidebar"
         className={scrolledDown ? 'show-shadow' : undefined}
       />
-      <div className="project-list-sidebar-scroll" ref={containerRef}>
+      <div
+        className="project-list-sidebar-scroll"
+        ref={containerRef}
+        data-testid="project-list-sidebar-scroll"
+      >
         <SidebarFilters />
         {showAddAffiliationWidget && <hr />}
         <AddAffiliation />
diff --git a/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-link.tsx b/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-link.tsx
index b5ec5c6cd2..179fb70b83 100644
--- a/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-link.tsx
+++ b/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-link.tsx
@@ -23,12 +23,7 @@ export default function WelcomeMessageLink({
         rel="noopener"
       >
         <p>{title}</p>
-        <img
-          className="welcome-message-card-img"
-          src={imgSrc}
-          alt={title}
-          aria-hidden="true"
-        />
+        <img className="welcome-message-card-img" src={imgSrc} alt="" />
       </a>
     </div>
   )
diff --git a/services/web/frontend/js/features/settings/components/emails/confirm-email-form.tsx b/services/web/frontend/js/features/settings/components/emails/confirm-email-form.tsx
index bf08b5dcfd..49b114d9c2 100644
--- a/services/web/frontend/js/features/settings/components/emails/confirm-email-form.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/confirm-email-form.tsx
@@ -182,6 +182,7 @@ export function ConfirmEmailForm({
       onSubmit={submitHandler}
       onInvalid={invalidFormHandler}
       className="confirm-email-form"
+      data-testid="confirm-email-form"
     >
       <div className="confirm-email-form-inner">
         {(feedback?.type === 'alert' || outerErrorDisplay) && (
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
index 7b3decc101..367d1b443c 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
@@ -435,9 +435,7 @@
 }
 
 .toggle-switch-input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
+  @include visually-hidden;
 }
 
 .toggle-switch-input:disabled + .toggle-switch-label {
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 2483ce14e5..8aa1abd506 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1720,6 +1720,7 @@
   "project_files": "Project files",
   "project_flagged_too_many_compiles": "This project has been flagged for compiling too often. The limit will be lifted shortly.",
   "project_has_too_many_files": "This project has reached the 2000 file limit",
+  "project_history_list": "Project history list",
   "project_last_published_at": "Your project was last published at",
   "project_layout_sharing_submission": "Project Layout, Sharing, and Submission",
   "project_linked_to": "This project is linked to",