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

[web] Revert "Improve landmarks on the Project dashboard and Editor pages" GitOrigin-RevId: 4bf0bbb9466db4436df4a72dcc70c320263dd168
2026-05-23 17:19:37 +02:00 · 2025-07-23 16:25:28 +02:00
parent a877979b11
commit ca71fec33b
41 changed files with 166 additions and 331 deletions
--- a/server-ce/test/git-bridge.spec.ts
+++ b/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')
--- a/server-ce/test/sandboxed-compiles.spec.ts
+++ b/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')
    })
--- a/server-ce/test/templates.spec.ts
+++ b/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')

--- a/server-ce/test/upgrading.spec.ts
+++ b/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()
--- a/services/web/app/views/layout/fat-footer-website-redesign.pug
+++ b/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)
--- a/services/web/app/views/layout/fat-footer.pug
+++ b/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)
--- a/services/web/app/views/layout/navbar-marketing-bootstrap-5.pug
+++ b/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
--- a/services/web/app/views/layout/navbar-marketing.pug
+++ b/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
--- a/services/web/app/views/layout/navbar-website-redesign.pug
+++ b/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'
--- a/services/web/app/views/project/ide-react.pug
+++ b/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%')
--- a/services/web/frontend/extracted-translations.json
+++ b/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": "",
--- a/services/web/frontend/js/features/chat/components/chat-pane.tsx
+++ b/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"
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.tsx
+++ b/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>
  )
 })

--- 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
@@ -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>
--- a/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx
+++ b/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 */}
--- a/services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx
+++ b/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>
  )
 }
--- a/services/web/frontend/js/features/ide-react/components/history-sidebar.tsx
+++ b/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')}
    />
  )
 }
--- a/services/web/frontend/js/features/ide-redesign/components/chat/chat.tsx
+++ b/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"
--- a/services/web/frontend/js/features/ide-redesign/components/integrations-panel/integration-card.tsx
+++ b/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>
--- a/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx
+++ b/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' && (
--- a/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-preview-hybrid-toolbar.tsx
+++ b/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>
  )
 }

--- a/services/web/frontend/js/features/ide-redesign/components/rail-panel-header.tsx
+++ b/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>
  )
 }
--- a/services/web/frontend/js/features/ide-redesign/components/rail.tsx
+++ b/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
--- a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
+++ b/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>
  )
 }
--- a/services/web/frontend/js/features/outline/components/outline-pane.tsx
+++ b/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
--- 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
@@ -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 (
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.tsx
+++ b/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>
  )
 }

--- a/services/web/frontend/js/features/preview/components/preview-log-entry-header.tsx
+++ b/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>
  )
 }

--- a/services/web/frontend/js/features/project-list/components/notifications/user-notifications.tsx
+++ b/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>
  )
 }

--- a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
+++ b/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 className="d-md-none">
+                    <CurrentPlanWidget />
                  </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>
-                  <div className="mt-3">
-                    <TableContainer bordered>
-                      {tableTopArea}
-                      <ProjectListTable />
-                    </TableContainer>
-                  </div>
-                  <div className="mt-3">
-                    <LoadMore />
+              </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>
  )
 }
--- a/services/web/frontend/js/features/project-list/components/project-list-root.tsx
+++ b/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>
--- 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
@@ -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>
--- a/services/web/frontend/js/features/project-list/components/sidebar/sidebar.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/sidebar.tsx
--- a/services/web/frontend/js/features/project-list/components/title/project-list-title.tsx
+++ b/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>
  )
 }

--- a/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer-base.tsx
+++ b/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>
  )
 }

--- a/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer.tsx
+++ b/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">
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx
+++ b/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 />
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
+++ b/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 {
--- a/services/web/locales/en.json
+++ b/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:",
--- a/services/web/test/frontend/components/pdf-preview/pdf-js-viewer.spec.tsx
+++ b/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()))
  })
--- a/services/web/test/frontend/features/history/components/change-list.spec.tsx
+++ b/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)