Merge pull request #29520 from overleaf/mag-tool-tip-casing

Update toolbar tooltips

GitOrigin-RevId: 80d3fa906776684275c856d1a74171d5b8a4f65a

server-ce/test/editor.spec.ts

@@ -125,7 +125,7 @@ describe('editor', () => {
     it('symbol palette', () => {
       createNewFile()
 
-      cy.get('button[aria-label="Toggle Symbol Palette"]').click({
+      cy.get('button[aria-label="Insert symbol"]').click({
         force: true,
       })
       cy.get('button').contains('𝜉').click()

services/web/frontend/extracted-translations.json

@@ -1557,7 +1557,6 @@
   "search_replace_all": "",
   "search_replace_with": "",
   "search_search_for": "",
-  "search_this_file": "",
   "search_whole_word": "",
   "search_within_selection": "",
   "searched_path_for_lines_containing": "",
@@ -1919,13 +1918,13 @@
   "too_many_search_results": "",
   "too_recently_compiled": "",
   "took_a_while": "",
-  "toolbar_bullet_list": "",
+  "toolbar_bold": "",
+  "toolbar_bulleted_list": "",
+  "toolbar_change_editor_mode": "",
   "toolbar_choose_section_heading_level": "",
   "toolbar_code_visual_editor_switch": "",
   "toolbar_decrease_indent": "",
   "toolbar_editor": "",
-  "toolbar_format_bold": "",
-  "toolbar_format_italic": "",
   "toolbar_generate_math": "",
   "toolbar_generate_table": "",
   "toolbar_increase_indent": "",
@@ -1939,10 +1938,14 @@
   "toolbar_insert_math_and_symbols": "",
   "toolbar_insert_math_lowercase": "",
   "toolbar_insert_misc": "",
+  "toolbar_insert_symbol": "",
   "toolbar_insert_table": "",
+  "toolbar_italic": "",
   "toolbar_list_indentation": "",
   "toolbar_numbered_list": "",
   "toolbar_redo": "",
+  "toolbar_search_file": "",
+  "toolbar_select_style": "",
   "toolbar_selected_projects": "",
   "toolbar_selected_projects_management_actions": "",
   "toolbar_selected_projects_remove": "",
@@ -1951,7 +1954,6 @@
   "toolbar_table_insert_table_lowercase": "",
   "toolbar_text_formatting": "",
   "toolbar_text_style": "",
-  "toolbar_toggle_symbol_palette": "",
   "toolbar_undo": "",
   "toolbar_undo_redo_actions": "",
   "tools": "",

services/web/frontend/js/features/source-editor/components/editor-switch.tsx

@@ -102,7 +102,16 @@ const RichTextToggle: FC<{
     )
   }
 
-  return toggle
+  return (
+    <OLTooltip
+      id="rich-text-toggle-tooltip"
+      description={t('toolbar_change_editor_mode')}
+      overlayProps={{ placement: 'bottom' }}
+      tooltipProps={{ className: 'tooltip-wide' }}
+    >
+      {toggle}
+    </OLTooltip>
+  )
 }
 
 export default memo(EditorSwitch)

services/web/frontend/js/features/source-editor/components/toolbar/section-heading-dropdown.tsx

@@ -15,6 +15,7 @@ import useDropdown from '../../../../shared/hooks/use-dropdown'
 import { emitToolbarEvent } from '../../extensions/toolbar/utils/analytics'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 
 const levels = new Map([
   ['text', 'Normal text'],
@@ -54,20 +55,26 @@ export const SectionHeadingDropdown = () => {
 
   return (
     <>
-      <button
-        ref={toggleButtonRef}
-        type="button"
-        id="section-heading-menu-button"
-        aria-haspopup="true"
-        aria-controls="section-heading-menu"
-        aria-label={t('toolbar_choose_section_heading_level')}
-        className="ol-cm-toolbar-menu-toggle"
-        onMouseDown={event => event.preventDefault()}
-        onClick={() => setOverflowOpen(!overflowOpen)}
+      <OLTooltip
+        id="section-heading-dropdown-tooltip"
+        description={t('toolbar_select_style')}
+        overlayProps={{ placement: 'bottom' }}
       >
-        <span>{currentLabel}</span>
-        <MaterialIcon type="expand_more" />
-      </button>
+        <button
+          ref={toggleButtonRef}
+          type="button"
+          id="section-heading-menu-button"
+          aria-haspopup="true"
+          aria-controls="section-heading-menu"
+          aria-label={t('toolbar_choose_section_heading_level')}
+          className="ol-cm-toolbar-menu-toggle"
+          onMouseDown={event => event.preventDefault()}
+          onClick={() => setOverflowOpen(!overflowOpen)}
+        >
+          <span>{currentLabel}</span>
+          <MaterialIcon type="expand_more" />
+        </button>
+      </OLTooltip>
 
       {overflowOpen && (
         <OLOverlay

services/web/frontend/js/features/source-editor/components/toolbar/toggle-search-button.tsx

@@ -12,7 +12,7 @@ export const ToggleSearchButton: FC<{ state: EditorState }> = ({ state }) => {
   return (
     <ToolbarButton
       id="toolbar-toggle-search"
-      label={t('search_this_file')}
+      label={t('toolbar_search_file')}
       command={commands.toggleSearch}
       active={searchPanelOpen(state)}
       icon="search"

services/web/frontend/js/features/source-editor/components/toolbar/toolbar-button.tsx

@@ -73,8 +73,10 @@ export const ToolbarButton = memo<{
 
   const description = (
     <>
-      <div>{label}</div>
-      {shortcut && <div>{shortcut}</div>}
+      <div>
+        {label}
+        {shortcut && <span> ({shortcut})</span>}
+      </div>
     </>
   )
 

services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx

@@ -82,7 +82,7 @@ export const ToolbarItems: FC<{
             >
               <ToolbarButton
                 id="toolbar-format-bold"
-                label={t('toolbar_format_bold')}
+                label={t('toolbar_bold')}
                 command={commands.toggleBold}
                 active={isActive('\\textbf')}
                 icon="format_bold"
@@ -90,7 +90,7 @@ export const ToolbarItems: FC<{
               />
               <ToolbarButton
                 id="toolbar-format-italic"
-                label={t('toolbar_format_italic')}
+                label={t('toolbar_italic')}
                 command={commands.toggleItalic}
                 active={isActive('\\textit')}
                 icon="format_italic"
@@ -108,7 +108,7 @@ export const ToolbarItems: FC<{
               {symbolPaletteAvailable && (
                 <ToolbarButton
                   id="toolbar-toggle-symbol-palette"
-                  label={t('toolbar_toggle_symbol_palette')}
+                  label={t('toolbar_insert_symbol')}
                   active={showSymbolPalette}
                   command={toggleSymbolPalette}
                   icon="Ω"
@@ -163,7 +163,7 @@ export const ToolbarItems: FC<{
             >
               <ToolbarButton
                 id="toolbar-bullet-list"
-                label={t('toolbar_bullet_list')}
+                label={t('toolbar_bulleted_list')}
                 command={commands.toggleBulletList}
                 icon="format_list_bulleted"
               />

services/web/frontend/js/i18n-resources/writefull.ts

@@ -189,8 +189,8 @@ const en = {
     'errors.error-hit-limit-freemium.heading': 'You’re on fire!',
     'errors.error-hit-limit-freemium.body':
       'You’ve hit your Writefull quota. Upgrade now for unlimited language suggestions and LaTeX support, and early access to upcoming features like TikZ generation.',
-    'toolbar.abstract-generator.name': 'Abstract Generator',
-    'toolbar.title-generator.name': 'Title Generator',
+    'toolbar.abstract-generator.name': 'Abstract generator',
+    'toolbar.title-generator.name': 'Title generator',
     'toolbar.create-table.name': 'Create tables',
     'toolbar.create-table.tooltip': 'Generate tables instantly',
     'toolbar.create-equation.name': 'Create equation',

services/web/locales/da.json

@@ -1904,8 +1904,6 @@
   "toolbar_bullet_list": "Punktliste",
   "toolbar_choose_section_heading_level": "Vælg overskriftsniveau",
   "toolbar_decrease_indent": "Formindsk indryk",
-  "toolbar_format_bold": "Fed skrift",
-  "toolbar_format_italic": "Kursiv skrift",
   "toolbar_increase_indent": "Forøg indryk",
   "toolbar_insert_citation": "Indsæt citation",
   "toolbar_insert_cross_reference": "Indsæt henvisning",
@@ -1927,7 +1925,6 @@
   "toolbar_table_insert_size_table": "Indsæt __size__ tabel",
   "toolbar_table_insert_table_lowercase": "Indsæt tabel",
   "toolbar_text_formatting": "Tekstformatering",
-  "toolbar_toggle_symbol_palette": "Vis/Skjul symbolpalet",
   "toolbar_undo": "Fortryd",
   "toolbar_undo_redo_actions": "Fortryd/gentag handlinger",
   "tooltip_hide_filetree": "Tryk for at skjule fil-træet",

services/web/locales/en.json

@@ -2010,7 +2010,6 @@
   "search_replace_all": "Replace All",
   "search_replace_with": "Replace with",
   "search_search_for": "Search for",
-  "search_this_file": "Search this file",
   "search_whole_word": "Whole word",
   "search_within_selection": "Within selection",
   "searched_path_for_lines_containing": "Searched __path__ for lines containing \"__query__\"",
@@ -2437,30 +2436,34 @@
   "too_many_search_results": "There are more than 100 results. Please refine your search.",
   "too_recently_compiled": "This project was compiled very recently, so this compile has been skipped.",
   "took_a_while": "That took a while...",
-  "toolbar_bullet_list": "Bullet List",
+  "toolbar_bold": "Bold",
+  "toolbar_bulleted_list": "Bulleted list",
+  "toolbar_change_editor_mode": "Change editor mode: Code / Visual",
   "toolbar_choose_section_heading_level": "Choose section heading level",
   "toolbar_code_visual_editor_switch": "Code and visual editor switch",
-  "toolbar_decrease_indent": "Decrease Indent",
+  "toolbar_decrease_indent": "Decrease indent",
   "toolbar_editor": "Editor tools",
-  "toolbar_format_bold": "Format Bold",
-  "toolbar_format_italic": "Format Italic",
-  "toolbar_generate_math": "Generate Math",
-  "toolbar_generate_table": "Generate Table",
-  "toolbar_increase_indent": "Increase Indent",
-  "toolbar_insert_citation": "Insert Citation",
-  "toolbar_insert_cross_reference": "Insert Cross-reference",
-  "toolbar_insert_display_math": "Insert Display Math",
-  "toolbar_insert_figure": "Insert Figure",
-  "toolbar_insert_inline_math": "Insert Inline Math",
-  "toolbar_insert_link": "Insert Link",
-  "toolbar_insert_math": "Insert Math",
-  "toolbar_insert_math_and_symbols": "Insert Math and Symbols",
+  "toolbar_generate_math": "Generate math",
+  "toolbar_generate_table": "Generate table",
+  "toolbar_increase_indent": "Increase indent",
+  "toolbar_insert_citation": "Insert citation",
+  "toolbar_insert_cross_reference": "Insert cross reference",
+  "toolbar_insert_display_math": "Insert display math",
+  "toolbar_insert_figure": "Insert figure",
+  "toolbar_insert_inline_math": "Insert inline math",
+  "toolbar_insert_link": "Insert link",
+  "toolbar_insert_math": "Insert math",
+  "toolbar_insert_math_and_symbols": "Insert math and symbols",
   "toolbar_insert_math_lowercase": "Insert math",
-  "toolbar_insert_misc": "Insert Misc (links, citations, cross-references, figures, tables)",
-  "toolbar_insert_table": "Insert Table",
-  "toolbar_list_indentation": "List and Indentation",
-  "toolbar_numbered_list": "Numbered List",
+  "toolbar_insert_misc": "Insert misc (links, citations, cross-references, figures, tables)",
+  "toolbar_insert_symbol": "Insert symbol",
+  "toolbar_insert_table": "Insert table",
+  "toolbar_italic": "Italic",
+  "toolbar_list_indentation": "List and indentation",
+  "toolbar_numbered_list": "Numbered list",
   "toolbar_redo": "Redo",
+  "toolbar_search_file": "Search file",
+  "toolbar_select_style": "Select style",
   "toolbar_selected_projects": "Selected projects",
   "toolbar_selected_projects_management_actions": "Selected projects management actions",
   "toolbar_selected_projects_remove": "Remove selected projects",
@@ -2469,7 +2472,6 @@
   "toolbar_table_insert_table_lowercase": "Insert table",
   "toolbar_text_formatting": "Text formatting",
   "toolbar_text_style": "Text style",
-  "toolbar_toggle_symbol_palette": "Toggle Symbol Palette",
   "toolbar_undo": "Undo",
   "toolbar_undo_redo_actions": "Undo/Redo actions",
   "tools": "Tools",

services/web/locales/zh-CN.json

@@ -2280,8 +2280,6 @@
   "toolbar_code_visual_editor_switch": "代码和可视化编辑器切换",
   "toolbar_decrease_indent": "减少缩进",
   "toolbar_editor": "编辑器工具",
-  "toolbar_format_bold": "粗体格式",
-  "toolbar_format_italic": "斜体格式",
   "toolbar_generate_math": "生成数学公式",
   "toolbar_generate_table": "生成表格",
   "toolbar_increase_indent": "增加缩进",
@@ -2307,7 +2305,6 @@
   "toolbar_table_insert_table_lowercase": "插入表格",
   "toolbar_text_formatting": "文本格式",
   "toolbar_text_style": "文本样式",
-  "toolbar_toggle_symbol_palette": "数学符号面板开关",
   "toolbar_undo": "撤销",
   "toolbar_undo_redo_actions": "撤消/重做操作",
   "tools": "工具",

services/web/test/frontend/features/source-editor/components/codemirror-editor-figure-modal.spec.tsx

@@ -13,9 +13,27 @@ import getMeta from '@/utils/meta'
 import { mockProject } from '../helpers/mock-project'
 import { base64image } from '../fixtures/image'
 
-const clickToolbarButton = (text: string) => {
-  cy.findByLabelText(text).click()
-  cy.findByLabelText(text).trigger('mouseout')
+const findInsertFigureToolbarButton = () => {
+  return cy.findByRole('toolbar').within(() => {
+    return cy
+      .findByRole('button', { name: /Insert figure/i })
+      .as('insertFigureToolbarButton')
+  })
+}
+
+const findInsertFigureDialogButton = () => {
+  return cy.findByRole('dialog').within(() => {
+    // There are two buttons with this name, one in the footer and one in the toolbar
+    return cy
+      .findByRole('button', { name: /Insert figure/i })
+      .as('insertFigureDialogButton')
+  })
+}
+
+const clickFigureToolbarButton = () => {
+  findInsertFigureToolbarButton()
+  cy.get('@insertFigureToolbarButton').click()
+  cy.get('@insertFigureToolbarButton').trigger('mouseout')
 }
 
 const chooseFileFromComputer = () => {
@@ -103,13 +121,14 @@ describe('<FigureModal />', function () {
   describe('Upload from computer source', function () {
     beforeEach(function () {
       cy.interceptFileUpload()
-      clickToolbarButton('Insert Figure')
+      clickFigureToolbarButton()
       cy.findByRole('menu').within(() => {
         cy.findByText('Upload from computer').click()
       })
       cy.findByLabelText('Uppy Dashboard')
         .get('.uppy-Dashboard-input:first')
         .as('file-input')
+      findInsertFigureDialogButton()
     })
 
     it('Shows file name and size when selecting file', function () {
@@ -136,18 +155,19 @@ describe('<FigureModal />', function () {
     })
 
     it('Enables insert button when choosing file', function () {
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.disabled')
+      cy.get('@insertFigureDialogButton').should('be.disabled')
       chooseFileFromComputer()
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.enabled')
+      cy.get('@insertFigureDialogButton').should('be.enabled')
     })
   })
 
   describe('Upload from project files source', function () {
     beforeEach(function () {
-      clickToolbarButton('Insert Figure')
+      clickFigureToolbarButton()
       cy.findByRole('menu').within(() => {
         cy.findByText('From project files').click()
       })
+      findInsertFigureDialogButton()
     })
 
     it('Lists files from project', function () {
@@ -161,12 +181,12 @@ describe('<FigureModal />', function () {
     })
 
     it('Enables insert button when choosing file', function () {
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.disabled')
+      cy.get('@insertFigureDialogButton').should('be.disabled')
       cy.findByRole('combobox', { name: 'Image file' }).click()
       cy.findByRole('listbox').within(() => {
         cy.findByText('frog.jpg').click()
       })
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.enabled')
+      cy.get('@insertFigureDialogButton').should('be.enabled')
     })
 
     it('Inserts file when pressing insert button', function () {
@@ -174,7 +194,7 @@ describe('<FigureModal />', function () {
       cy.findByRole('listbox').within(() => {
         cy.findByText('frog.jpg').click()
       })
-      cy.findByRole('button', { name: 'Insert figure' }).click()
+      cy.get('@insertFigureDialogButton').click()
 
       // Note that we have to include the 'edit' text from the edit button's
       // icon, which is literal text in the document
@@ -190,16 +210,17 @@ describe('<FigureModal />', function () {
       cy.interceptProjectListing()
       cy.interceptCompile()
       cy.interceptLinkedFile()
-      clickToolbarButton('Insert Figure')
+      clickFigureToolbarButton()
       cy.findByRole('menu').within(() => {
         cy.findByRole('button', { name: 'From another project' }).click()
       })
       cy.findByRole('combobox', { name: 'Project' }).as('project-dropdown')
       cy.findByRole('combobox', { name: 'Image file' }).as('file-dropdown')
+      findInsertFigureDialogButton()
     })
 
     it('List projects and files in projects', function () {
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.disabled')
+      cy.get('@insertFigureDialogButton').should('be.disabled')
       cy.get('@file-dropdown').should('be.disabled')
       cy.get('@project-dropdown').click()
       cy.findByRole('listbox').within(() => {
@@ -215,11 +236,11 @@ describe('<FigureModal />', function () {
       cy.get('@file-select').within(() => {
         cy.findByText('frog.jpg').click()
       })
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.enabled')
+      cy.get('@insertFigureDialogButton').should('be.enabled')
     })
 
     it('Enables insert button when choosing file', function () {
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.disabled')
+      cy.get('@insertFigureDialogButton').should('be.disabled')
       cy.get('@project-dropdown').click()
       cy.findByRole('listbox').within(() => {
         cy.findByRole('option', { name: 'My first project' }).click()
@@ -228,11 +249,11 @@ describe('<FigureModal />', function () {
       cy.findByRole('listbox').within(() => {
         cy.findByRole('option', { name: 'frog.jpg' }).click()
       })
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.enabled')
+      cy.get('@insertFigureDialogButton').should('be.enabled')
     })
 
     it('Closes project dropdown on pressing Esc key but leaves modal open', function () {
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.disabled')
+      cy.get('@insertFigureDialogButton').should('be.disabled')
       cy.get('@project-dropdown').click()
       cy.findByRole('listbox').should('exist')
       cy.get('@project-dropdown').type('{esc}', { force: true })
@@ -311,7 +332,7 @@ describe('<FigureModal />', function () {
           hasLinkUrlFeature: false,
         })
         mount()
-        clickToolbarButton('Insert Figure')
+        clickFigureToolbarButton()
       })
       it('should not have import from url option', function () {
         cy.findByRole('menu').within(() => {
@@ -327,7 +348,7 @@ describe('<FigureModal />', function () {
           hasLinkUrlFeature: true,
         })
         mount()
-        clickToolbarButton('Insert Figure')
+        clickFigureToolbarButton()
       })
       it('should not have import from project file option', function () {
         cy.findByRole('menu').within(() => {
@@ -339,7 +360,7 @@ describe('<FigureModal />', function () {
     function setupFromAnotherProject() {
       mount()
       cy.interceptProjectListing()
-      clickToolbarButton('Insert Figure')
+      clickFigureToolbarButton()
       cy.findByRole('menu').within(() => {
         cy.findByText('From another project').click()
       })
@@ -397,7 +418,7 @@ describe('<FigureModal />', function () {
   describe('From URL source', function () {
     beforeEach(function () {
       cy.interceptLinkedFile()
-      clickToolbarButton('Insert Figure')
+      clickFigureToolbarButton()
       cy.findByRole('menu').within(() => {
         cy.findByText('From URL').click()
       })
@@ -411,6 +432,7 @@ describe('<FigureModal />', function () {
       cy.findByRole('checkbox', { name: 'Include caption' }).as(
         'include-caption-checkbox'
       )
+      findInsertFigureDialogButton()
     })
 
     it('Auto fills name based on url', function () {
@@ -421,14 +443,14 @@ describe('<FigureModal />', function () {
     })
 
     it('Enables insert button when name and url is available', function () {
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.disabled')
+      cy.get('@insertFigureDialogButton').should('be.disabled')
       cy.get('@image-url-input').type('https://my-fake-website.com/frog.jpg')
-      cy.findByRole('button', { name: 'Insert figure' }).should('be.enabled')
+      cy.get('@insertFigureDialogButton').should('be.enabled')
     })
 
     it('Adds linked file when pressing insert', function () {
       cy.get('@image-url-input').type('https://my-fake-website.com/frog.jpg')
-      cy.findByRole('button', { name: 'Insert figure' }).click()
+      cy.get('@insertFigureDialogButton').click()
 
       cy.get('@linked-file-request').should('have.been.calledWithMatch', {
         body: {
@@ -449,7 +471,7 @@ describe('<FigureModal />', function () {
 
     it('Selects the caption when the figure is inserted with a caption', function () {
       cy.get('@image-url-input').type('https://my-fake-website.com/frog.jpg')
-      cy.findByRole('button', { name: 'Insert figure' }).click()
+      cy.get('@insertFigureDialogButton').click()
 
       cy.get('@linked-file-request').should('have.been.calledWithMatch', {
         body: {
@@ -479,7 +501,7 @@ describe('<FigureModal />', function () {
     it('Selects the label when the figure is inserted without a caption', function () {
       cy.get('@image-url-input').type('https://my-fake-website.com/frog.jpg')
       cy.get('@include-caption-checkbox').uncheck()
-      cy.findByRole('button', { name: 'Insert figure' }).click()
+      cy.get('@insertFigureDialogButton').click()
 
       cy.get('@linked-file-request').should('have.been.calledWithMatch', {
         body: {
@@ -511,7 +533,7 @@ describe('<FigureModal />', function () {
       cy.get('@include-caption-checkbox').uncheck()
       cy.get('@include-label-checkbox').uncheck()
 
-      cy.findByRole('button', { name: 'Insert figure' }).click()
+      cy.get('@insertFigureDialogButton').click()
 
       cy.get('@linked-file-request').should('have.been.calledWithMatch', {
         body: {

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-toolbar.spec.tsx

@@ -84,18 +84,18 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     selectAll()
 
     // bold
-    clickToolbarButton('Format Bold')
+    clickToolbarButton('Bold')
     cy.get('.cm-content').should('have.text', '{hi}')
     cy.get('.ol-cm-command-textbf').should('have.length', 1)
-    clickToolbarButton('Format Bold')
+    clickToolbarButton('Bold')
     cy.get('.cm-content').should('have.text', 'hi')
     cy.get('.ol-cm-command-textbf').should('have.length', 0)
 
     // italic
-    clickToolbarButton('Format Italic')
+    clickToolbarButton('Italic')
     cy.get('.cm-content').should('have.text', '{hi}')
     cy.get('.ol-cm-command-textit').should('have.length', 1)
-    clickToolbarButton('Format Italic')
+    clickToolbarButton('Italic')
     cy.get('.cm-content').should('have.text', 'hi')
     cy.get('.ol-cm-command-textit').should('have.length', 0)
   })
@@ -104,8 +104,8 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     mountEditor('2+3=5')
     selectAll()
 
-    clickToolbarButton('Insert Math')
-    cy.findByRole('button', { name: 'Insert Inline Math' }).click()
+    clickToolbarButton('Insert math')
+    cy.findByRole('button', { name: 'Insert inline math' }).click()
     cy.get('.cm-content').should('have.text', '\\(2+3=5\\)')
   })
 
@@ -113,8 +113,8 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     mountEditor('2+3=5')
     selectAll()
 
-    clickToolbarButton('Insert Math')
-    cy.findByRole('button', { name: 'Insert Display Math' }).click()
+    clickToolbarButton('Insert math')
+    cy.findByRole('button', { name: 'Insert display math' }).click()
     cy.get('.cm-content').should('have.text', '\\[2+3=5\\]')
   })
 
@@ -122,7 +122,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     mountEditor('test')
     selectAll()
 
-    clickToolbarButton('Insert Link')
+    clickToolbarButton('Insert link')
     cy.get('.cm-content').should('have.text', '{test}')
     cy.findByLabelText('URL') // tooltip form
   })
@@ -132,7 +132,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     selectAll()
 
     clickToolbarButton('More editor toolbar items')
-    clickToolbarButton('Bullet List')
+    clickToolbarButton('Bulleted list')
 
     cy.get('.cm-content').should('have.text', ' test')
 
@@ -145,7 +145,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     selectAll()
 
     clickToolbarButton('More editor toolbar items')
-    clickToolbarButton('Numbered List')
+    clickToolbarButton('Numbered list')
 
     cy.get('.cm-content').should('have.text', ' test')
 
@@ -158,7 +158,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     selectAll()
 
     clickToolbarButton('More editor toolbar items')
-    clickToolbarButton('Numbered List')
+    clickToolbarButton('Numbered list')
 
     // expose the markup
     cy.get('.cm-line').eq(0).type('{rightArrow}')
@@ -173,7 +173,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
       ].join('')
     )
 
-    clickToolbarButton('Bullet List')
+    clickToolbarButton('Bulleted list')
 
     cy.get('.cm-content').should(
       'have.text',
@@ -191,7 +191,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     selectAll()
 
     clickToolbarButton('More editor toolbar items')
-    clickToolbarButton('Numbered List')
+    clickToolbarButton('Numbered list')
 
     // expose the markup
     cy.get('.cm-line').eq(0).type('{rightArrow}')
@@ -206,7 +206,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
       ].join('')
     )
 
-    clickToolbarButton('Numbered List')
+    clickToolbarButton('Numbered list')
 
     cy.get('.cm-content').should('have.text', 'test')
   })
@@ -216,7 +216,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     selectAll()
 
     clickToolbarButton('More editor toolbar items')
-    clickToolbarButton('Numbered List')
+    clickToolbarButton('Numbered list')
 
     // expose the markup
     cy.get('.cm-line').eq(1).type('{rightArrow}')
@@ -234,7 +234,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
 
     cy.get('.cm-line').eq(2).click()
 
-    cy.findByRole('button', { name: 'Increase Indent' }).click()
+    cy.findByRole('button', { name: 'Increase indent' }).click()
 
     // expose the markup
     cy.get('.cm-line').eq(1).type('{rightArrow}')
@@ -253,7 +253,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     cy.get('.cm-line').eq(1).click()
 
     clickToolbarButton('More editor toolbar items')
-    clickToolbarButton('Numbered List')
+    clickToolbarButton('Numbered list')
 
     cy.get('.cm-line').eq(0).type('{upArrow}')
 
@@ -274,7 +274,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     selectAll()
 
     clickToolbarButton('More editor toolbar items')
-    clickToolbarButton('Numbered List')
+    clickToolbarButton('Numbered list')
 
     // expose the markup
     cy.get('.cm-line').eq(1).type('{rightArrow}')
@@ -292,7 +292,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
 
     cy.get('.cm-line').eq(2).click()
 
-    cy.findByRole('button', { name: 'Increase Indent' }).click()
+    cy.findByRole('button', { name: 'Increase indent' }).click()
 
     // expose the markup
     cy.get('.cm-line').eq(1).type('{rightArrow}')
@@ -311,7 +311,7 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     cy.get('.cm-line').eq(0).click()
 
     clickToolbarButton('More editor toolbar items')
-    clickToolbarButton('Numbered List')
+    clickToolbarButton('Numbered list')
 
     // expose the markup
     cy.get('.cm-line').eq(1).type('{rightArrow}')
@@ -328,15 +328,15 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
     )
   })
 
-  it('should display the Toggle Symbol Palette button when available', function () {
+  it('should display the Insert symbol button when available', function () {
     window.metaAttributesCache.set('ol-symbolPaletteAvailable', true)
     mountEditor('')
-    clickToolbarButton('Toggle Symbol Palette')
+    clickToolbarButton('Insert symbol')
   })
 
-  it('should not display the Toggle Symbol Palette button when not available', function () {
+  it('should not display the Insert Symbol button when not available', function () {
     window.metaAttributesCache.set('ol-symbolPaletteAvailable', false)
     mountEditor('')
-    cy.findByLabelText('Toggle Symbol Palette').should('not.exist')
+    cy.findByLabelText('Insert symbol').should('not.exist')
   })
 })

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx

@@ -75,7 +75,7 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     cy.get('.cm-line').eq(1).as('second-line')
     cy.get('.cm-line').eq(2).as('third-line')
     cy.get('.cm-line').eq(3).as('fourth-line')
-    cy.get('.ol-cm-toolbar [aria-label="Format Bold"]').as('toolbar-bold')
+    cy.get('.ol-cm-toolbar [aria-label="Bold"]').as('toolbar-bold')
 
     cy.get('@first-line').click()
   })