diff --git a/src/frontend/apps/desk/src/components/IconOptions.tsx b/src/frontend/apps/desk/src/components/IconOptions.tsx
new file mode 100644
index 0000000..a6b2656
--- /dev/null
+++ b/src/frontend/apps/desk/src/components/IconOptions.tsx
@@ -0,0 +1,22 @@
+import { Text } from '@/components';
+
+interface IconOptionsProps {
+ isOpen: boolean;
+ 'aria-label': string;
+}
+
+export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
+ return (
+
+ more_vert
+
+ );
+};
diff --git a/src/frontend/apps/desk/src/components/index.ts b/src/frontend/apps/desk/src/components/index.ts
index 6a457ee..fa6ac7b 100644
--- a/src/frontend/apps/desk/src/components/index.ts
+++ b/src/frontend/apps/desk/src/components/index.ts
@@ -2,6 +2,7 @@ export * from './Box';
export * from './BoxButton';
export * from './Card';
export * from './DropButton';
+export * from './IconOptions';
export * from './Link';
export * from './Text';
export * from './TextErrors';
diff --git a/src/frontend/apps/desk/src/features/members/__tests__/MemberAction.test.tsx b/src/frontend/apps/desk/src/features/members/__tests__/MemberAction.test.tsx
index 4be9097..a67ab02 100644
--- a/src/frontend/apps/desk/src/features/members/__tests__/MemberAction.test.tsx
+++ b/src/frontend/apps/desk/src/features/members/__tests__/MemberAction.test.tsx
@@ -33,7 +33,9 @@ describe('MemberAction', () => {
},
);
- expect(await screen.findByLabelText('Member options')).toBeInTheDocument();
+ expect(
+ await screen.findByLabelText('Open the member options modal'),
+ ).toBeInTheDocument();
});
it('checks the render when member', () => {
@@ -44,7 +46,9 @@ describe('MemberAction', () => {
},
);
- expect(screen.queryByLabelText('Member options')).not.toBeInTheDocument();
+ expect(
+ screen.queryByLabelText('Open the member options modal'),
+ ).not.toBeInTheDocument();
});
it('checks the render when admin', async () => {
@@ -55,7 +59,9 @@ describe('MemberAction', () => {
},
);
- expect(await screen.findByLabelText('Member options')).toBeInTheDocument();
+ expect(
+ await screen.findByLabelText('Open the member options modal'),
+ ).toBeInTheDocument();
});
it('checks the render when admin to owner', () => {
@@ -70,6 +76,8 @@ describe('MemberAction', () => {
},
);
- expect(screen.queryByLabelText('Member options')).not.toBeInTheDocument();
+ expect(
+ screen.queryByLabelText('Open the member options modal'),
+ ).not.toBeInTheDocument();
});
});
diff --git a/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx b/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx
index fdd3016..6f5e294 100644
--- a/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx
+++ b/src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx
@@ -175,13 +175,13 @@ describe('MemberGrid', () => {
if (expected) {
expect(
await screen.findAllByRole('button', {
- name: 'Member options',
+ name: 'Open the member options modal',
}),
).toBeDefined();
} else {
expect(
screen.queryByRole('button', {
- name: 'Member options',
+ name: 'Open the member options modal',
}),
).not.toBeInTheDocument();
}
diff --git a/src/frontend/apps/desk/src/features/members/components/MemberAction.tsx b/src/frontend/apps/desk/src/features/members/components/MemberAction.tsx
index cb48a2b..c4d690c 100644
--- a/src/frontend/apps/desk/src/features/members/components/MemberAction.tsx
+++ b/src/frontend/apps/desk/src/features/members/components/MemberAction.tsx
@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { DropButton, Text } from '@/components';
+import { DropButton, IconOptions, Text } from '@/components';
import { Access, Role } from '../types';
@@ -34,16 +34,10 @@ export const MemberAction = ({
<>
- more_vert
-
+
}
onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
isOpen={isDropOpen}
diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json
index 3f86d75..5b07949 100644
--- a/src/frontend/apps/desk/src/i18n/translations.json
+++ b/src/frontend/apps/desk/src/i18n/translations.json
@@ -35,10 +35,10 @@
"Marianne Logo": "Logo Marianne",
"Member": "Membre",
"Member icon": "Icône de membre",
- "Member options": "Options des Membres",
"Members of “{{teamName}}“": "Membres de “{{teamName}}“",
"Name the team": "Nommer le groupe",
"Names": "Noms",
+ "Open the member options modal": "Ouvrir les options de membre dans la fenêtre modale",
"Owner": "Propriétaire",
"People": "People",
"People Description": "Description de People",