Merge pull request #27363 from overleaf/revert-26751-rd-landmarks

[web] Revert "Improve landmarks on the Project dashboard and Editor pages"

GitOrigin-RevId: 4bf0bbb9466db4436df4a72dcc70c320263dd168

server-ce/test/git-bridge.spec.ts

@@ -85,11 +85,7 @@ describe('git-bridge', function () {
     it('should render the git-bridge UI in the editor', function () {
       maybeClearAllTokens()
       createProject('git').as('projectId')
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Sync')
       cy.findByText('Git').click()
       cy.findByTestId('git-bridge-modal').within(() => {
@@ -104,11 +100,7 @@ describe('git-bridge', function () {
 
       // Re-open
       cy.url().then(url => cy.visit(url))
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Git').click()
       cy.findByTestId('git-bridge-modal').within(() => {
         cy.get('@projectId').then(id => {
@@ -196,11 +188,7 @@ describe('git-bridge', function () {
     function checkGitAccess(access: 'readOnly' | 'readAndWrite') {
       const recompile = throttledRecompile()
 
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Sync')
       cy.findByText('Git').click()
       cy.get('@projectId').then(projectId => {
@@ -382,11 +370,7 @@ Hello world
     it('should not render the git-bridge UI in the editor', function () {
       login('user@example.com')
       createProject('maybe git')
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Word Count') // wait for lazy loading
       cy.findByText('Sync').should('not.exist')
       cy.findByText('Git').should('not.exist')

server-ce/test/sandboxed-compiles.spec.ts

@@ -37,11 +37,7 @@ describe('SandboxedCompiles', function () {
       cy.findByText(/This is pdfTeX, Version .+ \(TeX Live 2023\) /)
 
       cy.log('Switch TeXLive version from 2023 to 2022')
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText(LABEL_TEX_LIVE_VERSION)
         .parent()
         .findByText('2023')
@@ -217,11 +213,7 @@ describe('SandboxedCompiles', function () {
       cy.findByText(/This is pdfTeX/)
 
       cy.log('Switch compiler to from pdfLaTeX to XeLaTeX')
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Compiler')
         .parent()
         .findByText('pdfLaTeX')
@@ -253,11 +245,7 @@ describe('SandboxedCompiles', function () {
       cy.findByText(/This is pdfTeX, Version .+ \(TeX Live 2025\) /)
 
       cy.log('Check that there is no TeX Live version toggle')
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Word Count') // wait for lazy loading
       cy.findByText(LABEL_TEX_LIVE_VERSION).should('not.exist')
     })

server-ce/test/templates.spec.ts

@@ -57,11 +57,7 @@ describe('Templates', () => {
       cy.visit('/')
       createProject(name).as('templateProjectId')
 
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Manage Template').click()
 
       cy.findByText('Template Description')
@@ -140,11 +136,7 @@ describe('Templates', () => {
       cy.get('@templateProjectId').then(projectId =>
         cy.visit(`/project/${projectId}`)
       )
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Manage Template').click()
       cy.findByText('Publish').click()
       cy.findByText('Unpublish', { timeout: 10_000 })
@@ -169,11 +161,7 @@ describe('Templates', () => {
       cy.findByText('Open as Template').click()
       cy.url().should('match', /\/project\/[a-f0-9]{24}$/)
       cy.get('.project-name').findByText(name)
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Word Count') // wait for lazy loading
       cy.findByText('Manage Template').should('not.exist')
 
@@ -192,11 +180,7 @@ describe('Templates', () => {
       cy.get('@templateProjectId').then(projectId =>
         cy.visit(`/project/${projectId}`)
       )
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Manage Template').click()
       cy.findByText('Unpublish')
 
@@ -207,11 +191,7 @@ describe('Templates', () => {
       cy.get('@templateProjectId').then(projectId =>
         cy.visit(`/project/${projectId}`)
       )
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Manage Template').click()
       cy.findByText('Unpublish').click()
       cy.findByText('Publish')
@@ -237,11 +217,7 @@ describe('Templates', () => {
       cy.visit('/')
       createProject('maybe templates')
 
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      })
-        .findByRole('button', { name: /Menu/i })
-        .click()
+      cy.get('header').findByText('Menu').click()
       cy.findByText('Word Count') // wait for lazy loading
       cy.findByText('Manage Template').should('not.exist')
 

server-ce/test/upgrading.spec.ts

@@ -55,11 +55,7 @@ describe('Upgrading', function () {
 
         cy.log('Trigger full flush')
         recompile()
-        cy.findByRole('navigation', {
-          name: /Project Layout, Sharing, and Submission/i,
-        })
-          .findByRole('button', { name: /Menu/i })
-          .click()
+        cy.get('header').findByText('Menu').click()
         cy.findByText('Source').click()
         cy.get('.left-menu-modal-backdrop').click({ force: true })
       }
@@ -120,9 +116,7 @@ describe('Upgrading', function () {
       openProjectByName(PROJECT_NAME)
 
       cy.url().should('match', /\/project\/[a-fA-F0-9]{24}/)
-      cy.findByRole('navigation', {
-        name: /Project actions/i,
-      }).within(() => {
+      cy.findByRole('navigation').within(() => {
         cy.findByText(PROJECT_NAME)
       })
       const recompile = throttledRecompile()

services/web/app/views/layout/fat-footer-website-redesign.pug

@@ -1,5 +1,8 @@
 footer.fat-footer.hidden-print.website-redesign-fat-footer
-	.fat-footer-container
+	.fat-footer-container(
+		role='navigation'
+		aria-label=translate('footer_navigation')
+	)
 		.fat-footer-sections(class={hidden: hideFatFooter})
 			#footer-brand.footer-section
 				a.footer-brand(href='/' aria-label=settings.appName)

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

@@ -1,5 +1,8 @@
 footer.fat-footer.hidden-print
-	.fat-footer-container
+	.fat-footer-container(
+		role='navigation'
+		aria-label=translate('footer_navigation')
+	)
 		.fat-footer-sections(class={hidden: hideFatFooter})
 			#footer-brand.footer-section
 				a.footer-brand(href='/' aria-label=settings.appName)

services/web/app/views/layout/navbar-marketing-bootstrap-5.pug

@@ -5,7 +5,6 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(
 	class={
 		'website-redesign-navbar': isWebsiteRedesign,
 	}
-	aria-label=translate('primary')
 )
 	.container-fluid.navbar-container
 		.navbar-header

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

@@ -2,7 +2,6 @@ nav.navbar.navbar-default.navbar-main(
 	class={
 		'website-redesign-navbar': isWebsiteRedesign,
 	}
-	aria-label=translate('primary')
 )
 	.container-fluid
 		.navbar-header

services/web/app/views/layout/navbar-website-redesign.pug

@@ -1,6 +1,4 @@
-nav.navbar.navbar-default.navbar-main.website-redesign-navbar(
-	aria-label=translate('primary')
-)
+nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 	.container-fluid
 		.navbar-header
 			if typeof suppressNavbarRight == 'undefined'

services/web/app/views/project/ide-react.pug

@@ -12,7 +12,7 @@ block entrypointVar
 	- entrypoint = 'pages/ide'
 
 block content
-	#ide-root
+	main#ide-root
 		.loading-screen
 			.loading-screen-brand-container
 				.loading-screen-brand(style='height: 20%')

services/web/frontend/extracted-translations.json

@@ -53,7 +53,6 @@
   "account_billed_manually": "",
   "account_has_been_link_to_institution_account": "",
   "account_has_past_due_invoice_change_plan_warning": "",
-  "account_help": "",
   "account_managed_by_group_administrator": "",
   "account_not_linked_to_dropbox": "",
   "account_settings": "",
@@ -567,7 +566,6 @@
   "fast": "",
   "fast_draft": "",
   "features_like_track_changes": "",
-  "feedback": "",
   "figure": "",
   "file": "",
   "file_action_created": "",
@@ -587,7 +585,6 @@
   "file_size": "",
   "file_tree": "",
   "files_cannot_include_invalid_characters": "",
-  "files_collaboration_integrations_logs": "",
   "files_selected": "",
   "filter_projects": "",
   "find": "",
@@ -608,6 +605,7 @@
   "font_size": "",
   "footer_about_us": "",
   "footer_contact_us": "",
+  "footer_navigation": "",
   "footnotes": "",
   "for_business": "",
   "for_government": "",
@@ -731,7 +729,6 @@
   "headers": "",
   "help": "",
   "help_articles_matching": "",
-  "help_editor_settings": "",
   "help_improve_overleaf_fill_out_this_survey": "",
   "help_improve_screen_reader_fill_out_this_survey": "",
   "help_shape_the_future_of_overleaf": "",
@@ -1001,6 +998,7 @@
   "main_bibliography_file_for_this_project": "",
   "main_document": "",
   "main_file_not_found": "",
+  "main_navigation": "",
   "make_a_copy": "",
   "make_email_primary_description": "",
   "make_owner": "",
@@ -1139,7 +1137,6 @@
   "not_a_student": "",
   "not_managed": "",
   "not_now": "",
-  "notification": "",
   "notification_personal_and_group_subscriptions": "",
   "notification_project_invite_accepted_message": "",
   "notification_project_invite_message": "",
@@ -1224,7 +1221,6 @@
   "payment_error_update_payment_method": "",
   "payment_provider_unreachable_error": "",
   "payment_summary": "",
-  "pdf": "",
   "pdf_compile_in_progress_error": "",
   "pdf_compile_rate_limit_hit": "",
   "pdf_compile_try_again": "",
@@ -1234,7 +1230,6 @@
   "pdf_only_hide_editor": "",
   "pdf_preview": "",
   "pdf_preview_error": "",
-  "pdf_preview_logs": "",
   "pdf_rendering_error": "",
   "pdf_unavailable_for_download": "",
   "pdf_viewer": "",
@@ -1295,7 +1290,6 @@
   "primarily_work_study_question_nonprofit_ngo": "",
   "primarily_work_study_question_other": "",
   "primarily_work_study_question_university_school": "",
-  "primary": "",
   "primary_certificate": "",
   "priority_support": "",
   "privacy_and_terms": "",
@@ -1308,17 +1302,14 @@
   "processing_uppercase": "",
   "professional": "",
   "progress_bar_percentage": "",
-  "project_actions": "",
   "project_approaching_file_limit": "",
-  "project_categories_tags": "",
   "project_figure_modal": "",
   "project_files": "",
-  "project_files_history": "",
-  "project_files_outline": "",
   "project_flagged_too_many_compiles": "",
   "project_has_too_many_files": "",
-  "project_history_labels": "",
+  "project_history_list": "",
   "project_last_published_at": "",
+  "project_layout_sharing_submission": "",
   "project_linked_to": "",
   "project_name": "",
   "project_not_linked_to_github": "",

services/web/frontend/js/features/chat/components/chat-pane.tsx

@@ -72,7 +72,7 @@ const ChatPane = React.memo(function ChatPane() {
   }
 
   return (
-    <aside className="chat" aria-label={t('chat')}>
+    <aside className="chat">
       <InfiniteScroll
         atEnd={atEnd}
         className="messages"

services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.tsx

@@ -88,7 +88,11 @@ const ToolbarHeader = React.memo(function ToolbarHeader({
   const shouldDisplayPublishButton = hasPublishPermissions && PublishButton
 
   return (
-    <nav className="toolbar toolbar-header" aria-label={t('project_actions')}>
+    <header
+      className="toolbar toolbar-header"
+      role="navigation"
+      aria-label={t('project_layout_sharing_submission')}
+    >
       <div className="toolbar-left">
         <MenuButton onClick={onShowLeftMenuClick} />
         {cobranding && cobranding.logoImgUrl && (
@@ -154,7 +158,7 @@ const ToolbarHeader = React.memo(function ToolbarHeader({
           </>
         )}
       </div>
-    </nav>
+    </header>
   )
 })
 

services/web/frontend/js/features/history/components/change-list/change-list.tsx

@@ -9,7 +9,7 @@ function ChangeList() {
   const { t } = useTranslation()
 
   return (
-    <aside className="change-list" aria-label={t('project_history_labels')}>
+    <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/ide-react/components/editor-and-pdf.tsx

@@ -55,8 +55,6 @@ export const EditorAndPdf: FC = () => {
           'ide-panel-group-resizing': resizing,
           hidden: !editorIsOpen,
         })}
-        tagName="section"
-        aria-label={t('editor')}
       >
         {selectedEntityCount === 0 && <NoSelectionPane />}
         {selectedEntityCount === 1 && openEntity?.type === 'fileRef' && (
@@ -107,8 +105,6 @@ export const EditorAndPdf: FC = () => {
         onCollapse={handlePdfPaneCollapse}
         onExpand={handlePdfPaneExpand}
         className="ide-react-panel"
-        tagName="section"
-        aria-label={t('pdf_preview_logs')}
       >
         <PdfPreview />
         {/* ensure that "sync to code" is available in PDF only layout */}

services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx

@@ -7,7 +7,6 @@ import { OutlineContainer } from '@/features/outline/components/outline-containe
 import { useOutlinePane } from '@/features/ide-react/hooks/use-outline-pane'
 import React, { ElementType } from 'react'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
-import { t } from 'i18next'
 
 const editorSidebarComponents = importOverleafModules(
   'editorSidebarComponents'
@@ -19,11 +18,10 @@ export default function EditorSidebar() {
   const { outlineEnabled, outlinePanelRef } = useOutlinePane()
 
   return (
-    <nav
+    <aside
       className={classNames('ide-react-editor-sidebar', {
         hidden: view === 'history',
       })}
-      aria-label={t('project_files_outline')}
     >
       {editorSidebarComponents.map(
         ({ import: { default: Component }, path }) => (
@@ -55,6 +53,6 @@ export default function EditorSidebar() {
           <OutlineContainer />
         </Panel>
       </PanelGroup>
-    </nav>
+    </aside>
   )
 }

services/web/frontend/js/features/ide-react/components/history-sidebar.tsx

@@ -1,13 +1,10 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 
 export function HistorySidebar() {
-  const { t } = useTranslation()
   return (
-    <nav
+    <aside
       id="history-file-tree"
       className="ide-react-editor-sidebar history-file-tree"
-      aria-label={t('project_files_history')}
     />
   )
 }

services/web/frontend/js/features/ide-redesign/components/chat/chat.tsx

@@ -69,7 +69,7 @@ export const ChatPane = () => {
     <div className="chat-panel">
       <RailPanelHeader title={t('collaborator_chat')} />
       <div className="chat-wrapper">
-        <aside className="chat" aria-label={t('chat')}>
+        <aside className="chat">
           <InfiniteScroll
             atEnd={atEnd}
             className="messages"

services/web/frontend/js/features/ide-redesign/components/integrations-panel/integration-card.tsx

@@ -22,7 +22,7 @@ export default function IntegrationCard({
       <div className="integrations-panel-card-contents">
         {icon}
         <div className="integrations-panel-card-inner">
-          <div className="integrations-panel-card-header">
+          <header className="integrations-panel-card-header">
             <div className="integrations-panel-card-title">{title}</div>
             {showPaywallBadge && (
               <OLBadge
@@ -33,7 +33,7 @@ export default function IntegrationCard({
                 {t('premium')}
               </OLBadge>
             )}
-          </div>
+          </header>
           <p className="integrations-panel-card-description">{description}</p>
         </div>
       </div>

services/web/frontend/js/features/ide-redesign/components/main-layout.tsx

@@ -68,8 +68,6 @@ export default function MainLayout() {
                 })}
                 minSize={5}
                 defaultSize={50}
-                tagName="section"
-                aria-label={t('editor')}
               >
                 <div className="ide-redesign-editor-container">
                   <EditorPanel />
@@ -110,8 +108,6 @@ export default function MainLayout() {
                 ref={pdfPanelRef}
                 onExpand={handlePdfPaneExpand}
                 onCollapse={handlePdfPaneCollapse}
-                tagName="section"
-                aria-label={t('pdf_preview')}
               >
                 <PdfPreview />
                 {pdfLayout === 'flat' && view === 'pdf' && (

services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-preview-hybrid-toolbar.tsx

@@ -1,19 +1,14 @@
 import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
-import OLButtonToolbar from '@/features/ui/components/ol/ol-button-toolbar'
+import OlButtonToolbar from '@/features/ui/components/ol/ol-button-toolbar'
 import PdfCompileButton from '@/features/pdf-preview/components/pdf-compile-button'
 import PdfHybridDownloadButton from '@/features/pdf-preview/components/pdf-hybrid-download-button'
 import { DetachedSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control'
 import SwitchToEditorButton from '@/features/pdf-preview/components/switch-to-editor-button'
 
 function PdfPreviewHybridToolbar() {
-  const { t } = useTranslation()
   // TODO: add detached pdf logic
   return (
-    <OLButtonToolbar
-      className="toolbar toolbar-pdf toolbar-pdf-hybrid"
-      aria-label={t('pdf')}
-    >
+    <OlButtonToolbar className="toolbar toolbar-pdf toolbar-pdf-hybrid">
       <div className="toolbar-pdf-left">
         <PdfCompileButton />
         <PdfHybridDownloadButton />
@@ -24,7 +19,7 @@ function PdfPreviewHybridToolbar() {
         <DetachedSynctexControl />
         {/* TODO: should we have code check? */}
       </div>
-    </OLButtonToolbar>
+    </OlButtonToolbar>
   )
 }
 

services/web/frontend/js/features/ide-redesign/components/rail-panel-header.tsx

@@ -14,7 +14,7 @@ export default function RailPanelHeader({
   const { t } = useTranslation()
   const { handlePaneCollapse } = useRailContext()
   return (
-    <div className="rail-panel-header">
+    <header className="rail-panel-header">
       <h4 className="rail-panel-title">{title}</h4>
 
       <div className="rail-panel-header-actions">
@@ -33,6 +33,6 @@ export default function RailPanelHeader({
           />
         </OLTooltip>
       </div>
-    </div>
+    </header>
   )
 }

services/web/frontend/js/features/ide-redesign/components/rail.tsx

@@ -258,13 +258,7 @@ export const RailLayout = () => {
       onSelect={onTabSelect}
       id="ide-rail-tabs"
     >
-      {/* The <Nav> element is a "div" and has a "role="tablist"".
-          But it should be identified as a navigation landmark.
-          Therefore, we nest them: the parent <nav> is the landmark, and its child gets the "role="tablist"". */}
-      <nav
-        className={classNames('ide-rail', { hidden: isHistoryView })}
-        aria-label={t('files_collaboration_integrations_logs')}
-      >
+      <div className={classNames('ide-rail', { hidden: isHistoryView })}>
         <Nav activeKey={selectedTab} className="ide-rail-tabs-nav">
           {railTabs
             .filter(({ hide }) => !hide)
@@ -280,13 +274,11 @@ export const RailLayout = () => {
               />
             ))}
           <div className="flex-grow-1" />
-          <nav aria-label={t('help_editor_settings')}>
-            {railActions?.map(action => (
-              <RailActionElement key={action.key} action={action} />
-            ))}
-          </nav>
+          {railActions?.map(action => (
+            <RailActionElement key={action.key} action={action} />
+          ))}
         </Nav>
-      </nav>
+      </div>
       <Panel
         id={
           newErrorlogs

services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from 'react-i18next'
 import { ToolbarMenuBar } from './menu-bar'
 import { ToolbarProjectTitle } from './project-title'
 import { OnlineUsers } from './online-users'
@@ -24,7 +23,6 @@ export const Toolbar = () => {
   const { view, restoreView } = useLayoutContext()
   const { cobranding } = useEditorContext()
   const { permissionsLevel } = useIdeReactContext()
-  const { t } = useTranslation()
   const shouldDisplaySubmitButton =
     (permissionsLevel === 'owner' || permissionsLevel === 'readAndWrite') &&
     SubmitProjectButton
@@ -36,18 +34,18 @@ export const Toolbar = () => {
 
   if (view === 'history') {
     return (
-      <nav className="ide-redesign-toolbar" aria-label={t('project_actions')}>
+      <div className="ide-redesign-toolbar">
         <div className="d-flex align-items-center">
           <BackToEditorButton onClick={handleBackToEditorClick} />
         </div>
         <ToolbarProjectTitle />
         <div /> {/* Empty div used for spacing */}
-      </nav>
+      </div>
     )
   }
 
   return (
-    <nav className="ide-redesign-toolbar" aria-label={t('project_actions')}>
+    <div className="ide-redesign-toolbar">
       <div className="ide-redesign-toolbar-menu">
         <ToolbarLogos cobranding={cobranding} />
         <ToolbarMenuBar />
@@ -64,6 +62,6 @@ export const Toolbar = () => {
         <ShareProjectButton />
         {getMeta('ol-showUpgradePrompt') && <UpgradeButton />}
       </div>
-    </nav>
+    </div>
   )
 }

services/web/frontend/js/features/outline/components/outline-pane.tsx

@@ -39,7 +39,7 @@ const OutlinePane = React.memo<{
 
   return (
     <div className={headerClasses}>
-      <div className="outline-header">
+      <header className="outline-header">
         <OutlineToggleButton
           toggleExpanded={toggleExpanded}
           expanded={expanded}
@@ -47,7 +47,7 @@ const OutlinePane = React.memo<{
           isPartial={isPartial}
           isTexFile={isTexFile}
         />
-      </div>
+      </header>
       {isOpen && (
         <div className="outline-body">
           <OutlineRoot

services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx

@@ -487,21 +487,6 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
   const toolbarInfoLoaded =
     rawScale !== null && page !== null && totalPages !== null
 
-  // Remove the 'region' role from each PDF page container.
-  // This prevents polluting the landmark navigation menu for every page,
-  // which creates a poor screen reader experience. Page navigation should be handled
-  // by the toolbar controls.
-  useEffect(() => {
-    if (!initialised || !pdfJsWrapper) return
-
-    const pageElements = pdfJsWrapper.container.querySelectorAll(
-      'div[data-page-number][role="region"]'
-    )
-    pageElements.forEach(element => {
-      element.removeAttribute('role')
-    })
-  }, [initialised, pdfJsWrapper])
-
   /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
   /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
   return (

services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.tsx

@@ -1,6 +1,6 @@
 import { memo, useState, useEffect, useRef } from 'react'
+import OlButtonToolbar from '@/features/ui/components/ol/ol-button-toolbar'
 import { useTranslation } from 'react-i18next'
-import OLButtonToolbar from '@/features/ui/components/ol/ol-button-toolbar'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import PdfCompileButton from './pdf-compile-button'
 import SwitchToEditorButton from './switch-to-editor-button'
@@ -15,7 +15,7 @@ const ORPHAN_UI_TIMEOUT_MS = 5000
 
 function PdfPreviewHybridToolbar() {
   const { detachRole, detachIsLinked } = useLayoutContext()
-  const { t } = useTranslation()
+
   const uiTimeoutRef = useRef<number>()
   const [orphanPdfTabAfterDelay, setOrphanPdfTabAfterDelay] = useState(false)
 
@@ -47,12 +47,9 @@ function PdfPreviewHybridToolbar() {
   }
 
   return (
-    <OLButtonToolbar
-      className="toolbar toolbar-pdf toolbar-pdf-hybrid"
-      aria-label={t('pdf')}
-    >
+    <OlButtonToolbar className="toolbar toolbar-pdf toolbar-pdf-hybrid">
       {ToolbarInner}
-    </OLButtonToolbar>
+    </OlButtonToolbar>
   )
 }
 

services/web/frontend/js/features/preview/components/preview-log-entry-header.tsx

@@ -99,7 +99,7 @@ function PreviewLogEntryHeader({
   const headerTitleText = logType ? `${logType} ${headerTitle}` : headerTitle
 
   return (
-    <div className={logEntryHeaderClasses}>
+    <header className={logEntryHeaderClasses}>
       {headerIcon ? (
         <div className="log-entry-header-icon-container">{headerIcon}</div>
       ) : null}
@@ -116,7 +116,7 @@ function PreviewLogEntryHeader({
       ) : (
         locationLink
       )}
-    </div>
+    </header>
   )
 }
 

services/web/frontend/js/features/project-list/components/notifications/user-notifications.tsx

@@ -1,5 +1,4 @@
 import { JSXElementConstructor } from 'react'
-import { useTranslation } from 'react-i18next'
 import Common from './groups/common'
 import Institution from './groups/institution'
 import ConfirmEmail from './groups/confirm-email'
@@ -33,13 +32,9 @@ const USGovBanner: JSXElementConstructor<Record<string, never>> =
 function UserNotifications() {
   const groupSubscriptionsPendingEnrollment =
     getMeta('ol-groupSubscriptionsPendingEnrollment') || []
-  const { t } = useTranslation()
 
   return (
-    <section
-      className="user-notifications notification-list"
-      aria-label={t('notification')}
-    >
+    <div className="user-notifications notification-list">
       <ul className="list-unstyled">
         {EnrollmentNotification &&
           groupSubscriptionsPendingEnrollment.map(subscription => (
@@ -63,7 +58,7 @@ function UserNotifications() {
 
         {isDeprecatedBrowser() && <DeprecatedBrowser />}
       </ul>
-    </section>
+    </div>
   )
 }
 

services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx

@@ -62,75 +62,73 @@ export function ProjectListDsNav() {
         overleafLogo={overleafLogo}
         showCloseIcon
       />
-      <div className="project-list-wrapper">
+      <main className="project-list-wrapper">
         <SidebarDsNav />
         <div className="project-ds-nav-content-and-messages">
           <div className="project-ds-nav-content">
             <div className="project-ds-nav-main">
               {error ? <DashApiError /> : ''}
               <UserNotifications />
-              <main aria-labelledby="main-content">
-                <div className="project-list-header-row">
-                  <ProjectListTitle
-                    filter={filter}
-                    selectedTag={selectedTag}
-                    selectedTagId={selectedTagId}
-                    className="text-truncate d-none d-md-block"
-                  />
-                  <div className="project-tools">
-                    <div className="d-none d-md-block">
-                      {selectedProjects.length === 0 ? (
-                        <CurrentPlanWidget />
-                      ) : (
-                        <ProjectTools />
-                      )}
-                    </div>
-                    <div className="d-md-none">
+              <div className="project-list-header-row">
+                <ProjectListTitle
+                  filter={filter}
+                  selectedTag={selectedTag}
+                  selectedTagId={selectedTagId}
+                  className="text-truncate d-none d-md-block"
+                />
+                <div className="project-tools">
+                  <div className="d-none d-md-block">
+                    {selectedProjects.length === 0 ? (
                       <CurrentPlanWidget />
-                    </div>
+                    ) : (
+                      <ProjectTools />
+                    )}
                   </div>
-                </div>
-                <div className="project-ds-nav-project-list">
-                  <OLRow className="d-none d-md-block">
-                    <OLCol lg={7}>
-                      <SearchForm
-                        inputValue={searchText}
-                        setInputValue={setSearchText}
-                        filter={filter}
-                        selectedTag={selectedTag}
-                      />
-                    </OLCol>
-                  </OLRow>
-                  <div className="project-list-sidebar-survey-wrapper d-md-none">
-                    {/* Omit the survey card in mobile view for now */}
-                  </div>
-                  <div className="mt-1 d-md-none">
-                    <div
-                      role="toolbar"
-                      className="projects-toolbar"
-                      aria-label={t('projects')}
-                    >
-                      <ProjectsDropdown />
-                      <SortByDropdown />
-                    </div>
+                  <div className="d-md-none">
+                    <CurrentPlanWidget />
                   </div>
-                  <div className="mt-3">
-                    <TableContainer bordered>
-                      {tableTopArea}
-                      <ProjectListTable />
-                    </TableContainer>
-                  </div>
-                  <div className="mt-3">
-                    <LoadMore />
+                </div>
+              </div>
+              <div className="project-ds-nav-project-list">
+                <OLRow className="d-none d-md-block">
+                  <OLCol lg={7}>
+                    <SearchForm
+                      inputValue={searchText}
+                      setInputValue={setSearchText}
+                      filter={filter}
+                      selectedTag={selectedTag}
+                    />
+                  </OLCol>
+                </OLRow>
+                <div className="project-list-sidebar-survey-wrapper d-md-none">
+                  {/* Omit the survey card in mobile view for now */}
+                </div>
+                <div className="mt-1 d-md-none">
+                  <div
+                    role="toolbar"
+                    className="projects-toolbar"
+                    aria-label={t('projects')}
+                  >
+                    <ProjectsDropdown />
+                    <SortByDropdown />
                   </div>
                 </div>
-              </main>
+                <div className="mt-3">
+                  <TableContainer bordered>
+                    {tableTopArea}
+                    <ProjectListTable />
+                  </TableContainer>
+                </div>
+                <div className="mt-3">
+                  <LoadMore />
+                </div>
+              </div>
             </div>
             <Footer {...footerProps} />
           </div>
           <CookieBanner />
         </div>
-      </div>
+      </main>
     </div>
   )
 }

services/web/frontend/js/features/project-list/components/project-list-root.tsx

@@ -50,8 +50,8 @@ function DefaultNavbarAndFooter({ children }: { children: ReactNode }) {
     <>
       <DefaultNavbar {...navbarProps} />
       <main
+        id="main-content"
         className="content content-alt project-list-react"
-        aria-labelledby="main-content"
       >
         {children}
       </main>

services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import classnames from 'classnames'
 import { Question, User } from '@phosphor-icons/react'
 import NewProjectButton from '../new-project-button'
@@ -9,6 +8,7 @@ import { usePersistedResize } from '@/shared/hooks/use-resize'
 import { Dropdown } from 'react-bootstrap'
 import getMeta from '@/utils/meta'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import { useTranslation } from 'react-i18next'
 import { NavDropdownMenuItems } from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data'
 import { NavbarDropdownItemData } from '@/features/ui/components/types/navbar'
 import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal'
@@ -45,34 +45,29 @@ function SidebarDsNav() {
         },
       })}
     >
-      <nav aria-label={t('project_categories_tags')}>
-        <NewProjectButton
-          id="new-project-button-sidebar"
-          className={scrolledDown ? 'show-shadow' : undefined}
-        />
-        <div
-          className="project-list-sidebar-scroll"
-          ref={containerRef}
-          data-testid="project-list-sidebar-scroll"
-        >
-          <SidebarFilters />
-          {showAddAffiliationWidget && <hr />}
-          <AddAffiliation />
-        </div>
-      </nav>
+      <NewProjectButton
+        id="new-project-button-sidebar"
+        className={scrolledDown ? 'show-shadow' : undefined}
+      />
+      <div
+        className="project-list-sidebar-scroll"
+        ref={containerRef}
+        data-testid="project-list-sidebar-scroll"
+      >
+        <SidebarFilters />
+        {showAddAffiliationWidget && <hr />}
+        <AddAffiliation />
+      </div>
       <div
         className={classnames(
           'ds-nav-sidebar-lower',
           scrolledUp && 'show-shadow'
         )}
       >
-        <aside
-          className="project-list-sidebar-survey-wrapper"
-          aria-label={t('feedback')}
-        >
+        <div className="project-list-sidebar-survey-wrapper">
           <SurveyWidgetDsNav />
-        </aside>
-        <nav className="d-flex gap-3 mb-2" aria-label={t('account_help')}>
+        </div>
+        <div className="d-flex gap-3 mb-2">
           {helpItem && (
             <Dropdown
               className="ds-nav-icon-dropdown"
@@ -162,7 +157,7 @@ function SidebarDsNav() {
               <UserProvider>{contactUsModal}</UserProvider>
             </>
           )}
-        </nav>
+        </div>
         <div className="ds-nav-ds-name" translate="no">
           <span>Digital Science</span>
         </div>

services/web/frontend/js/features/project-list/components/title/project-list-title.tsx

@@ -44,14 +44,12 @@ function ProjectListTitle({
   }
 
   return (
-    <h1
-      id="main-content"
-      tabIndex={-1}
+    <div
       className={classnames('project-list-title', className)}
       {...extraProps}
     >
       {message}
-    </h1>
+    </div>
   )
 }
 

services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer-base.tsx

@@ -23,7 +23,7 @@ function FatFooterBase() {
   const currentYear = new Date().getFullYear()
 
   return (
-    <div className="fat-footer-base">
+    <footer className="fat-footer-base">
       <div className="fat-footer-base-section fat-footer-base-meta">
         <div className="fat-footer-base-item">
           <div className="fat-footer-base-copyright" translate="no">
@@ -62,7 +62,7 @@ function FatFooterBase() {
           />
         </div>
       </div>
-    </div>
+    </footer>
   )
 }
 

services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer.tsx

@@ -91,7 +91,11 @@ function FatFooter() {
 
   return (
     <footer className="fat-footer hidden-print">
-      <div className="fat-footer-container">
+      <div
+        role="navigation"
+        aria-label={t('footer_navigation')}
+        className="fat-footer-container"
+      >
         <div className={`fat-footer-sections ${hideFatFooter ? 'hidden' : ''}`}>
           <div className="footer-section" id="footer-brand">
             <a href="/" aria-label={t('overleaf')} className="footer-brand">

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx

@@ -61,7 +61,6 @@ function DefaultNavbar(
             '--navbar-brand-image-redesign-url': `url("${overleafBlackLogo}")`,
           } as CSSPropertiesWithVariables
         }
-        aria-label={t('primary')}
       >
         <Container className="navbar-container" fluid>
           <div className="navbar-header">
@@ -93,7 +92,7 @@ function DefaultNavbar(
               <Navbar.Toggle
                 aria-controls="navbar-main-collapse"
                 aria-expanded="false"
-                aria-label={t('primary')}
+                aria-label={t('main_navigation')}
               >
                 {showCloseIcon && expanded ? (
                   <X />

services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss

@@ -140,14 +140,15 @@
   align-items: center;
   margin-bottom: var(--spacing-05);
   min-height: 36px;
+}
 
-  .project-list-title {
-    @include heading-sm;
+.project-list-title {
+  min-width: 0;
+  color: $content-secondary;
 
-    color: $content-secondary;
-    font-weight: bold;
-    min-width: 0;
-  }
+  @include heading-sm;
+
+  font-weight: bold;
 }
 
 .project-tools {

services/web/locales/en.json

@@ -59,7 +59,6 @@
   "account_billed_manually": "Account billed manually",
   "account_has_been_link_to_institution_account": "Your __appName__ account on <b>__email__</b> has been linked to your <b>__institutionName__</b> institutional account.",
   "account_has_past_due_invoice_change_plan_warning": "Your account currently has a past due invoice. You will not be able to change your plan until this is resolved.",
-  "account_help": "Account and help",
   "account_linking": "Account linking",
   "account_managed_by_group_administrator": "Your account is managed by your group administrator (__admin__)",
   "account_not_linked_to_dropbox": "Your account is not linked to Dropbox",
@@ -745,7 +744,6 @@
   "features": "Features",
   "features_like_track_changes": "Features like real-time track changes",
   "february": "February",
-  "feedback": "Feedback",
   "figure": "Figure",
   "file": "File",
   "file_action_created": "Created",
@@ -766,7 +764,6 @@
   "file_too_large": "File too large",
   "file_tree": "File tree",
   "files_cannot_include_invalid_characters": "File name is empty or contains invalid characters",
-  "files_collaboration_integrations_logs": "Files, collaboration, integrations, error logs",
   "files_selected": "files selected.",
   "filter_projects": "Filter projects",
   "filters": "Filters",
@@ -790,6 +787,7 @@
   "font_size": "Font Size",
   "footer_about_us": "About us",
   "footer_contact_us": "Contact us",
+  "footer_navigation": "Footer navigation",
   "footnotes": "Footnotes",
   "for_business": "For business",
   "for_government": "For government",
@@ -951,7 +949,6 @@
   "help": "Help",
   "help_and_resources": "Help & resources",
   "help_articles_matching": "Help articles matching your subject",
-  "help_editor_settings": "Help and editor settings",
   "help_guides": "Help guides",
   "help_improve_overleaf_fill_out_this_survey": "If you would like to help us improve Overleaf, please take a moment to fill out <0>this survey</0>.",
   "help_improve_screen_reader_fill_out_this_survey": "Help us improve your experience using a screen reader with __appName__ by filling out this quick survey.",
@@ -1307,6 +1304,7 @@
   "main_bibliography_file_for_this_project": "Main bibliography file for this project",
   "main_document": "Main document",
   "main_file_not_found": "Unknown main document",
+  "main_navigation": "Main navigation",
   "maintenance": "Maintenance",
   "make_a_copy": "Make a copy",
   "make_email_primary_description": "Make this the primary email, used to log in",
@@ -1482,7 +1480,6 @@
   "not_now": "Not now",
   "not_registered": "Not registered",
   "note_features_under_development": "<0>Please note</0> that features in this program are still being tested and actively developed. This means that they might <0>change</0>, be <0>removed</0> or <0>become part of a premium plan</0>",
-  "notification": "Notification",
   "notification_features_upgraded_by_affiliation": "Good news! Your affiliated organization __institutionName__ has an Overleaf subscription, and you now have access to all of Overleaf’s Professional features.",
   "notification_personal_and_group_subscriptions": "We’ve spotted that you’ve got <0>more than one active __appName__ subscription</0>. To avoid paying more than you need to, <1>review your subscriptions</1>.",
   "notification_personal_subscription_not_required_due_to_affiliation": " Good news! Your affiliated organization __institutionName__ has an Overleaf subscription, and you now have access to Overleaf’s Professional features through your affiliation. You can cancel your individual subscription without losing access to any features.",
@@ -1619,7 +1616,6 @@
   "pdf_only_hide_editor": "PDF only <0>(hide editor)</0>",
   "pdf_preview": "PDF preview",
   "pdf_preview_error": "There was a problem displaying the compilation results for this project.",
-  "pdf_preview_logs": "PDF preview and logs",
   "pdf_rendering_error": "PDF Rendering Error",
   "pdf_unavailable_for_download": "PDF unavailable for download",
   "pdf_viewer": "PDF Viewer",
@@ -1700,7 +1696,6 @@
   "primarily_work_study_question_nonprofit_ngo": "Nonprofit or NGO",
   "primarily_work_study_question_other": "Other",
   "primarily_work_study_question_university_school": "University or school",
-  "primary": "Primary",
   "primary_certificate": "Primary certificate",
   "primary_email_check_question": "Is <0>__email__</0> still your email address?",
   "priority_support": "Priority support",
@@ -1720,17 +1715,14 @@
   "professional": "Professional",
   "progress_bar_percentage": "Progress bar from 0 to 100%",
   "project": "project",
-  "project_actions": "Project actions",
   "project_approaching_file_limit": "This project is approaching the file limit",
-  "project_categories_tags": "Project categories and tags",
   "project_figure_modal": "Project",
   "project_files": "Project files",
-  "project_files_history": "Project files history",
-  "project_files_outline": "Project files and outline",
   "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_labels": "Project history and labels",
+  "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",
   "project_name": "Project Name",
   "project_not_linked_to_github": "This project is not linked to a GitHub repository. You can create a repository for it in GitHub:",

services/web/test/frontend/components/pdf-preview/pdf-js-viewer.spec.tsx

@@ -31,12 +31,10 @@ describe('<PdfJSViewer/>', function () {
 
     cy.waitForCompile({ pdf: true })
 
-    cy.findByTestId('pdfjs-viewer-inner').within(() => {
-      cy.findByLabelText(`Page ${FSI}1${PDI}`)
-      cy.findByLabelText(`Page ${FSI}2${PDI}`)
-      cy.findByLabelText(`Page ${FSI}3${PDI}`)
-      cy.findByLabelText(`Page ${FSI}4${PDI}`).should('not.exist')
-    })
+    cy.findByRole('region', { name: `Page ${FSI}1${PDI}` })
+    cy.findByRole('region', { name: `Page ${FSI}2${PDI}` })
+    cy.findByRole('region', { name: `Page ${FSI}3${PDI}` })
+    cy.findByRole('region', { name: `Page ${FSI}4${PDI}` }).should('not.exist')
 
     cy.contains('Your Paper')
   })
@@ -98,9 +96,7 @@ describe('<PdfJSViewer/>', function () {
 
     cy.waitForCompile({ pdf: true })
 
-    cy.findByTestId('pdfjs-viewer-inner').within(() => {
-      cy.findByLabelText(`Page ${FSI}1${PDI}`)
-    })
+    cy.findByRole('region', { name: `Page ${FSI}1${PDI}` })
 
     cy.then(() => unmountComponentAtNode(getContainerEl()))
   })

services/web/test/frontend/features/history/components/change-list.spec.tsx

@@ -144,19 +144,7 @@ describe('change list (Bootstrap 5)', function () {
           cy.findByRole('button', { name: /delete/i }).should('not.exist')
         })
       )
-      cy.findByRole('complementary', {
-        name: /Project history and labels/i,
-      }).within(() => {
-        cy.findByRole('group', {
-          name: /Show all of the project history/i,
-        }).within(() => {
-          cy.findByText(/Labels/i).click()
-        })
-        cy.findByRole('radio', { name: /Labels/i }).should('be.checked')
-        cy.findByRole('radio', { name: /All history/i }).should(
-          'not.be.checked'
-        )
-      })
+      cy.findByLabelText(/labels/i).click({ force: true })
       cy.findAllByTestId('history-version-details').as('details')
       // first details on labels is always "current version", start testing on second
       cy.get('@details').should('have.length', 3)
@@ -349,19 +337,7 @@ describe('change list (Bootstrap 5)', function () {
         }
       )
       waitForData()
-      cy.findByRole('complementary', {
-        name: /Project history and labels/i,
-      }).within(() => {
-        cy.findByRole('group', {
-          name: /Show all of the project history/i,
-        }).within(() => {
-          cy.findByText(/Labels/i).click()
-        })
-        cy.findByRole('radio', { name: /Labels/i }).should('be.checked')
-        cy.findByRole('radio', { name: /All history/i }).should(
-          'not.be.checked'
-        )
-      })
+      cy.findByLabelText(/labels/i).click({ force: true })
     })
 
     it('shows the dropdown menu item for adding new labels', function () {
@@ -712,19 +688,7 @@ describe('change list (Bootstrap 5)', function () {
 
       waitForData()
 
-      cy.findByRole('complementary', {
-        name: /Project history and labels/i,
-      }).within(() => {
-        cy.findByRole('group', {
-          name: /Show all of the project history/i,
-        }).within(() => {
-          cy.findByText(/Labels/i).click()
-        })
-        cy.findByRole('radio', { name: /Labels/i }).should('be.checked')
-        cy.findByRole('radio', { name: /All history/i }).should(
-          'not.be.checked'
-        )
-      })
+      cy.findByLabelText(/labels/i).click({ force: true })
 
       // One pseudo-label for the current state, one for our label
       cy.get('.history-version-label').should('have.length', 2)