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

@@ -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": "",

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>

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>

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>

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 && (

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 />}

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>

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

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

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

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) && (

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 {

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",