@capytale/meta-player 0.5.1 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.tsx

@@ -34,7 +34,8 @@ const App: FC<AppProps> = (props) => {
   const isPedagoVisible = useAppSelector(selectIsPedagoVisible) as boolean;
   const hasInstructions = useAppSelector(selectHasInstructions);
   const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
-  const hasPedago = hasInstructions || hasGradingOrComments || mode === "review";
+  const hasPedago =
+    hasInstructions || hasGradingOrComments || mode === "review";
   const dispatch = useAppDispatch();
   const showPedago = hasPedago && isPedagoVisible;
   const isDirty = useAppSelector(selectIsDirty);
@@ -118,7 +119,9 @@ const App: FC<AppProps> = (props) => {
           </SplitterPanel>
           <SplitterPanel minSize={40} size={70} className={styles.contentPanel}>
             <div className="meta-player-content-cover"></div>
-            <div id="meta-player-content">{props.children}</div>
+            <div id="meta-player-content" aria-label="Activité">
+              {props.children}
+            </div>
           </SplitterPanel>
         </Splitter>
       </div>

package/src/features/functionalities/AttachedFilesFunctionality.ts

@@ -2,22 +2,18 @@ import { FC, useEffect } from "react";
 import { AttachedFilesOptions, setAttachedFilesOptions } from "./functionalitiesSlice";
 import { useAppDispatch } from "../../app/hooks";
 
-type AttachedFilesFunctionalityProps = {
-  options: Omit<AttachedFilesOptions, "enabled">;
-};
+type AttachedFilesFunctionalityProps = Omit<AttachedFilesOptions, "enabled">;
 
-const AttachedFilesFunctionality: FC<AttachedFilesFunctionalityProps> = ({
-  options,
-}) => {
+const AttachedFilesFunctionality: FC<AttachedFilesFunctionalityProps> = (props) => {
   const dispatch = useAppDispatch();
   useEffect(() => {
     dispatch(setAttachedFilesOptions({
-      ...options,
+      ...props,
       enabled: true,
     }));
     return () => {
       dispatch(setAttachedFilesOptions({
-        ...options,
+        ...props,
         enabled: false,
       }));
     };

package/src/features/functionalities/functionalitiesSlice.ts

@@ -4,26 +4,39 @@ import { createAppSlice } from "../../app/createAppSlice";
 export type AttachedFileData = {
   name: string;
   isTemporary: boolean;
-  canDownload: boolean;
-  canCopyLink: boolean;
-  interactionMode: "download" | "preview" | "custom" | "none";
+  downloadMode: "default" | "custom" | "none";
+  copyLinkMode: "default" | "custom" | "none";
+  interactMode: "download" | "preview" | "custom" | "none";
   urlOrId: string;
 }
 
+export type UploadedFileInfo = {
+  source: URL,
+  name: string,
+  size: number,
+  file: File,
+};
+
 export type AttachedFilesOptions = {
   enabled: boolean;
   uploadTemporaryFiles?: {
-    mimeTypes: string[];
-    handler: (files: File[]) => any;
+    uploadButtonLabel?: string;
+    mimeTypes?: string[];
+    multiple: boolean;
+    handler: (fileInfos: UploadedFileInfo[]) => any;
   };
-  middleware?: {
-    listFiles: (originalFiles: AttachedFileData[]) => AttachedFileData[];
-    handleFileClick?: ((originalFile: AttachedFileData) => any);
+  listFilesMiddleware?: (originalFiles: AttachedFileData[]) => AttachedFileData[];
+  customHandlers?: {
+    downloadFile?: ((originalFile: AttachedFileData) => any);
+    copyFileLink?: ((originalFile: AttachedFileData) => any);
+    interactWithFile?: ((originalFile: AttachedFileData) => any);
   };
+  onViewFiles?: () => any;
 };
 
 export interface FunctionalitiesState {
   attachedFilesOptions: AttachedFilesOptions;
+  attachedFilesRefresher: number;
 }
 
 export const defaultAttachedFilesOptions: AttachedFilesOptions = {
@@ -31,7 +44,8 @@ export const defaultAttachedFilesOptions: AttachedFilesOptions = {
 };
 
 export const initialState: FunctionalitiesState = {
-  attachedFilesOptions: defaultAttachedFilesOptions
+  attachedFilesOptions: defaultAttachedFilesOptions,
+  attachedFilesRefresher: 0,
 };
 
 // If you are not using async thunks you can use the standalone `createSlice`.
@@ -44,22 +58,28 @@ export const functionalitiesSlice = createAppSlice({
     setAttachedFilesOptions: create.reducer((state, action: PayloadAction<AttachedFilesOptions>) => {
       state.attachedFilesOptions = action.payload;
     }),
+    refreshAttachedFiles: create.reducer((state) => {
+      state.attachedFilesRefresher += 1;
+    }),
   }),
   // You can define your selectors here. These selectors receive the slice
   // state as their first argument.
   selectors: {
     selectAttachedFilesOptions: (state) => state.attachedFilesOptions,
     selectAttachedFilesEnabled: (state) => state.attachedFilesOptions.enabled,
+    selectAttachedFilesRefresher: (state) => state.attachedFilesRefresher,
   },
 });
 
 // Action creators are generated for each case reducer function.
 export const {
   setAttachedFilesOptions,
+  refreshAttachedFiles,
 } = functionalitiesSlice.actions;
 
 // Selectors returned by `slice.selectors` take the root state as their first argument.
 export const {
   selectAttachedFilesOptions,
   selectAttachedFilesEnabled,
+  selectAttachedFilesRefresher,
 } = functionalitiesSlice.selectors;

package/src/features/functionalities/hooks.ts

@@ -1,17 +1,18 @@
 import { useMemo } from "react";
-import { useAppSelector } from "../../app/hooks"
+import { useAppDispatch, useAppSelector } from "../../app/hooks"
 import { useActivityJS } from "../activityJS/ActivityJSProvider";
-import { AttachedFileData, selectAttachedFilesOptions } from "./functionalitiesSlice"
+import { AttachedFileData, refreshAttachedFiles, selectAttachedFilesOptions, selectAttachedFilesRefresher } from "./functionalitiesSlice"
 
 export const useAttachedFiles = () => {
   const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+  const attachedFilesRefresher = useAppSelector(selectAttachedFilesRefresher);
 
   const activityJS = useActivityJS();
   const files = useMemo(
     () =>
       activityJS.activitySession?.activityBunch.activityNode.attached_files
         .items || [],
-    [activityJS],
+    [activityJS, attachedFilesRefresher],
   );
   const filesData = useMemo<AttachedFileData[]>(() => {
     return files.map((file) => {
@@ -20,19 +21,24 @@ export const useAttachedFiles = () => {
         name: name,
         urlOrId: file,
         isTemporary: false,
-        canDownload: true,
-        canCopyLink: true,
-        interactionMode: "preview",
+        downloadMode: "default",
+        copyLinkMode: "default",
+        interactMode: "preview",
       };
     });
   }, [files]);
 
   const treatedFilesData = useMemo(() => {
-    if (!attachedFilesOptions.enabled || !attachedFilesOptions.middleware?.listFiles) {
+    if (!attachedFilesOptions.enabled || !attachedFilesOptions.listFilesMiddleware) {
       return filesData;
     }
-    return attachedFilesOptions.middleware.listFiles(filesData);
-  }, [filesData, attachedFilesOptions]);
+    return attachedFilesOptions.listFilesMiddleware(filesData);
+  }, [filesData, attachedFilesOptions, attachedFilesRefresher]);
 
   return treatedFilesData;
+}
+
+export const useRefreshAttachedFiles = () => {
+  const dispatch = useAppDispatch();
+  return () => dispatch(refreshAttachedFiles());
 }

package/src/features/navbar/ActivityInfo.tsx

@@ -15,12 +15,22 @@ const ActivityInfo: React.FC = () => {
   return (
     <div className={styles.activityInfo}>
       <div className={styles.activityInfoText}>
-        <div className={styles.activityInfoTitle}>{activityInfo.title}</div>
+        <div
+          className={styles.activityInfoTitle}
+          aria-label="Titre de l'activité"
+        >
+          {activityInfo.title}
+        </div>
         {mode === "assignment" && studentName && (
-          <div className={styles.activityInfoStudentName}>{studentName}</div>
+          <div
+            className={styles.activityInfoStudentName}
+            aria-label="Nom de l'élève"
+          >
+            {studentName}
+          </div>
         )}
         {mode === "create" && (
-          <div className={styles.activityInfoStudentName}>
+          <div className={styles.activityInfoStudentName} aria-label="Mode">
             Création d'activité
           </div>
         )}
@@ -28,6 +38,7 @@ const ActivityInfo: React.FC = () => {
       {icon?.path && (
         <img
           className={styles.activityLogo}
+          aria-label="Logo de l'activité"
           src={icon.path}
           style={{
             backgroundColor: icon.style

package/src/features/navbar/ActivityMenu.tsx

@@ -15,7 +15,10 @@ import { selectHasAntiCheat } from "../activityData/activityDataSlice";
 import AttachedFilesSidebarContent from "./AttachedFilesSidebarContent";
 import { Badge } from "primereact/badge";
 import { useAttachedFiles } from "../functionalities/hooks";
-import { selectAttachedFilesEnabled } from "../functionalities/functionalitiesSlice";
+import {
+  selectAttachedFilesEnabled,
+  selectAttachedFilesOptions,
+} from "../functionalities/functionalitiesSlice";
 
 const ActivityMenu: React.FC = memo(() => {
   const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
@@ -31,11 +34,13 @@ const ActivityMenu: React.FC = memo(() => {
   const hasAntiCheat = useAppSelector(selectHasAntiCheat);
   const attachedFiles = useAttachedFiles();
   const attachedFilesEnabled = useAppSelector(selectAttachedFilesEnabled);
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
   return (
     <div className={styles.activityMenu}>
       <ActivityQuickActions />
       {attachedFilesEnabled && (
         <Button
+          aria-label="Afficher les fichiers joints"
           severity="secondary"
           size="small"
           icon={
@@ -52,10 +57,14 @@ const ActivityMenu: React.FC = memo(() => {
             showDelay: settings.TOOLTIP_SHOW_DELAY,
           }}
           className="p-overlay-badge"
-          onClick={() => setAttachedFilesSidebarVisible(true)}
+          onClick={() => {
+            attachedFilesOptions.onViewFiles?.();
+            setAttachedFilesSidebarVisible(true);
+          }}
         />
       )}
       <Button
+        aria-label="Afficher les paramètres"
         severity="secondary"
         size="small"
         icon="pi pi-cog" // pi-ellipsis-v
@@ -69,6 +78,7 @@ const ActivityMenu: React.FC = memo(() => {
       />
       {!hasAntiCheat && (
         <Button
+          aria-label="Mettre en plein écran"
           severity="secondary"
           size="small"
           icon={isFullscreen ? "pi pi-expand" : "pi pi-expand"}
@@ -83,6 +93,7 @@ const ActivityMenu: React.FC = memo(() => {
       )}
       {isInIframe && (
         <Button
+          aria-label="Retour à la liste des activités (droite)"
           severity="secondary"
           size="small"
           icon={"pi pi-times"}

package/src/features/navbar/ActivityQuickActions.tsx

@@ -16,6 +16,7 @@ const ActivityQuickActions: FC<{}> = () => {
     <>
       {quickActions.map((action) => (
         <Button
+          aria-label={action.title}
           key={action.title}
           severity="secondary"
           size="small"

package/src/features/navbar/ActivitySidebarActions.tsx

@@ -16,6 +16,7 @@ const ActivitySidebarActions: FC<{}> = () => {
     <>
       {sidebarActions.map((action) => (
         <Button
+          aria-label={action.title}
           key={action.title}
           severity="secondary"
           size="small"

package/src/features/navbar/AttachedFilesSidebarContent.module.scss

@@ -1,5 +1,14 @@
+.sidebarContent {
+  height: 100%;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
 .attachedFiles {
   margin: 4px 0;
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
 .fileRow {
@@ -24,3 +33,11 @@
   flex-shrink: 0;
   flex-grow: 0;
 }
+
+.uploadFilesButtonContainer {
+  flex-shrink: 0;
+  flex-grow: 0;
+  & > * {
+    width: 100%;
+  }
+}

package/src/features/navbar/AttachedFilesSidebarContent.tsx

@@ -11,15 +11,58 @@ import { Toast } from "primereact/toast";
 import styles from "./AttachedFilesSidebarContent.module.scss";
 import { copyToClipboard } from "../../utils/clipboard";
 import { downloadFile } from "../../utils/download";
+import { useFileUpload } from "use-file-upload";
 
 const AttachedFilesSidebarContent: FC = () => {
   const filesData = useAttachedFiles();
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+  const [_, selectFile] = useFileUpload();
 
   return (
-    <div className={styles.attachedFiles}>
-      {filesData.map((file) => (
-        <AttachedFileLinks key={file.name} fileData={file} />
-      ))}
+    <div className={styles.sidebarContent}>
+      <div className={styles.attachedFiles}>
+        {filesData.map((file) => (
+          <AttachedFileLinks key={file.name} fileData={file} />
+        ))}
+      </div>
+      {attachedFilesOptions.uploadTemporaryFiles && (
+        <div className={styles.uploadFilesButtonContainer}>
+          <Button
+            aria-label="Ajouter fichier temporaire"
+            icon="pi pi-upload"
+            label={
+              attachedFilesOptions.uploadTemporaryFiles?.uploadButtonLabel ||
+              "Ajouter fichier temporaire"
+            }
+            onClick={() => {
+              selectFile(
+                {
+                  multiple: attachedFilesOptions.uploadTemporaryFiles?.multiple,
+                  accept:
+                    attachedFilesOptions.uploadTemporaryFiles?.mimeTypes?.join(
+                      ",",
+                    ) || undefined,
+                },
+                (filesOrFiles) => {
+                  if (Array.isArray(filesOrFiles)) {
+                    attachedFilesOptions.uploadTemporaryFiles?.handler(
+                      filesOrFiles,
+                    );
+                  } else {
+                    /* Deconstructing the object here so that if there is a
+                  bug, the error will be caught here and not in the handler */
+                    const { source, name, size, file } = filesOrFiles;
+                    attachedFilesOptions.uploadTemporaryFiles?.handler([
+                      { source, name, size, file },
+                    ]);
+                  }
+                },
+              );
+            }}
+            className={styles.uploadButton}
+          />
+        </div>
+      )}
     </div>
   );
 };
@@ -36,13 +79,13 @@ const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
       <Button
         label={fileData.name}
         severity={fileData.isTemporary ? "warning" : "secondary"}
-        disabled={fileData.interactionMode === "none"}
+        disabled={fileData.interactMode === "none"}
         onClick={() => {
-          if (fileData.interactionMode === "custom") {
-            attachedFilesOptions.middleware?.handleFileClick?.(fileData);
-          } else if (fileData.interactionMode === "download") {
+          if (fileData.interactMode === "custom") {
+            attachedFilesOptions.customHandlers?.interactWithFile?.(fileData);
+          } else if (fileData.interactMode === "download") {
             window.open(fileData.urlOrId, "_blank")?.focus();
-          } else if (fileData.interactionMode === "preview") {
+          } else if (fileData.interactMode === "preview") {
             toast.current?.show({
               severity: "info",
               summary: "Aperçu non disponible",
@@ -54,46 +97,56 @@ const AttachedFileLinks: FC<{ fileData: AttachedFileData }> = ({
         className={styles.fileInteraction}
         text
       />
-      {fileData.canDownload && (
+      {fileData.downloadMode !== "none" && (
         <Button
           icon="pi pi-download"
           severity="secondary"
           onClick={() => {
-            downloadFile(fileData.urlOrId, fileData.name);
-            toast.current?.show({
-              severity: "success",
-              summary: "Téléchargement lancé",
-              detail: fileData.name,
-              life: 3000,
-            });
+            if (fileData.downloadMode === "custom") {
+              attachedFilesOptions.customHandlers?.downloadFile?.(fileData);
+              return;
+            } else if (fileData.downloadMode === "default") {
+              downloadFile(fileData.urlOrId, fileData.name);
+              toast.current?.show({
+                severity: "success",
+                summary: "Téléchargement lancé",
+                detail: fileData.name,
+                life: 3000,
+              });
+            }
           }}
           className={styles.fileSmallInteraction}
           text
         />
       )}
-      {fileData.canCopyLink && (
+      {fileData.copyLinkMode !== "none" && (
         <Button
           icon="pi pi-link"
           severity="secondary"
           onClick={() => {
-            // copy link to clipboard
-            copyToClipboard(fileData.urlOrId, (success, error) => {
-              if (success) {
-                toast.current?.show({
-                  severity: "success",
-                  summary: "Lien copié",
-                  detail: fileData.name,
-                  life: 3000,
-                });
-              } else {
-                toast.current?.show({
-                  severity: "error",
-                  summary: "Erreur lors de la copie du lien",
-                  detail: error,
-                  life: 5000,
-                });
-              }
-            });
+            if (fileData.copyLinkMode === "custom") {
+              attachedFilesOptions.customHandlers?.copyFileLink?.(fileData);
+              return;
+            } else if (fileData.copyLinkMode === "default") {
+              // copy link to clipboard
+              copyToClipboard(fileData.urlOrId, (success, error) => {
+                if (success) {
+                  toast.current?.show({
+                    severity: "success",
+                    summary: "Lien copié",
+                    detail: fileData.name,
+                    life: 3000,
+                  });
+                } else {
+                  toast.current?.show({
+                    severity: "error",
+                    summary: "Erreur lors de la copie du lien",
+                    detail: error,
+                    life: 5000,
+                  });
+                }
+              });
+            }
           }}
           style={{
             flexGrow: 0,

package/src/features/navbar/CapytaleMenu.tsx

@@ -1,5 +1,5 @@
 import { Button } from "primereact/button";
-import { SplitButton } from "primereact/splitbutton";
+import { ButtonGroup } from "primereact/buttongroup";
 import { ConfirmDialog, confirmDialog } from "primereact/confirmdialog";
 import { Toast } from "primereact/toast";
 import { OverlayPanel } from "primereact/overlaypanel";
@@ -78,6 +78,7 @@ const CapytaleMenu: React.FC = () => {
       <div className={styles.capytaleMenu}>
         {isInIframe && (
           <Button
+            aria-label="Retour à la liste des activités (gauche)"
             label="Retour"
             icon="pi pi-chevron-left"
             size="small"
@@ -96,6 +97,7 @@ const CapytaleMenu: React.FC = () => {
               <Countdown />
               <Button
                 label={isQuiteSmall ? undefined : "Enregistrer"}
+                aria-label="Enregistrer"
                 disabled={!isDirty}
                 severity={"warning"}
                 size="small"
@@ -116,51 +118,60 @@ const CapytaleMenu: React.FC = () => {
         }
 
         {mode === "create" && sharingInfo.code && (
-          <SplitButton
-            label={isLarge ? sharingInfo.code : undefined}
-            severity="secondary"
-            size="small"
-            icon="pi pi-share-alt"
-            outlined
-            buttonProps={{
-              tooltip: "Copier le code de partage",
-              tooltipOptions: {
+          <ButtonGroup>
+            <Button
+              label={isLarge ? sharingInfo.code : undefined}
+              aria-label="Copier le code de partage"
+              severity="secondary"
+              size="small"
+              icon="pi pi-share-alt"
+              outlined
+              tooltip="Copier le code de partage"
+              tooltipOptions={{
                 position: "bottom",
                 showDelay: settings.TOOLTIP_SHOW_DELAY,
-              },
-            }}
-            onClick={async () => {
-              await copyToClipboard(sharingInfo.code!);
-              toast.current!.show({
-                summary: "Code copié",
-                detail: "Le code de partage a été copié dans le presse-papier.",
-                severity: "info",
-                life: 2000,
-              });
-            }}
-            model={[
-              {
-                label: "Copier l'URL de partage",
-                icon: "pi pi-link",
-                command: () => {
-                  copyToClipboard(sharingInfo.codeLink!).then(() => {
-                    toast.current!.show({
-                      summary: "URL copiée",
-                      detail:
-                        "L'URL de partage a été copiée dans le presse-papier.",
-                      severity: "info",
-                      life: 2000,
-                    });
+              }}
+              onClick={async () => {
+                await copyToClipboard(sharingInfo.code!);
+                toast.current!.show({
+                  summary: "Code copié",
+                  detail:
+                    "Le code de partage a été copié dans le presse-papier.",
+                  severity: "info",
+                  life: 2000,
+                });
+              }}
+            />
+            <Button
+              aria-label="Copier l'URL de partage"
+              icon="pi pi-link"
+              severity="secondary"
+              size="small"
+              outlined
+              tooltip="Copier l'URL de partage"
+              tooltipOptions={{
+                position: "bottom",
+                showDelay: settings.TOOLTIP_SHOW_DELAY,
+              }}
+              onClick={() => {
+                copyToClipboard(sharingInfo.codeLink!).then(() => {
+                  toast.current!.show({
+                    summary: "URL copiée",
+                    detail:
+                      "L'URL de partage a été copiée dans le presse-papier.",
+                    severity: "info",
+                    life: 2000,
                   });
-                },
-              },
-            ]}
-          />
+                });
+              }}
+            />
+          </ButtonGroup>
         )}
         {showWorkflow && (
           <>
             {mode === "assignment" && workflow === "current" && (
               <Button
+                aria-label="Rendre la copie"
                 outlined
                 label="Rendre"
                 icon="pi pi-envelope"
@@ -171,6 +182,11 @@ const CapytaleMenu: React.FC = () => {
             )}
             {mode === "assignment" && workflow !== "current" && (
               <Button
+                aria-label={
+                  workflow === "finished"
+                    ? "Copie déjà rendue"
+                    : "Copie déjà rendue et corrigée"
+                }
                 outlined
                 label={workflow === "finished" ? "Rendue" : "Corrigée"}
                 disabled
@@ -185,6 +201,7 @@ const CapytaleMenu: React.FC = () => {
             {mode === "review" && (
               <div>
                 <ButtonDoubleIcon
+                  aria-label="Changer l'état de la copie"
                   severity="secondary"
                   size="small"
                   outlined
@@ -208,7 +225,10 @@ const CapytaleMenu: React.FC = () => {
                   }
                   rightIcon="pi pi-angle-down"
                 />
-                <OverlayPanel ref={overlayPanelWorkflow}>
+                <OverlayPanel
+                  ref={overlayPanelWorkflow}
+                  aria-label="Panneau de changement d'état de la copie"
+                >
                   <h3 className={styles.overlayPanelWorkflowTitle}>
                     État de la copie
                   </h3>

package/src/features/navbar/Countdown.tsx

@@ -175,6 +175,7 @@ const Countdown: FC = () => {
     if (diffMs >= MS_PER_DAY) {
       return (
         <div
+          aria-label="Deadline"
           style={{
             display: "flex",
             alignItems: "center",
@@ -200,7 +201,12 @@ const Countdown: FC = () => {
               })
               .split(", ")
               .map((s, i) => (
-                <div key={i}>{s}</div>
+                <div
+                  key={i}
+                  aria-label={i === 0 ? "Date limite" : "Heure limite"}
+                >
+                  {s}
+                </div>
               ))}
           </div>
         </div>
@@ -209,6 +215,7 @@ const Countdown: FC = () => {
     if (diffMs <= 0) {
       return (
         <div
+          aria-label="Temps écoulé"
           style={{
             display: "flex",
             alignItems: "center",
@@ -227,6 +234,7 @@ const Countdown: FC = () => {
     const hours = Math.floor(diffSeconds / 3600) % 24;
     return (
       <div
+        aria-label="Temps restant"
         style={{
           display: "flex",
           alignItems: "center",

package/src/features/navbar/GradingNav.tsx

@@ -81,18 +81,20 @@ const GradingNav: React.FC = () => {
   return (
     <div className="p-inputgroup flex-1">
       <Button
+        aria-label="Passer à la copie précédente"
         size="small"
         icon="pi pi-chevron-left"
         severity="secondary"
         onClick={handlePrev}
         tooltip="Copie précédente"
         tooltipOptions={{
-          position: "left"
+          position: "left",
         }}
         disabled={nid == firstNid}
         outlined
       />
       <Dropdown
+        aria-label="Sélectionner une copie"
         value={nid}
         options={options}
         filter
@@ -101,13 +103,14 @@ const GradingNav: React.FC = () => {
         }}
       />
       <Button
+        aria-label="Passer à la copie suivante"
         size="small"
         icon="pi pi-chevron-right"
         severity="secondary"
         onClick={handleNext}
         tooltip="Copie suivante"
         tooltipOptions={{
-          position: "right"
+          position: "right",
         }}
         disabled={nid == lastNid}
         outlined

package/src/features/navbar/ReviewNavbar.tsx

@@ -6,7 +6,7 @@ import styles from "./style.module.scss";
 const ReviewNavbar: FC = () => {
   return (
     <div className={styles.reviewNavbar}>
-      <div>Mode correction</div>
+      <div aria-label="Indicateur de mode correction">Mode correction</div>
       <div>
         <GradingNav />
       </div>

package/src/features/navbar/SettingsSidebarContent.tsx

@@ -42,6 +42,7 @@ const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
       <div className={styles.sidebarCapytaleActions}>
         {props.showHelp && (
           <Button
+            aria-label="Voir la documentation"
             severity="secondary"
             size="small"
             icon={"pi pi-question-circle"}
@@ -61,6 +62,7 @@ const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
           <>
             <ConfirmPopup />
             <Button
+              aria-label="Réinitialiser l'activité"
               severity="secondary"
               size="small"
               icon={"pi pi-undo"}
@@ -104,6 +106,7 @@ const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
           <div className="sidebarRadioButtons">
             <div className="sidebarRadioGroup">
               <RadioButton
+                aria-label="Option de disposition horizontale"
                 inputId="rb-horizontal"
                 name="horizontal"
                 value="horizontal"
@@ -116,6 +119,7 @@ const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
             </div>
             <div className="sidebarRadioGroup">
               <RadioButton
+                aria-label="Option de disposition verticale"
                 inputId="rb-vertical"
                 name="vertical"
                 value="vertical"
@@ -134,6 +138,7 @@ const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
           <div className="sidebarRadioButtons">
             <div className="sidebarRadioGroup">
               <RadioButton
+                aria-label="Option de thème clair"
                 inputId="rb-light"
                 name="light"
                 value="light"
@@ -149,6 +154,7 @@ const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
             </div>
             <div className="sidebarRadioGroup">
               <RadioButton
+                aria-label="Option de thème sombre"
                 inputId="rb-dark"
                 name="dark"
                 value="dark"
@@ -164,6 +170,7 @@ const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
             </div>
             <div className="sidebarRadioGroup">
               <RadioButton
+                aria-label="Option de thème système"
                 inputId="rb-auto"
                 name="auto"
                 value="auto"

package/src/features/navbar/index.tsx

@@ -22,7 +22,11 @@ const Navbar: React.FC = () => {
     <div className={styles.navbar}>
       <div className={styles.navbarContainer}>
         <div className={styles.navbarLogo}>
-          {!isInIframe && <a href={returnUrl}>{logoText}</a>}
+          {!isInIframe && (
+            <a href={returnUrl} aria-label="Capytale (accueil)">
+              {logoText}
+            </a>
+          )}
         </div>
         <CapytaleMenu />
         <ActivityInfo />

package/src/features/pedago/PedagoCommands.tsx

@@ -43,7 +43,7 @@ export const CloseOnlyPedagoCommands: FC = () => {
         icon="pi pi-times"
         rounded
         text
-        aria-label="Masquer l'évaluation"
+        aria-label="Masquer consignes et évaluation"
         tooltip="Masquer l'évaluation"
         tooltipOptions={{
           position: "left",
@@ -90,7 +90,7 @@ const HorizontalPedagoCommands = () => {
           icon="pi pi-times"
           rounded
           text
-          aria-label="Masquer les consignes"
+          aria-label="Masquer consignes et évaluation"
           tooltip="Masquer les consignes"
           tooltipOptions={{
             position: "left",
@@ -132,6 +132,7 @@ const DocumentSelectorItemActions: FC<{
           </div>
           {item.value !== "pdf" && (
             <SelectButton
+              aria-label={`Sélectionner le type de ${item.name}`}
               className={styles.smallSelectButton}
               value={
                 item.value === "instructions"
@@ -241,7 +242,7 @@ const VerticalPedagoCommands = () => {
         icon="pi pi-times"
         rounded
         text
-        aria-label="Masquer les consignes"
+        aria-label="Masquer consignes et évaluation"
         tooltip="Masquer les consignes"
         tooltipOptions={{
           position: "left",

package/src/features/pedago/index.tsx

@@ -73,6 +73,7 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
           >
             {mayReverse([
               <SplitterPanel
+                aria-label="Panneau de notation"
                 key="gradingPanel"
                 minSize={30}
                 size={40}
@@ -81,6 +82,7 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
                 <Grading />
               </SplitterPanel>,
               <SplitterPanel
+                aria-label="Panneau de consignes"
                 key="pedagoPanel"
                 minSize={50}
                 size={60}
@@ -138,6 +140,7 @@ const Grading: FC = () => {
         <div className={styles.pedagoFeedback}>
           {(comments || mode !== "assignment") && (
             <textarea
+              aria-label="Saisie de l'appréciation"
               value={comments || ""}
               placeholder={
                 mode !== "review" ? "" : "Rédigez ici l'appréciation."
@@ -159,6 +162,7 @@ const Grading: FC = () => {
         <div className={styles.pedagoGrade}>
           {(grading || mode !== "assignment") && (
             <textarea
+              aria-label="Saisie de l'évaluation"
               value={grading || ""}
               placeholder={
                 mode !== "review"

package/src/index.css

@@ -126,3 +126,7 @@ body,
 .anti-cheat h1:first-child {
   margin-top: 0;
 }
+
+.p-button-group .p-button:not(:last-child):not(:active):not(:focus) {
+  border-right: 0 !important;
+}

package/src/index.tsx

@@ -20,8 +20,10 @@ import { ActivityQuickActionsSetter } from "./features/navbar/ActivityQuickActio
 import ActivitySettingsSetter from "./features/activitySettings/ActivitySettingsSetter";
 import IsDirtySetter from "./features/activityData/IsDirtySetter";
 import AttachedFilesFunctionality from "./features/functionalities/AttachedFilesFunctionality";
+import { useRefreshAttachedFiles } from "./features/functionalities/hooks";
 import { Toast } from "./external/prime";
 import type { ToastMessage } from "./external/prime";
+import type { AttachedFileData, UploadedFileInfo } from "./features/functionalities/functionalitiesSlice";
 
 export {
   MetaPlayer,
@@ -43,6 +45,7 @@ export {
   ActivitySettingsSetter,
   IsDirtySetter,
   AttachedFilesFunctionality,
+  useRefreshAttachedFiles,
   Toast,
 };
-export type { ToastMessage };
+export type { AttachedFileData, UploadedFileInfo, ToastMessage };

package/src/utils/CardSelector.tsx

@@ -14,6 +14,8 @@ const CardSelector = function <ValueType>(props: CardSelectorProps<ValueType>) {
           <div
             className={styles.cardSelectorOption}
             data-selected={props.selected === option.value}
+            role="button"
+            aria-label={`Sélectionner l'option ${option.title}`}
             onClick={() => {
               props.onChange(option.value);
             }}