@capytale/meta-player 0.5.2 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "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/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, selectAttachedFilesOptions } from "../functionalities/functionalitiesSlice";
+import {
+  selectAttachedFilesEnabled,
+  selectAttachedFilesOptions,
+} from "../functionalities/functionalitiesSlice";
 
 const ActivityMenu: React.FC = memo(() => {
   const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
@@ -37,6 +40,7 @@ const ActivityMenu: React.FC = memo(() => {
       <ActivityQuickActions />
       {attachedFilesEnabled && (
         <Button
+          aria-label="Afficher les fichiers joints"
           severity="secondary"
           size="small"
           icon={
@@ -60,6 +64,7 @@ const ActivityMenu: React.FC = memo(() => {
         />
       )}
       <Button
+        aria-label="Afficher les paramètres"
         severity="secondary"
         size="small"
         icon="pi pi-cog" // pi-ellipsis-v
@@ -73,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"}
@@ -87,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.tsx

@@ -28,6 +28,7 @@ const AttachedFilesSidebarContent: FC = () => {
       {attachedFilesOptions.uploadTemporaryFiles && (
         <div className={styles.uploadFilesButtonContainer}>
           <Button
+            aria-label="Ajouter fichier temporaire"
             icon="pi pi-upload"
             label={
               attachedFilesOptions.uploadTemporaryFiles?.uploadButtonLabel ||

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"
@@ -214,6 +215,8 @@ const HorizontalDocumentSelector = () => {
       {items.map((item) => (
         <div
           className={styles.pedagoHorizontalTab}
+          role="button"
+          aria-label={`Basculer vers l'onglet ${item.name}`}
           onClick={() => dispatch(setPedagoTab(item.value))}
           data-selected={item.value === pedagoTab}
           key={item.value}
@@ -241,7 +244,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

@@ -57,6 +57,13 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
       <PedagoCommands />
       <div
         className={styles.pedagoContent}
+        aria-label={
+          pedagoTab === "instructions"
+            ? "Consignes"
+            : pedagoTab === "pdf"
+              ? "PDF"
+              : "Notes partagées"
+        }
         data-grading-visible={isGradingVisible}
       >
         {!isGradingVisible && (
@@ -73,6 +80,7 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
           >
             {mayReverse([
               <SplitterPanel
+                aria-label="Panneau de notation"
                 key="gradingPanel"
                 minSize={30}
                 size={40}
@@ -81,6 +89,7 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
                 <Grading />
               </SplitterPanel>,
               <SplitterPanel
+                aria-label="Panneau de consignes"
                 key="pedagoPanel"
                 minSize={50}
                 size={60}
@@ -88,6 +97,13 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
               >
                 <Panel
                   className={styles.fullSizePanel}
+                  aria-label={
+                    pedagoTab === "instructions"
+                      ? "Consignes"
+                      : pedagoTab === "pdf"
+                        ? "PDF"
+                        : "Notes partagées"
+                  }
                   header={
                     pedagoTab === "instructions"
                       ? "Consignes"
@@ -138,6 +154,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 +176,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/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);
             }}