@saooti/octopus-sdk 39.4.8 → 39.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.4.8",
+  "version": "39.4.10",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/App.vue

@@ -2,7 +2,7 @@
   <div class="d-flex flex-column h-100 octopus-app">
     <template v-if="pageFullyLoad">
       <TopBar/>
-      <main>
+      <main role="main">
         <CategoryFilter v-if="firstDisplayCategoryFilter" />
         <div v-else class="category-filter-no-filter" />
         <router-view />

package/src/components/display/categories/CategoryChooser.vue

@@ -15,6 +15,7 @@
     :width="width"
     :is-disabled="isDisabled"
     :no-deselect="noDeselect"
+    :display-required="displayRequired"
     @on-search="onSearchCategory"
     @selected="onCategorySelected"
   />
@@ -50,6 +51,7 @@ export default defineComponent({
     label:{default: undefined, type: String },
     displayLabel: { default: false, type: Boolean },
     textDanger :{ default: undefined, type: String },
+    displayRequired: { default: false, type: Boolean },
   },
   emits: [
     "update:categorySelected",

package/src/components/display/comments/CommentName.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="d-flex align-items-center mb-2">
+  <div 
+    class="d-flex align-items-center mb-2">
     <component
       :is="canEditName ? 'button' : 'div'"
       v-if="!isEditing"
@@ -9,27 +10,20 @@
       >{{ commentUser.name }}</component
     >
     <template v-else>
-      <div class="d-flex flex-column">
-        <input
-          v-model="temporaryName"
-          :title="$t('Your name')"
-          class="h6"
-          type="text"
-          :class="{ 'border border-danger': nameNotValid }"
-        />
-        <p
-          class="d-flex justify-content-end h6 mb-0"
-          :class="{ 'text-danger': !validName }"
-        >
-          {{ countName + " / " + maxName }}
-        </p>
-      </div>
+      <ClassicInputText
+        v-model:text-init="temporaryName"
+        v-model:error-variable="errorName"
+        input-id="comment-name-input"
+        :label="$t('Your name')"
+        :max-length="maxName"
+        class="me-3"
+      />
       <button class="btn m-1" @click="isEditing = false">
         {{ $t("Cancel") }}
       </button>
       <button
         class="btn btn-primary m-1"
-        :disabled="nameNotValid"
+        :disabled="errorName"
         @click="validEdit"
       >
         {{ $t("Yes") }}
@@ -39,6 +33,7 @@
 </template>
 
 <script lang="ts">
+import ClassicInputText from "../../form/ClassicInputText.vue";
 import Constants from "../../../../public/config";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { mapActions, mapState } from "pinia";
@@ -46,11 +41,15 @@ import { defineComponent } from "vue";
 import { useCommentStore } from "../../../stores/CommentStore";
 export default defineComponent({
   name: "CommentName",
+  components:{
+    ClassicInputText
+  },
   emits: [],
   data() {
     return {
       isEditing: false as boolean,
       temporaryName: "" as string,
+      errorName: true as boolean,
       maxName: Constants.MAX_COMMENT_NAME as number,
     };
   },
@@ -61,15 +60,6 @@ export default defineComponent({
     canEditName(): boolean {
       return undefined !== this.authProfile;
     },
-    nameNotValid(): boolean {
-      return 0 === this.countName || !this.validName;
-    },
-    validName(): boolean {
-      return this.countName <= this.maxName;
-    },
-    countName(): number {
-      return this.temporaryName.length;
-    },
   },
   methods: {
     ...mapActions(useCommentStore, ["setCommentUser"]),

package/src/components/display/emission/EmissionItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-3 emission-item-container">
+  <article class="mt-3 emission-item-container">
     <router-link
       :to="{
         name: 'emission',
@@ -50,7 +50,7 @@
         </router-link>
       </div>
     </router-link>
-  </div>
+  </article>
 </template>
 
 <script lang="ts">

package/src/components/display/emission/EmissionPresentationItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <article
     class="emission-item-container emission-presentation-container mt-3"
     :class="isVertical ? 'emission-vertical-item' : ''"
   >
@@ -40,7 +40,7 @@
         </div>
       </div>
     </router-link>
-  </div>
+  </article>
 </template>
 
 <script lang="ts">

package/src/components/display/filter/AdvancedSearch.vue

@@ -12,10 +12,10 @@
       v-show="showFilters"
       class="advanced-search-container"
     >
-      <div class="d-flex flex-column">
-        <div class="text-primary mb-2">
+      <fieldset class="d-flex flex-column flex-grow-3">
+        <legend class="text-primary mb-2">
           {{ $t("Filter") }}
-        </div>
+        </legend>
         <MonetizableFilter
           v-if="!isPodcastmaker && !platformEducation"
           :is-emission="isEmission"
@@ -63,7 +63,7 @@
           :label="$t('Show only episodes with video')"
           @update:text-init="updateOnlyVideo"
         />
-      </div>
+      </fieldset>
       <SearchOrder
         :is-emission="isEmission"
         :sort="sort"

package/src/components/display/filter/SearchOrder.vue

@@ -5,10 +5,11 @@
     :options="optionsArray"
     :radio-label="$t('Sort')"
     class-label="text-primary mb-2"
+    :type-tag="typeTag"
+    class="flex-grow-1"
     @update:text-init="$emit('update:sort', $event)"
   />
 </template>
-
 <script lang="ts">
 import ClassicRadioLabel from "../../form/ClassicRadioLabel.vue";
 import { defineComponent } from "vue";
@@ -19,6 +20,7 @@ export default defineComponent({
   props: {
     isEmission: { default: false, type: Boolean },
     sort: { default: "DATE", type: String },
+    typeTag: { default: "fieldset", type: String },
   },
 
   emits: ["update:sort"],

package/src/components/display/list/PaginateSection.vue

@@ -22,7 +22,7 @@
           <path fill-rule="evenodd" :d="paginateButton.path" />
         </svg>
       </button>
-      <div v-for="pageNumber in pagination" :key="pageNumber">
+      <template v-for="pageNumber in pagination" :key="pageNumber">
         <span v-if="null === pageNumber" class="btn btn-min-width"> ... </span>
         <button
           v-else
@@ -32,7 +32,7 @@
         >
           {{ pageNumber }}
         </button>
-      </div>
+      </template>
       <button
         v-for="paginateButton in buttonsRight"
         :key="paginateButton.title"

package/src/components/display/participant/ParticipantItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="participant" class="participant-item-container">
+  <article v-if="participant" class="participant-item-container">
     <router-link
       :to="{
         name: 'participant',
@@ -48,7 +48,7 @@
     >
       © {{ participant.orga.name }}
     </router-link>
-  </div>
+  </article>
 </template>
 
 <script lang="ts">

package/src/components/display/playlist/PlaylistItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="emission-item-container">
+  <article class="emission-item-container">
     <router-link
       :to="{
         name: 'playlist',
@@ -44,7 +44,7 @@
         class="img-box"
       />
     </router-link>
-  </div>
+  </article>
 </template>
 
 <script lang="ts">

package/src/components/display/podcasts/PodcastItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <article
     class="podcast-item-container"
     :data-pubdate="displayDate"
     :data-count="podcast.downloadCount"
@@ -41,7 +41,7 @@
         :animators="podcast.animators"
       />
     </div>
-  </div>
+  </article>
 </template>
 
 <script lang="ts">

package/src/components/display/podcasts/PodcastPlayButton.vue

@@ -17,7 +17,7 @@
             :size="'audio' === hoverType ? 50 : 40"
           />
           <PodcastIsPlaying v-if="playingPodcast && !playerVideo"/>
-          <span v-if="!isVideoPodcast" class="ms-1">{{ durationString }}</span>
+          <time v-if="!isVideoPodcast" class="ms-1" :datetime="durationIso">{{ durationString }}</time>
         </button>
         <button 
           v-if="isVideoPodcast"
@@ -29,7 +29,7 @@
         >
           <PlayVideoIcon v-if="!playerVideo" :size="'video' === hoverType ? 50 : 40" />
           <PodcastIsPlaying v-if="playingPodcast && playerVideo"/>
-          <span class="ms-2">{{ durationString }}</span>
+          <time class="ms-2" :datetime="durationIso">{{ durationString }}</time>
         </button>
         <div v-if="!classicPodcastPlay" class="special-icon-play-button">
           <component :is="iconName" :size="16" />
@@ -58,6 +58,9 @@ import { useAuthStore } from "../../../stores/AuthStore";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
 import { defineAsyncComponent, defineComponent } from "vue";
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+dayjs.extend(duration);
 const PodcastIsPlaying = defineAsyncComponent(() => import("./PodcastIsPlaying.vue"));
 export default defineComponent({
   name: "PodcastPlayButton",
@@ -193,6 +196,10 @@ export default defineComponent({
         Math.round(this.podcast.duration / 1000),
       );
     },
+    durationIso(): string {
+      if (!this.podcast || this.podcast.duration <= 1) return "";
+      return dayjs.duration({ milliseconds: this.podcast.duration }).toISOString();
+    },
   },
 
   methods: {

package/src/components/display/sharing/ChooseEpisodesNumber.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="d-flex align-items-center flex-wrap">
+    <span class="flex-shrink-0">{{ $t("Show") }}</span>
+    <input
+      id="number-input"
+      v-model="internNumber"
+      type="number"
+      min="1"
+      max="50"
+      class="input-share-player text-center m-2"
+      :title="$t('Number of player podcasts')"
+    />
+    <span class="flex-shrink-0">{{ $t("Last podcasts") }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    episodesNumber: { default: 3, type: Number },
+  },
+  emits: [
+    "updateNumber",
+  ],
+
+  data() {
+    return {
+      internNumber: 3 as number
+    };
+  },
+  watch:{
+    internNumber(){
+      if (this.internNumber < 1) {
+        this.$emit("updateNumber", 1);
+      }else if(this.internNumber > 50){
+        this.$emit("updateNumber", 50);
+      }else{
+        this.$emit("updateNumber", this.internNumber);
+      }
+    }
+  },
+
+  created(){
+    this.internNumber = this.episodesNumber;
+  }
+
+});
+</script>
+
+<style lang="scss">
+.octopus-app {
+  .input-share-player {
+    border: 1px solid var(--octopus-border-default);
+    border-radius: 50px;
+    width: 60px;
+  }
+}
+</style>

package/src/components/display/sharing/PlayerParameters.vue

@@ -1,98 +1,102 @@
 <template>
-  <div class="h4 mb-2 mt-3">
-    {{ $t("player parameters") }}
-  </div>
-  <template v-if="choseNumberEpisode">
-    <div
-      v-if="displayChoiceAllEpisodes"
-      class="d-flex align-items-center flex-wrap mt-1"
-    >
-      <input
-        id="radio-all-episodes"
-        v-model="episodeNumbers"
-        class="form-check-input"
-        type="radio"
-        name="episodeNumbers"
-        value="all"
+  <fieldset class="mt-3">
+    <legend class="h4 mb-2 mt-3">
+      {{ $t("player parameters") }}
+    </legend>
+    <template v-if="choseNumberEpisode">
+      <div v-if="displayChoiceAllEpisodes" role="radiogroup">
+        <div
+          class="d-flex align-items-center flex-wrap mt-1"
+        >
+          <input
+            id="radio-all-episodes"
+            v-model="episodeChoiceDisplay"
+            class="form-check-input"
+            type="radio"
+            name="episodeNumbers"
+            value="all"
+          />
+          <label for="radio-all-episodes" class="flex-shrink-0">{{
+            $t("Show every episode")
+          }}</label>
+        </div>
+        <div
+          class="d-flex align-items-center flex-wrap"
+        >
+          <input
+            v-if="displayChoiceAllEpisodes"
+            v-model="episodeChoiceDisplay"
+            class="form-check-input"
+            type="radio"
+            name="episodeNumbers"
+            value="number"
+            :title="$t('Show') + ' ' + $t('Last podcasts')"
+          />
+          <ChooseEpisodesNumber :episodes-number="episodesNumber" @update-number="$emit('update:episodesNumber', $event)"/>
+        </div>
+      </div>
+      <ChooseEpisodesNumber v-else :episodes-number="episodesNumber" @update-number="$emit('update:episodesNumber', $event)"/>
+      <ClassicCheckbox
+        :text-init="proceedReading"
+        id-checkbox="proceed-reading-checkbox"
+        :label="$t('Proceed reading')"
+        @update:text-init="$emit('update:proceedReading', $event)"
       />
-      <label for="radio-all-episodes" class="flex-shrink-0">{{
-        $t("Show every episode")
-      }}</label>
-    </div>
-    <div
-      class="d-flex align-items-center flex-wrap"
-      :class="displayChoiceAllEpisodes ? '' : 'mt-3'"
-    >
-      <input
-        v-if="displayChoiceAllEpisodes"
-        v-model="episodeNumbers"
-        class="form-check-input"
-        type="radio"
-        name="episodeNumbers"
-        value="number"
-        :title="$t('Show') + ' ' + $t('Last podcasts')"
-      />
-      <span class="flex-shrink-0">{{ $t("Show") }}</span>
-      <input
-        id="number-input"
-        v-model="iFrameNumber"
-        type="number"
-        min="1"
-        max="50"
-        class="input-share-player text-center m-2"
-        :title="$t('Number of player podcasts')"
-      />
-      <span class="flex-shrink-0">{{ $t("Last podcasts") }}</span>
-    </div>
+    </template>
+    <ClassicCheckbox
+      v-if="displayIsVisible"
+      :text-init="isVisible"
+      id-checkbox="is-visible-checkbox"
+      :label="titleStillAvailable"
+      @update:text-init="$emit('update:isVisible', $event)"
+    />
+    <ClassicCheckbox
+      v-if="displayArticleParam"
+      :text-init="displayArticle"
+      id-checkbox="display-article-checkbox"
+      :label="$t('Display associated article')"
+      @update:text-init="$emit('update:displayArticle', $event)"
+    />
+    <ClassicCheckbox
+      v-if="displayTranscriptParam"
+      :text-init="displayTranscript"
+      id-checkbox="display-transcript-checkbox"
+      :label="$t('If the transcript is available, show it')"
+      @update:text-init="$emit('update:displayTranscript', $event)"
+    />
+    <ClassicCheckbox
+      v-if="displayWaveParam"
+      :text-init="displayWave"
+      id-checkbox="display-wave-checkbox"
+      :label="$t('Show animated wave')"
+      @update:text-init="$emit('update:displayWave', $event)"
+    />
     <ClassicCheckbox
-      :text-init="proceedReading"
-      id-checkbox="proceed-reading-checkbox"
-      :label="$t('Proceed reading')"
-      @update:text-init="$emit('update:proceedReading', $event)"
+      :text-init="playerAutoPlay"
+      id-checkbox="player-autoplay-checkbox"
+      :label="$t('Trigger automatic reading if this is possible')"
+      @update:text-init="$emit('update:playerAutoPlay', $event)"
+    />
+    <PlayerCommonParameters
+      v-if="displayInsertCode"
+      :insert-code="insertCode"
+      @update:insert-code="$emit('update:insertCode', $event)"
     />
-  </template>
-  <ClassicCheckbox
-    v-if="displayIsVisible"
-    :text-init="isVisible"
-    id-checkbox="is-visible-checkbox"
-    :label="titleStillAvailable"
-    @update:text-init="$emit('update:isVisible', $event)"
-  />
-  <ClassicCheckbox
-    v-if="displayArticleParam"
-    :text-init="displayArticle"
-    id-checkbox="display-article-checkbox"
-    :label="$t('Display associated article')"
-    @update:text-init="$emit('update:displayArticle', $event)"
-  />
-  <ClassicCheckbox
-    v-if="displayTranscriptParam"
-    :text-init="displayTranscript"
-    id-checkbox="display-transcript-checkbox"
-    :label="$t('If the transcript is available, show it')"
-    @update:text-init="$emit('update:displayTranscript', $event)"
-  />
-  <ClassicCheckbox
-    v-if="displayWaveParam"
-    :text-init="displayWave"
-    id-checkbox="display-wave-checkbox"
-    :label="$t('Show animated wave')"
-    @update:text-init="$emit('update:displayWave', $event)"
-  />
-  <ClassicCheckbox
-    :text-init="playerAutoPlay"
-    id-checkbox="player-autoplay-checkbox"
-    :label="$t('Trigger automatic reading if this is possible')"
-    @update:text-init="$emit('update:playerAutoPlay', $event)"
-  />
+  </fieldset>
 </template>
 
 <script lang="ts">
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const ChooseEpisodesNumber = defineAsyncComponent(() => import("./ChooseEpisodesNumber.vue"));
+const PlayerCommonParameters = defineAsyncComponent(
+  () => import("./PlayerCommonParameters.vue"),
+);
 export default defineComponent({
   components: {
     ClassicCheckbox,
+    ChooseEpisodesNumber,
+    PlayerCommonParameters
   },
   props: {
     isVisible: { default: false, type: Boolean },
@@ -102,28 +106,31 @@ export default defineComponent({
     displayTranscriptParam: { default: false, type: Boolean },
     displayArticleParam: { default: false, type: Boolean },
     displayIsVisible: { default: false, type: Boolean },
+    displayInsertCode: { default: false, type: Boolean },
     proceedReading: { default: true, type: Boolean },
     displayArticle: { default: true, type: Boolean },
     displayTranscript: { default: true, type: Boolean },
     displayWave: { default: true, type: Boolean },
     playerAutoPlay: { default: false, type: Boolean },
     isPodcastNotVisible: { default: false, type: Boolean },
+    episodesNumber: { default: 3, type: Number },
+    insertCode: { default: false, type: Boolean },
   },
   emits: [
-    "episodeNumbers",
+    "episodeChoiceDisplay",
     "update:proceedReading",
     "update:isVisible",
-    "iFrameNumber",
+    "update:episodesNumber",
     "update:displayArticle",
     "update:displayTranscript",
     "update:displayWave",
     "update:playerAutoPlay",
+    "update:insertCode"
   ],
 
   data() {
     return {
-      episodeNumbers: "number" as string,
-      iFrameNumberPriv: "3" as string,
+      episodeChoiceDisplay: "number" as string,
     };
   },
   computed: {
@@ -132,35 +139,11 @@ export default defineComponent({
         ? this.$t("Podcast still available")
         : this.$t("Podcasts still available");
     },
-    iFrameNumber: {
-      get(): string {
-        return this.iFrameNumberPriv;
-      },
-      set(value: string) {
-        const val = parseInt(value, 10);
-        if (!isNaN(val) && val >= 1 && val <= 50) {
-          this.iFrameNumberPriv = value;
-        }
-      },
-    },
   },
   watch: {
-    episodeNumbers(): void {
-      this.$emit("episodeNumbers", this.episodeNumbers);
-    },
-    iFrameNumberPriv(): void {
-      this.$emit("iFrameNumber", this.iFrameNumberPriv);
+    episodeChoiceDisplay(): void {
+      this.$emit("episodeChoiceDisplay", this.episodeChoiceDisplay);
     },
   },
 });
-</script>
-
-<style lang="scss">
-.octopus-app {
-  .input-share-player {
-    border: 1px solid var(--octopus-border-default);
-    border-radius: 50px;
-    width: 60px;
-  }
-}
-</style>
+</script>

package/src/components/display/sharing/SharePlayer.vue

@@ -47,6 +47,8 @@
             v-model:proceed-reading="proceedReading"
             v-model:is-visible="isVisible"
             v-model:player-auto-play="playerAutoPlay"
+            v-model:episodes-number="episodesNumber"
+            v-model:insert-code="insertCode"
             :display-is-visible="displayIsVisible"
             :is-podcast-not-visible="isPodcastNotVisible"
             :chose-number-episode="choseNumberEpisodes"
@@ -54,13 +56,10 @@
             :display-transcript-param="displayTranscriptParam"
             :display-article-param="displayArticleParam"
             :display-wave-param="displayWaveParam"
-            @i-frame-number="iFrameNumber = $event"
-            @episode-numbers="episodeNumbers = $event"
-          />
-          <PlayerCommonParameters
-            v-if="displayInsertCode"
-            v-model:insert-code="insertCode"
+            :display-insert-code="displayInsertCode"
+            @episode-choice-display="episodeChoiceDisplay = $event"
           />
+
           <ShareModalPlayer
             v-if="isShareModal"
             :embed-link="iFrame"
@@ -102,9 +101,6 @@ const ShareModalPlayer = defineAsyncComponent(
 const PlayerParameters = defineAsyncComponent(
   () => import("./PlayerParameters.vue"),
 );
-const PlayerCommonParameters = defineAsyncComponent(
-  () => import("./PlayerCommonParameters.vue"),
-);
 const SharePlayerTypes = defineAsyncComponent(
   () => import("./SharePlayerTypes.vue"),
 );
@@ -117,7 +113,6 @@ export default defineComponent({
     SharePlayerColors,
     PlayerParameters,
     SharePlayerTypes,
-    PlayerCommonParameters,
   },
   props: {
     podcast: { default: undefined, type: Object as () => Podcast },
@@ -136,8 +131,8 @@ export default defineComponent({
       color: "#40a372" as string,
       theme: "#000000" as string,
       proceedReading: true as boolean,
-      episodeNumbers: "number" as string,
-      iFrameNumber: "3" as string,
+      episodeChoiceDisplay: "number" as string,
+      episodesNumber: 3 as number,
       isVisible: false as boolean,
       displayArticle: true as boolean,
       displayTranscript: true as boolean,
@@ -263,9 +258,9 @@ export default defineComponent({
       }
       let url = [""];
       const iFrameNumber =
-        this.displayChoiceAllEpisodes && "all" === this.episodeNumbers
+        this.displayChoiceAllEpisodes && "all" === this.episodeChoiceDisplay
           ? "/0"
-          : "/" + this.iFrameNumber;
+          : "/" + this.episodesNumber;
       url.push(`${this.miniplayerUrl}miniplayer/`);
       if (!this.podcast && !this.playlist && this.emission) {
         url = this.constructEmissionUrl(url);
@@ -334,9 +329,9 @@ export default defineComponent({
       }
     },
     getIframeNumber(): string {
-      return this.displayChoiceAllEpisodes && "all" === this.episodeNumbers
+      return this.displayChoiceAllEpisodes && "all" === this.episodeChoiceDisplay
         ? "/0"
-        : "/" + this.iFrameNumber;
+        : "/" + this.episodesNumber;
     },
     constructEmissionUrl(url: Array<string>) {
       if (!this.emission) {

package/src/components/form/ClassicInputText.vue

@@ -4,19 +4,13 @@
     :class="{ 'form-margin': displayLabel }"
   >
     <div class="d-flex align-items-center">
-      <label
-        v-if="!isWysiwyg"
-        class="form-label"
-        :for="inputId"
-        :class="displayLabel ? '' : 'd-none'"
-        >{{ label }}</label
-      >
-      <div
-        v-else
-        class="form-label"
-        :class="displayLabel ? '' : 'd-none'"
-        >{{ label }}</div
-      >
+      <component
+        :is="isWysiwyg? 'div': 'label'"
+        :class="[classLabel, displayLabel ? '' : 'd-none']"
+        :for="isWysiwyg ? '': inputId"
+        >{{ label }}
+        <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="$t('Mandatory input')"/>
+      </component>
       <template v-if="popover">
         <button
           :id="'popover' + inputId"
@@ -54,6 +48,7 @@
           forceError || (isError && (undefined !== textValue || canBeNull)),
       }"
       :disabled="isDisable"
+      :required="!canBeNull"
     />
     <textarea
       v-else-if="isTextarea"
@@ -69,6 +64,7 @@
           forceError || (isError && (undefined !== textValue || canBeNull)),
       }"
       :disabled="isDisable"
+      :required="!canBeNull"
     />
     <ClassicWysiwyg
       v-else
@@ -110,6 +106,7 @@
   </div>
 </template>
 <script lang="ts">
+import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
 import { defineAsyncComponent, defineComponent } from "vue";
 const ClassicPopover = defineAsyncComponent(
@@ -127,6 +124,7 @@ export default defineComponent({
     ClassicPopover,
     ClassicEmojiPicker,
     HelpCircleIcon,
+    AsteriskIcon
   },
   props: {
     inputId: { default: "", type: String },
@@ -153,6 +151,8 @@ export default defineComponent({
     popoverRelativeClass: { default: undefined, type: String },
     forceReload: { default: false, type: Boolean },
     typeInput: { default: "text", type: String },
+    displayRequired: { default: false, type: Boolean },
+    classLabel: { default: "form-label", type: String },
   },
   emits: ["update:textInit", "update:errorVariable"],
   data() {

package/src/components/form/ClassicMultiselect.vue

@@ -9,7 +9,9 @@
   >
     <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
       label
-    }}</label>
+    }}
+    <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="$t('Mandatory input')"/>
+  </label>
     <vSelect
       v-model="optionSelected"
       :input-id="id"
@@ -74,12 +76,14 @@
 </template>
 
 <script lang="ts">
+import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
 import vSelect from "vue-select";
 export default {
   components: {
     vSelect,
     ChevronDownIcon,
+    AsteriskIcon
   },
   props: {
     id: { default: "", type: String },
@@ -100,6 +104,7 @@ export default {
     maxOptions: { default: null, type: Number },
     allowEmpty: { default: true, type: Boolean },
     textDanger :{ default: undefined, type: String },
+    displayRequired: { default: false, type: Boolean },
   },
 
   emits: ["onSearch", "selected", "onClose"],

package/src/components/form/ClassicRadio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex" :class="isColumn ? 'flex-column' : ''">
+  <div role="radiogroup" class="d-flex" :class="isColumn ? 'flex-column' : ''">
     <div
       v-for="option in options"
       :key="option.title"

package/src/components/form/ClassicRadioLabel.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="d-flex flex-column">
-    <div v-if="radioLabel" :class="classLabel">{{ radioLabel }}</div>
+  <component :is="typeTag" class="d-flex flex-column">
+    <component :is="'fieldset'===typeTag ? 'legend': 'div'" v-if="radioLabel" :class="classLabel">{{ radioLabel }}</component>
     <ClassicRadio
       :id-radio="idRadio"
       :is-disabled="isDisabled"
@@ -9,7 +9,7 @@
       :is-column="isColumn"
       @update:text-init="$emit('update:textInit', $event)"
     />
-  </div>
+  </component>
 </template>
 
 <script lang="ts">
@@ -32,6 +32,7 @@ export default defineComponent({
     isColumn: { default: true, type: Boolean },
     radioLabel: { default: undefined, type: String },
     classLabel: { default: "form-label", type: String },
+    typeTag: { default: "div", type: String },
   },
   emits: ["update:textInit"]
 });

package/src/components/form/ClassicSelect.vue

@@ -2,7 +2,8 @@
   <div class="classic-select" :class="{ 'form-margin': displayLabel }">
     <label v-show="displayLabel" :for="idSelect" :class="classLabel">{{
       label
-    }}</label>
+    }}
+    <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="$t('Mandatory input')"/></label>
     <select
       :id="idSelect"
       :value="textInit"
@@ -11,6 +12,7 @@
       :class="transparent ? 'transparent' : ''"
       :style="getFontFamily"
       :aria-label="label"
+      :required="displayRequired"
       @change="$emit('update:textInit', $event.target.value)"
     >
       <option v-if="placeholder" value="" disabled selected>{{ placeholder }}</option>
@@ -27,9 +29,13 @@
   </div>
 </template>
 <script lang="ts">
+import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "ClassicSelect",
+  components:{
+    AsteriskIcon
+  },
   props: {
     idSelect: { default: "", type: String },
     label: { default: "", type: String },
@@ -54,6 +60,7 @@ export default defineComponent({
     classLabel: { default: "form-label", type: String },
     orderOptions: { default: true, type: Boolean},
     placeholder: { default: undefined, type: String},
+    displayRequired: { default: false, type: Boolean },
   },
   emits: ["update:textInit"],
   computed: {

package/src/components/misc/ClassicPopover.vue

@@ -173,7 +173,6 @@ export default defineComponent({
       }
       this.show = true;
       let parentLeft = 0;
-      let parentRight = 0;
       let parentTop = 0;
       let parentScrollTop = 0;
       let parentBottom = 0;
@@ -190,7 +189,6 @@ export default defineComponent({
         }
         const modalBodyRect = modalBody.getBoundingClientRect();
         parentLeft = modalBodyRect.left;
-        parentRight = modalBodyRect.right;
         parentTop = modalBodyRect.top;
         parentScrollTop = modalBody.scrollTop;
         parentBottom=modalBodyRect.bottom;

package/src/components/misc/FooterSection.vue

@@ -2,6 +2,7 @@
   <footer
     id="footer"
     ref="footer"
+    role="contentinfo"
     class="d-flex align-items-center justify-content-between border-top mt-auto"
   >
     <div v-if="!isPodcastmaker" class="d-flex flex-column px-1">
@@ -9,7 +10,7 @@
         &copy; Saooti 2025
       </div>
       <FooterGarSection v-if="isGarRole" :auth-orga-id="authOrgaId" />
-      <nav :aria-label="$t('Site menu')">
+      <nav role="navigation" :aria-label="$t('Site menu')">
         <ul class="p-0 m-0">
           <li 
             v-for="link in routerLinkSecondArray"
@@ -211,7 +212,7 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app {
   #footer {
-    font-size: 0.6rem;
+    font-size: max(0.6rem, 12px);
     bottom: 0;
     z-index: 10;
     background: white;

package/src/components/misc/HomeDropdown.vue

@@ -32,7 +32,7 @@
       :left-pos="true"
       :is-top-layer="true"
     >
-      <nav :aria-label="$t('User menu')">
+      <nav role="navigation" :aria-label="$t('User menu')">
         <ul class="p-0 m-0">
           <template v-if="!isAuthenticated">
             <li class="li-style-none">

package/src/components/misc/TopBarMainContent.vue

@@ -70,22 +70,23 @@
         </a>
       </template>
       <div class="d-flex align-items-center justify-content-end flex-grow-1">
-        <nav :aria-label="$t('Site menu')">
+        <nav role="navigation" :aria-label="$t('Site menu')">
           <ul class="d-flex">
-          <li v-for="link in routerLinkArray" :key="link.routeName" class="li-style-none">
-            <router-link
-              v-show="!isPhone"
-              v-if="link.condition"
-              :to="{
-                name: link.routeName,
-                query: getQueriesRouter(link.routeName),
-              }"
-              class="link-hover py-2 px-3"
-            >
-              {{ link.title }}
-            </router-link>
-          </li>
-        </ul>
+            <template v-for="link in routerLinkArray" :key="link.routeName">
+              <li v-if="link.condition" class="li-style-none">
+                <router-link
+                  v-show="!isPhone"
+                  :to="{
+                    name: link.routeName,
+                    query: getQueriesRouter(link.routeName),
+                  }"
+                  class="link-hover py-2 px-3"
+                >
+                  {{ link.title }}
+                </router-link>
+              </li>
+            </template>
+          </ul>
         </nav>
         <button
           v-show="!isPhone && !inContentDisplayPage"
@@ -105,24 +106,24 @@
           :left-pos="true"
           :is-top-layer="true"
         >
-          <nav class="d-flex flex-column" :aria-label="$t('Site menu')">
+          <nav role="navigation" class="d-flex flex-column" :aria-label="$t('Site menu')">
             <ul class="p-0 m-0">
-              <li
-                v-for="link in routerLinkInsideArray"
-                :key="link.routeName"
-                class="li-style-none"
-              >
-                <router-link
+              <template v-for="link in routerLinkInsideArray" :key="link.routeName">
+                <li
                   v-if="link.condition"
-                  :to="{
-                    name: link.routeName,
-                    query: getQueriesRouter(link.routeName),
-                  }"
-                  class="p-1 octopus-dropdown-item"
+                  class="li-style-none"
                 >
-                  {{ link.title }}
-                </router-link>
-              </li>
+                  <router-link
+                    :to="{
+                      name: link.routeName,
+                      query: getQueriesRouter(link.routeName),
+                    }"
+                    class="p-1 octopus-dropdown-item"
+                  >
+                    {{ link.title }}
+                  </router-link>
+                </li>
+            </template>
             </ul>
           </nav>
         </ClassicPopover>

package/src/components/pages/MapPage.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="page-box map-page">
     <component :is="titleTag">{{ $t("Site map") }}</component>
-    <nav :aria-label="$t('Site menu')" class="d-flex flex-column align-items-center">
+    <nav role="navigation" :aria-label="$t('Site menu')" class="d-flex flex-column align-items-center">
       <ul class="my-1">
         <template v-for="linkItem in siteMap" :key="linkItem.id">
           <li v-if="linkItem.condition" :id="linkItem.id" class="my-1">

package/src/locale/de.ts

@@ -406,4 +406,5 @@ export default {
   "The episode is being processed":"Die Episode wird bearbeitet",
   Rubrics: "Rubriken",
   "New window":"{text} - Neues Fenster",
+  "Mandatory input":"Pflichteingabe",
 }

package/src/locale/en.ts

@@ -407,4 +407,5 @@ export default {
   "The episode is being processed":"The episode is being processed",
   Rubrics: "Rubrics",
   "New window":"{text} - New window",
+  "Mandatory input":"Mandatory input",
 };

package/src/locale/es.ts

@@ -407,4 +407,5 @@ export default {
   "The episode is being processed":"El episodio está siendo procesado",
   Rubrics: "Secciones",
   "New window":"{text} - Nueva ventana",
+  "Mandatory input":"Entrada obligatoria",
 }

package/src/locale/fr.ts

@@ -414,4 +414,5 @@ export default {
   "The episode is being processed":"L'épisode est en cours de traitement",
   Rubrics: "Rubriques",
   "New window":"{text} - Nouvelle fenêtre",
+  "Mandatory input":"Saisie obligatoire",
 };

package/src/locale/it.ts

@@ -401,4 +401,5 @@ export default{
   "The episode is being processed":"L'episodio è in fase di elaborazione",
   Rubrics: "Rubriche",
   "New window":"{text} - Nuova finestra",
+  "Mandatory input":"Ingresso obbligatorio",
 };

package/src/locale/sl.ts

@@ -397,4 +397,5 @@ export default {
   "The episode is being processed":"Epizoda je v obdelavi",
   Rubrics: "Rubrike",
   "New window":"{text} - Novo okno",
+  "Mandatory input":"Obvezen vnos",
 }

package/src/style/_utilities.scss

@@ -179,6 +179,8 @@ $utilities: map.merge(
       values: (
         grow-0: 0,
         grow-1: 1,
+        grow-2: 2,
+        grow-3: 3,
       )
     ),
     "flex-shrink": (

package/src/style/form.scss

@@ -1,6 +1,11 @@
 
 
 .octopus-app{
+	fieldset{
+		border-color: var(--octopus-secondary-lighter);
+		border-style: solid;
+		padding: 1rem;
+	}
 	.octopus-form-item{
 		min-height: 1.44rem;
     padding: 0.4rem 0;
@@ -11,7 +16,7 @@
 	}
 
 	.form-label {
-		display: block;
+		display: flex;
 		line-height: 1.2rem;
 		padding: 0.5rem 0 0;
 		color: black;

package/src/style/share.scss

@@ -234,7 +234,6 @@
     border-radius:var(--octopus-border-radius);
     display: flex;
     width: 100%;
-    padding: 1rem 2rem;
     margin-bottom: 1rem;
     justify-content: space-around;