♿️(frontend) updates links

- remove buttons inside links in panels and
teams index
- update component and e2e tests

src/frontend/apps/desk/src/__tests__/pages.test.tsx

@@ -5,6 +5,11 @@ import { AppWrapper } from '@/tests/utils';
 
 import Page from '../pages';
 
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  useRouter: () => ({}),
+}));
+
 describe('Page', () => {
   it('checks Page rendering', () => {
     render(<Page />, { wrapper: AppWrapper });

src/frontend/apps/desk/src/core/__tests__/MainLayout.test.tsx

@@ -15,13 +15,13 @@ describe('MainLayout', () => {
     render(<MainLayout />, { wrapper: AppWrapper });
 
     expect(
-      screen.getByRole('button', {
+      screen.getByRole('link', {
         name: /Teams button/i,
       }),
     ).toBeInTheDocument();
 
     expect(
-      screen.getByRole('button', {
+      screen.getByRole('link', {
         name: /Mail Domains button/i,
       }),
     ).toBeInTheDocument();

src/frontend/apps/desk/src/features/menu/MenuItems.tsx

@@ -70,7 +70,7 @@ const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
         <BoxButton
           aria-label={t(`{{label}} button`, { label })}
           $color={color}
-          tabIndex={-1}
+          as="span"
         >
           <Icon
             width="2.375rem"

src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx

@@ -45,11 +45,13 @@ export const PanelActions = () => {
       </BoxButton>
       <StyledLink href="/teams/create">
         <BoxButton
+          as="span"
+          $margin={{ all: 'auto' }}
           aria-label={t('Add a team')}
           $color={colorsTokens()['primary-600']}
           tabIndex={-1}
         >
-          <IconAdd width={30} height={30} aria-hidden="true" />
+          <IconAdd width={27} height={27} aria-hidden="true" />
         </BoxButton>
       </StyledLink>
     </Box>

src/frontend/apps/desk/src/pages/teams/index.tsx

@@ -1,9 +1,10 @@
 import { Button } from '@openfun/cunningham-react';
+import { useRouter as useNavigate } from 'next/navigation';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-import { Box, StyledLink } from '@/components';
+import { Box } from '@/components';
 import { TeamLayout } from '@/features/teams/team-management';
 import { NextPageWithLayout } from '@/types/next';
 
@@ -13,12 +14,13 @@ const StyledButton = styled(Button)`
 
 const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
+  const router = useNavigate();
 
   return (
     <Box $align="center" $justify="center" $height="inherit">
-      <StyledLink href="/teams/create">
-        <StyledButton tabIndex={-1}>{t('Create a new team')}</StyledButton>
-      </StyledLink>
+      <StyledButton onClick={() => void router.push('/teams/create')}>
+        {t('Create a new team')}
+      </StyledButton>
     </Box>
   );
 };

src/frontend/apps/e2e/__tests__/app-desk/common.ts

@@ -35,7 +35,7 @@ export const createTeam = async (
   const randomTeams = randomName(teamName, browserName, length);
 
   for (let i = 0; i < randomTeams.length; i++) {
-    await panel.getByRole('button', { name: 'Add a team' }).click();
+    await panel.getByRole('link', { name: 'Add a team' }).click();
     await page.getByText('Team name').fill(randomTeams[i]);
     await expect(buttonCreate).toBeEnabled();
     await buttonCreate.click();

src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts

@@ -63,7 +63,7 @@ test.describe('Teams Create', () => {
   }) => {
     const panel = page.getByLabel('Teams panel').first();
 
-    await panel.getByRole('button', { name: 'Add a team' }).click();
+    await panel.getByRole('link', { name: 'Add a team' }).click();
 
     const teamName = `My routing team ${browserName}-${Math.floor(Math.random() * 1000)}`;
     await page.getByText('Team name').fill(teamName);
@@ -72,7 +72,7 @@ test.describe('Teams Create', () => {
     const elTeam = page.getByRole('heading', { name: teamName });
     await expect(elTeam).toBeVisible();
 
-    await panel.getByRole('button', { name: 'Add a team' }).click();
+    await panel.getByRole('link', { name: 'Add a team' }).click();
     await expect(elTeam).toBeHidden();
 
     await panel.locator('li').getByText(teamName).click();
@@ -96,13 +96,13 @@ test.describe('Teams Create', () => {
   test('checks error when duplicate team', async ({ page, browserName }) => {
     const panel = page.getByLabel('Teams panel').first();
 
-    await panel.getByRole('button', { name: 'Add a team' }).click();
+    await panel.getByRole('link', { name: 'Add a team' }).click();
 
     const teamName = `My duplicate team ${browserName}-${Math.floor(Math.random() * 1000)}`;
     await page.getByText('Team name').fill(teamName);
     await page.getByRole('button', { name: 'Create the team' }).click();
 
-    await panel.getByRole('button', { name: 'Add a team' }).click();
+    await panel.getByRole('link', { name: 'Add a team' }).click();
 
     await page.getByText('Team name').fill(teamName);
     await page.getByRole('button', { name: 'Create the team' }).click();

src/frontend/apps/e2e/__tests__/app-desk/teams-panel.spec.ts

@@ -22,7 +22,7 @@ test.describe('Teams Panel', () => {
     ).toBeVisible();
 
     await expect(
-      panel.getByRole('button', {
+      panel.getByRole('link', {
         name: 'Add a team',
       }),
     ).toBeVisible();