Improve landmarks on the Project dashboard and Editor pages (#27401)

* Improve landmarks for the Project Dasbhboard

* Improve landmarks for the IDE page

* Improve landmarks for the new redesigned IDE page

* Sort locales

* Fix typo OlButtonToolbar -> OLButtonToolbar

* Update project navbar translation

* Update labels

* Redundant main landmark

* Fix failing test

* Descriptive name for the rails tab

* Header should not be in a button

* Update translation to Account and help

* Update translation to Project categories and tags

* Add explanations

* Show landmark for the survey widget when it's rendered

* Suggestions for nav stretch/scroll/borders

* Source format

---------

Co-authored-by: Antoine Clausse <antoine.clausse@overleaf.com>
GitOrigin-RevId: d05a738e782d2edb229529aadf92b9004dfd973a

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

@@ -55,6 +55,8 @@ 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' && (
@@ -105,6 +107,8 @@ 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,6 +7,7 @@ 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'
@@ -18,10 +19,11 @@ export default function EditorSidebar() {
   const { outlineEnabled, outlinePanelRef } = useOutlinePane()
 
   return (
-    <aside
+    <nav
       className={classNames('ide-react-editor-sidebar', {
         hidden: view === 'history',
       })}
+      aria-label={t('project_files_outline')}
     >
       {editorSidebarComponents.map(
         ({ import: { default: Component }, path }) => (
@@ -53,6 +55,6 @@ export default function EditorSidebar() {
           <OutlineContainer />
         </Panel>
       </PanelGroup>
-    </aside>
+    </nav>
   )
 }

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

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