Improve Server Pro tests to use semantic selectors (#29790)

* Replace placeholders with labels

* Add 'Close dialog' label to modal close button to distinguish from footer Close button

* Add and translate heading on the not found page

* Update textarea to have id matching label's for attribute
Simplify test for template description textarea

* Label PDF zoom level dropdown button

* Improve test selectors to use semantic roles and accessible names

GitOrigin-RevId: d215ddca30ddf844cfffbcf0e528a601b134d772

services/web/test/frontend/components/editor-left-menu/editor-left-menu.spec.tsx

@@ -163,7 +163,7 @@ describe('<EditorLeftMenu />', function () {
         cy.findByRole('heading', { name: 'Copy project' })
 
         // try closing & re-opening the modal with different methods
-        cy.findByRole('button', { name: 'Close' }).click()
+        cy.findByRole('button', { name: 'Close dialog' }).click()
         cy.findByRole('button', { name: 'Copy project' }).click()
         cy.findByRole('button', { name: 'Cancel' }).click()
         cy.findByRole('button', { name: 'Copy project' }).click()

services/web/test/frontend/components/shared/modal.spec.tsx

@@ -43,7 +43,7 @@ describe('<OLModal />', function () {
     cy.findByRole('button', { name: 'Open modal' }).click()
     cy.findByRole('dialog').should('be.visible')
     cy.findByLabelText(/enter text/i).should('be.visible')
-    cy.get('body').type('{esc}')
+    cy.findByRole('button', { name: 'Close dialog' }).click()
     // Modal should hide with single escape (escapeDeactivates: false means FocusTrap doesn't handle it)
     cy.findByRole('dialog').should('not.exist')
     cy.findByRole('button', { name: 'Open modal' }).should('be.visible')
@@ -70,13 +70,13 @@ describe('<OLModal />', function () {
     cy.findByRole('button', { name: 'Open modal' }).click()
     cy.findByRole('dialog').should('be.visible')
 
-    cy.findByRole('button', { name: 'Close' }).should('be.focused')
+    cy.findByRole('button', { name: 'Close dialog' }).should('be.focused')
     cy.focused().tab()
     cy.findByLabelText(/enter text/i).should('be.focused')
     cy.focused().tab()
     cy.findByRole('button', { name: 'Close the modal' }).should('be.focused')
     cy.focused().tab()
-    cy.findByRole('button', { name: 'Close' }).should('be.focused')
+    cy.findByRole('button', { name: 'Close dialog' }).should('be.focused')
     cy.focused().tab({ shift: true })
     cy.findByRole('button', { name: 'Close the modal' }).should('be.focused')
   })
@@ -95,7 +95,7 @@ describe('<OLModal />', function () {
     cy.mount(<Modal />)
     cy.findByRole('button', { name: 'Open modal' }).click()
     cy.findByRole('dialog').should('be.visible')
-    cy.findByRole('button', { name: 'Close' }).click()
+    cy.findByRole('button', { name: 'Close dialog' }).click()
     cy.findByRole('dialog').should('not.exist')
   })
 
@@ -103,7 +103,7 @@ describe('<OLModal />', function () {
     cy.mount(<Modal backdrop="static" />)
     cy.findByRole('button', { name: 'Open modal' }).click()
     cy.findByRole('dialog').should('be.visible')
-    cy.get('body').type('{esc}')
+    cy.findByRole('button', { name: 'Close dialog' }).click()
     cy.findByRole('dialog').should('not.exist')
   })
 })

services/web/test/frontend/features/editor-left-menu/components/settings/settings-dictionary.test.tsx

@@ -24,8 +24,8 @@ describe('<SettingsDictionary />', function () {
     within(modal).getByRole('heading', { name: 'Edit Dictionary' })
     within(modal).getByText('Your custom dictionary is empty.')
 
-    const [, closeButton] = within(modal).getAllByRole('button', {
-      name: 'Close',
+    const closeButton = within(modal).getByRole('button', {
+      name: 'Close dialog',
     })
     fireEvent.click(closeButton)
     expect(screen.getByTestId('dictionary-modal')).to.not.be.null

services/web/test/frontend/features/project-list/components/new-project-button.test.tsx

@@ -62,7 +62,7 @@ describe('<NewProjectButton />', function () {
 
     it('close the new project modal when clicking at the top right "x" button', function () {
       fireEvent.click(screen.getByRole('menuitem', { name: 'Blank project' }))
-      fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+      fireEvent.click(screen.getByRole('button', { name: 'Close dialog' }))
 
       expect(screen.queryByRole('dialog')).to.be.null
     })

services/web/test/frontend/features/settings-modal/settings/dictionary-setting.test.tsx

@@ -26,8 +26,8 @@ describe('<DictionarySetting />', function () {
     within(modal).getByRole('heading', { name: 'Edit Dictionary' })
     within(modal).getByText('Your custom dictionary is empty.')
 
-    const [, closeButton] = within(modal).getAllByRole('button', {
-      name: 'Close',
+    const closeButton = within(modal).getByRole('button', {
+      name: 'Close dialog',
     })
     fireEvent.click(closeButton)
     expect(screen.getByTestId('dictionary-modal')).to.not.be.null

services/web/test/frontend/features/settings/components/leave-section.test.tsx

@@ -35,7 +35,7 @@ describe('<LeaveSection />', function () {
     )
 
     const cancelButton = screen.getByRole('button', {
-      name: 'Close',
+      name: 'Cancel',
     })
 
     fireEvent.click(cancelButton)

services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.tsx

@@ -141,15 +141,10 @@ describe('<ShareProjectModal/>', function () {
       createContextProps()
     )
 
-    const [headerCloseButton, footerCloseButton] = await screen.findAllByRole(
-      'button',
-      { name: 'Close' }
-    )
+    const closeButton = screen.getByRole('button', { name: 'Close dialog' })
+    await userEvent.click(closeButton)
 
-    await userEvent.click(headerCloseButton)
-    await userEvent.click(footerCloseButton)
-
-    expect(handleHide.callCount).to.equal(2)
+    expect(handleHide.callCount).to.equal(1)
   })
 
   it('handles access level "private"', async function () {
@@ -410,7 +405,7 @@ describe('<ShareProjectModal/>', function () {
       createContextProps({ publicAccessLevel: 'tokenBased', invites })
     )
 
-    const [, closeButton] = screen.getAllByRole('button', {
+    const closeButton = screen.getByRole('button', {
       name: 'Close',
     })
 
@@ -446,7 +441,7 @@ describe('<ShareProjectModal/>', function () {
       createContextProps({ publicAccessLevel: 'tokenBased', invites })
     )
 
-    const [, closeButton] = screen.getAllByRole('button', {
+    const closeButton = screen.getByRole('button', {
       name: 'Close',
     })
 
@@ -481,7 +476,7 @@ describe('<ShareProjectModal/>', function () {
       createContextProps({ publicAccessLevel: 'tokenBased', members })
     )
 
-    const [, closeButton] = screen.getAllByRole('button', {
+    const closeButton = screen.getByRole('button', {
       name: 'Close',
     })