From 209711f41ba7ad269cb94bc5b6b3196d778aecbc Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Fri, 20 Dec 2024 11:57:44 +0100
Subject: [PATCH 1/6] add mobile platform detection and remove autofocus

---
 argilla-frontend/assets/scss/base/base.scss     |  8 ++++++++
 .../container/questions/QuestionsForm.vue       | 17 +++++++++++++----
 .../v1/infrastructure/services/usePlatform.ts   |  4 ++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/argilla-frontend/assets/scss/base/base.scss b/argilla-frontend/assets/scss/base/base.scss
index 383ad3cee4..65abb40b62 100644
--- a/argilla-frontend/assets/scss/base/base.scss
+++ b/argilla-frontend/assets/scss/base/base.scss
@@ -196,10 +196,18 @@ a {
 .--heading1 {
   @include font-size(40px);
   @include line-height(50px);
+  @include media("<desktop") {
+    @include font-size(30px);
+    @include line-height(40px);
+  }
 }
 .--heading2 {
   @include font-size(32px);
   @include line-height(40px);
+  @include media("<desktop") {
+    @include font-size(24px);
+    @include line-height(30px);
+  }
 }
 .--heading3 {
   @include font-size(24px);
diff --git a/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue b/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue
index 48ce2310be..b415205194 100644
--- a/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue
@@ -11,6 +11,7 @@
       <QuestionsComponent
         :questions="record.questions"
         :autofocusPosition="autofocusPosition"
+        :visible-shortcuts="!$platform.isMobile"
         :is-bulk-mode="isBulkMode"
         @on-focus="updateQuestionAutofocus"
       />
@@ -29,7 +30,7 @@
           @on-click="onDiscard"
         >
           <span
-            v-if="!isDiscarding"
+            v-if="!isDiscarding && !$platform.isMobile"
             class="button__shortcuts"
             v-text="'⌫'"
           /><span v-text="$t('questions_form.discard')" />
@@ -44,7 +45,7 @@
           :data-title="!isSaving ? draftSavingTooltip : null"
           @on-click="onSaveDraft"
         >
-          <span v-if="!isDraftSaving"
+          <span v-if="!isDraftSaving && !$platform.isMobile"
             ><span
               class="button__shortcuts"
               v-text="$platform.isMac ? '⌘' : 'ctrl'" /><span
@@ -79,7 +80,11 @@
           "
           @on-click="onSubmit"
         >
-          <span v-if="!isSubmitting" class="button__shortcuts" v-text="'↵'" />
+          <span
+            v-if="!isSubmitting && !$platform.isMobile"
+            class="button__shortcuts"
+            v-text="'↵'"
+          />
           <span v-text="$t('questions_form.submit')" />
         </BaseButton>
       </div>
@@ -179,7 +184,11 @@ export default {
         return "--focused-form";
     },
     formHasFocus() {
-      return this.autofocusPosition || this.autofocusPosition == 0;
+      if (!this.$platform.isMobile) {
+        return this.autofocusPosition || this.autofocusPosition == 0;
+      } else {
+        return false;
+      }
     },
     numberOfQuestions() {
       return this.record.questions.length;
diff --git a/argilla-frontend/v1/infrastructure/services/usePlatform.ts b/argilla-frontend/v1/infrastructure/services/usePlatform.ts
index f92a993326..157cc5f1af 100644
--- a/argilla-frontend/v1/infrastructure/services/usePlatform.ts
+++ b/argilla-frontend/v1/infrastructure/services/usePlatform.ts
@@ -3,5 +3,9 @@ export const usePlatform = () => {
 
   return {
     isMac: userAgent.includes("Mac"),
+    isMobile:
+      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        userAgent
+      ),
   };
 };

From dcd4afab5908905e256e1fe94b39bef519b850b5 Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Fri, 20 Dec 2024 12:00:00 +0100
Subject: [PATCH 2/6] improve annotation page accessibility

---
 .../base/base-breadcrumbs/BaseBreadcrumbs.vue |  7 +++--
 .../base/base-card/BaseCardWithTabs.vue       | 30 +++++++++++++++----
 .../base/base-search-bar/BaseSearchBar.vue    |  1 +
 .../base/base-switch/BaseSwitch.vue           | 26 ++++++++++++----
 .../base/base-tooltip/BaseFixedTooltip.vue    |  1 +
 .../fields/image-field/ImageField.vue         |  3 +-
 .../container/fields/sandbox/Sandbox.vue      |  1 +
 .../components/EntityComponent.vue            |  1 +
 .../questions/form/Questions.component.vue    |  1 +
 .../DndSelection.component.vue                |  7 ++++-
 .../rating/RatingMonoSelection.component.vue  |  1 +
 .../LabelSelection.component.vue              | 24 ++++++++++++---
 .../search-label/SearchLabel.component.vue    |  7 ++++-
 .../single-label/SingleLabel.component.vue    |  2 ++
 .../span/EntityLabelSelection.component.vue   |  5 ++--
 .../form/text-area/TextArea.component.vue     |  2 ++
 .../form/text-area/TextAreaContents.vue       |  2 ++
 .../header/RadioButtonsSelect.base.vue        | 14 +++++++--
 .../header/ToggleAnnotationType.vue           |  4 +--
 .../DatasetSettingsIconFeedbackTask.vue       |  2 ++
 .../header/header-bar/ExportToHub.vue         | 14 +++++++--
 .../header/header-bar/HeaderFeedbackTask.vue  |  4 +--
 .../header/header-bar/ImportData.vue          |  3 +-
 .../search-bar-filter/SearchBarFilter.vue     | 11 ++++---
 .../annotation/pagination/Pagination.vue      |  2 --
 .../status-counter/StatusCounterSkeleton.vue  |  2 +-
 .../annotation/settings/SettingsFields.vue    |  1 +
 .../annotation/settings/SettingsMetadata.vue  |  1 +
 .../annotation/settings/SettingsQuestions.vue |  1 +
 .../TopDatasetSettingsFeedbackTask.vue        |  2 +-
 .../configuration/DatasetConfiguration.vue    |  1 +
 31 files changed, 141 insertions(+), 42 deletions(-)

diff --git a/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue b/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue
index fa70a8a243..36f3916e86 100644
--- a/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue
+++ b/argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue
@@ -16,8 +16,8 @@
   -->
 
 <template>
-  <div class="breadcrumbs">
-    <ul role="navigation">
+  <nav aria-label="Breadcrumb" class="breadcrumbs">
+    <ul>
       <li v-for="breadcrumb in filteredBreadcrumbs" :key="breadcrumb.name">
         <nuxt-link
           class="breadcrumbs__item"
@@ -29,11 +29,12 @@
           v-else
           class="breadcrumbs__item --action"
           @click="onBreadcrumbAction(breadcrumb)"
+          :aria-current="breadcrumb.name"
           >{{ breadcrumb.name }}</span
         >
       </li>
     </ul>
-  </div>
+  </nav>
 </template>
 
 <script>
diff --git a/argilla-frontend/components/base/base-card/BaseCardWithTabs.vue b/argilla-frontend/components/base/base-card/BaseCardWithTabs.vue
index a3b076c8d8..da7f8ea03f 100644
--- a/argilla-frontend/components/base/base-card/BaseCardWithTabs.vue
+++ b/argilla-frontend/components/base/base-card/BaseCardWithTabs.vue
@@ -1,16 +1,32 @@
 <template>
   <div :class="['card-with-tabs', tabClass]">
-    <ul class="card-with-tabs__tabs">
+    <ul class="card-with-tabs__tabs" role="tablist">
       <li
+        role="tab"
         class="card-with-tabs__tab"
         :class="[{ '--active': tab.id === currentTab.id }, tab?.class]"
         v-for="tab in tabs"
         :key="tab.id"
       >
-        <BaseTooltip :title="tab.tooltipTitle" :text="tab.tooltipText">
-          <BaseButton class="small" @on-click="changeTab(tab)">
+        <BaseTooltip
+          :title="tab.tooltipTitle"
+          :aria-label="tab.tooltipTitle"
+          :text="tab.tooltipText"
+        >
+          <BaseButton
+            class="small"
+            @on-click="changeTab(tab)"
+            :id="tab.component"
+            :aria-label="tab.name || tab.label"
+          >
             {{ tab.name }}
-            <svgicon v-if="tab.icon" :name="tab.icon" width="10" height="10" />
+            <svgicon
+              v-if="tab.icon"
+              :name="tab.icon"
+              width="10"
+              height="10"
+              aria-hidden="true"
+            />
             <span
               class="card-with-tabs__info"
               v-if="tab.info"
@@ -20,7 +36,11 @@
         </BaseTooltip>
       </li>
     </ul>
-    <div class="card-with-tabs__content">
+    <div
+      class="card-with-tabs__content"
+      role="tabpanel"
+      :aria-labelledby="currentComponent"
+    >
       <slot :current-component="currentComponent" />
     </div>
   </div>
diff --git a/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue b/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue
index 4a91845321..f2affe3209 100644
--- a/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue
+++ b/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue
@@ -44,6 +44,7 @@
       v-show="!isCollapsed"
       class="search-area__button__close"
       @click="removeFilter"
+      aria-label="close"
     >
       <svgicon
         v-if="filter || !isCollapsed"
diff --git a/argilla-frontend/components/base/base-switch/BaseSwitch.vue b/argilla-frontend/components/base/base-switch/BaseSwitch.vue
index 072076f762..b4b4f66865 100644
--- a/argilla-frontend/components/base/base-switch/BaseSwitch.vue
+++ b/argilla-frontend/components/base/base-switch/BaseSwitch.vue
@@ -23,19 +23,32 @@
     <label v-if="$slots.default" :for="id || name" class="switch-label">
       <slot />
     </label>
-    <div class="switch-container" @click="toggle($event)">
+    <div
+      class="switch-container"
+      type="button"
+      role="switch"
+      @click="toggle($event)"
+      :aria-label="`${name} ${checked ? 'on' : 'off'}`"
+      :aria-checked="checked ? 'true' : 'false'"
+    >
       <div class="switch-thumb" :style="styles">
         <input
-          :id="id"
+          :id="id || name"
           type="checkbox"
           :name="name"
           :disabled="disabled"
           :value="value"
           tabindex="-1"
         />
-        <button :type="type" class="switch-holder">
-          <svgicon width="10" height="10" name="check" color="white"></svgicon>
-        </button>
+        <div class="switch-holder">
+          <svgicon
+            width="10"
+            height="10"
+            name="check"
+            color="white"
+            aria-hidden="true"
+          ></svgicon>
+        </div>
       </div>
     </div>
   </div>
@@ -172,6 +185,9 @@ $switch-thumb-size: 18px;
       @include absoluteCenter;
       width: $switch-thumb-size;
       height: $switch-thumb-size;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       margin: 0;
       padding: 0;
       z-index: 2;
diff --git a/argilla-frontend/components/base/base-tooltip/BaseFixedTooltip.vue b/argilla-frontend/components/base/base-tooltip/BaseFixedTooltip.vue
index f7cfe6c82b..f6b64adb8b 100644
--- a/argilla-frontend/components/base/base-tooltip/BaseFixedTooltip.vue
+++ b/argilla-frontend/components/base/base-tooltip/BaseFixedTooltip.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="isVisible"
+    role="tooltip"
     class="fixed-tooltip"
     ref="tooltip"
     v-click-outside="closeTooltip"
diff --git a/argilla-frontend/components/features/annotation/container/fields/image-field/ImageField.vue b/argilla-frontend/components/features/annotation/container/fields/image-field/ImageField.vue
index 1aa0260016..2b84216635 100644
--- a/argilla-frontend/components/features/annotation/container/fields/image-field/ImageField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/image-field/ImageField.vue
@@ -8,10 +8,11 @@
         :src="content"
         @error="handleError()"
         @load="onLoad()"
+        alt=""
       />
     </div>
     <div v-else class="image_field_placeholder">
-      <img src="images/img-placeholder.svg" />
+      <img src="images/img-placeholder.svg" alt="" />
       <p v-text="$t('couldNotLoadImage')" />
     </div>
   </div>
diff --git a/argilla-frontend/components/features/annotation/container/fields/sandbox/Sandbox.vue b/argilla-frontend/components/features/annotation/container/fields/sandbox/Sandbox.vue
index c7db97f437..490fead466 100644
--- a/argilla-frontend/components/features/annotation/container/fields/sandbox/Sandbox.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/sandbox/Sandbox.vue
@@ -1,6 +1,7 @@
 <template>
   <iframe
     :srcdoc="template"
+    title="sandbox"
     ref="iframe"
     frameborder="0"
     scrolling="no"
diff --git a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/EntityComponent.vue b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/EntityComponent.vue
index 0f61e0c47d..6bc5d10bc4 100644
--- a/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/EntityComponent.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/span-annotation/components/EntityComponent.vue
@@ -47,6 +47,7 @@
           name="suggestion"
           width="8"
           height="8"
+          :aria-label="$t('suggestion.name')"
         />
         <span
           v-if="suggestedScore"
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
index b1ea862522..c7c9a50925 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue
@@ -14,6 +14,7 @@
       <div
         v-for="(question, index) in questions"
         :key="question.id"
+        role="listitem"
         :aria-label="'Question: ' + question.name"
         @keydown.arrow-up.prevent="
           updateQuestionAutofocus(autofocusPosition - 1)
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
index 93df66a3c1..6d1b89d563 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue
@@ -38,7 +38,12 @@
 
           <span v-if="isSuggested(item)" class="draggable__suggestion">
             <span v-text="getSuggestedRank(item)" />
-            <svgicon name="suggestion" width="10" height="10" />
+            <svgicon
+              name="suggestion"
+              width="10"
+              height="10"
+              :aria-label="$t('suggestion.name')"
+            />
             <span
               class="draggable__suggestion__score"
               v-if="getSuggestedScore(item)"
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/rating/RatingMonoSelection.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/rating/RatingMonoSelection.component.vue
index c2e7052d4c..45b09e872e 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/rating/RatingMonoSelection.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/rating/RatingMonoSelection.component.vue
@@ -36,6 +36,7 @@
               v-if="isSuggested(option)"
               class="label-text__suggestion-icon"
               name="suggestion"
+              :aria-label="$t('suggestion.name')"
             />
           </label>
         </BaseTooltip>
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue
index 910b3420f5..8b5c2de409 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue
@@ -17,6 +17,8 @@
           class="show-less-button cursor-pointer"
           v-if="showCollapseButton"
           @click="toggleShowLess"
+          :aria-expanded="isExpanded"
+          :aria-label="textToShowInTheCollapseButton"
         >
           <span
             :class="isExpanded ? '--less' : '--more'"
@@ -38,16 +40,16 @@
       :css="options.length < 50"
       class="inputs-area"
       v-if="filteredOptions.length"
-      role="group"
-      aria-multiselectable="multiple"
+      :role="ariaRole"
+      :aria-multiselectable="ariaMultiselectable"
       aria-label="Label-Options"
     >
       <div
+        role="option"
         class="input-button"
         v-for="(option, index) in visibleOptions"
         :key="option.id"
         @keydown.enter.prevent
-        role="button"
         :aria-label="option.text"
       >
         <input
@@ -60,6 +62,7 @@
           @change="onSelect(option)"
           @focus="onFocus"
           @keydown.tab="expandLabelsOnTab(index)"
+          :aria-labelledby="`label-${option.id}`"
         />
         <BaseTooltip
           :title="isSuggested(option) ? $t('suggestion.name') : ''"
@@ -67,6 +70,7 @@
           minimalist
         >
           <label
+            :id="`label-${option.id}`"
             class="label-text"
             :class="{
               'label-active': option.isSelected,
@@ -83,7 +87,11 @@
             />
             <span class="label-text__text">{{ option.text }}</span>
             <span v-if="isSuggested(option)" class="label-text__suggestion">
-              <svgicon class="label-text__suggestion__icon" name="suggestion" />
+              <svgicon
+                class="label-text__suggestion__icon"
+                name="suggestion"
+                :aria-label="$t('suggestion.name')"
+              />
               <span
                 v-if="getSuggestedScore(option)"
                 class="label-text__suggestion__score"
@@ -138,6 +146,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    ariaRole: {
+      type: String,
+      default: "listbox",
+    },
+    ariaMultiselectable: {
+      type: Boolean,
+      default: true,
+    },
   },
   model: {
     prop: "options",
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/shared-components/search-label/SearchLabel.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/shared-components/search-label/SearchLabel.component.vue
index e811edaa22..af37b8987d 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/shared-components/search-label/SearchLabel.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/shared-components/search-label/SearchLabel.component.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="search-area" @click="focusInSearch" aria-label="Search Labels">
+  <div
+    class="search-area"
+    role="button"
+    @click="focusInSearch"
+    aria-label="Search Labels"
+  >
     <BaseIconWithBadge
       ref="iconSearchRef"
       class="search-area__icon --search"
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/single-label/SingleLabel.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/single-label/SingleLabel.component.vue
index aa6517c189..4916b431bb 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/single-label/SingleLabel.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/single-label/SingleLabel.component.vue
@@ -10,6 +10,8 @@
       v-model="question.answer.values"
       :multiple="false"
       :isFocused="isFocused"
+      :aria-role="'listbox'"
+      :aria-multiselectable="false"
       @on-focus="onFocus"
       @on-selected="onSelected"
     />
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue
index 784f758d14..79ab96aab3 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue
@@ -42,8 +42,8 @@
       name="shuffle"
       class="inputs-area"
       v-if="filteredOptions.length"
-      role="group"
-      aria-multiselectable="multiple"
+      role="listbox"
+      :aria-multiselectable="true"
       aria-label="Label-Options"
     >
       <EntityLabelBadge
@@ -58,6 +58,7 @@
         @on-selected="onSelect(option)"
         @on-expand-labels-on-tab="expandLabelsOnTab(index)"
         @on-focus="onFocus"
+        role="option"
       />
     </transition-group>
     <i class="no-result" v-if="!filteredOptions.length" />
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextArea.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextArea.component.vue
index 3facc03e6e..c0dff1ea36 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextArea.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextArea.component.vue
@@ -54,6 +54,7 @@ export default {
             : "",
           tooltipText: this.isSuggested ? this.suggestedAgent : "",
           component: "TextAreaContents",
+          label: this.isSuggested ? this.$nuxt.$t("suggestion.name") : this.$nuxt.$t("questions_form.write")
         },
         ...(!this.isSuggested
           ? [
@@ -65,6 +66,7 @@ export default {
                 tooltipTitle: this.$nuxt.$t("suggestion.name"),
                 tooltipText: this.suggestedAgent,
                 component: "TextAreaSuggestion",
+                label: this.$nuxt.$t("suggestion.name"),
               },
             ]
           : []),
diff --git a/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextAreaContents.vue b/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextAreaContents.vue
index 16f476df40..16fdddbf3d 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextAreaContents.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextAreaContents.vue
@@ -13,6 +13,7 @@
       :markdown="question.answer.value"
       @click.native="onFocus"
       role="textbox"
+      :aria-label="question._title"
     />
     <ContentEditableFeedbackTask
       v-else
@@ -25,6 +26,7 @@
       @on-change-focus="onChangeFocus"
       @on-exit-edition-mode="onExitEditionMode"
       role="textbox"
+      :aria-label="question._title"
     />
   </div>
 </template>
diff --git a/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue b/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue
index c24b60c356..c7ad886514 100644
--- a/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue
+++ b/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue
@@ -17,12 +17,19 @@
 
 <template>
   <div v-if="options.length">
-    <BaseDropdown :visible="dropdownIsVisible" @visibility="onVisibility">
+    <BaseDropdown
+      id="dropdown-menu"
+      :visible="dropdownIsVisible"
+      @visibility="onVisibility"
+    >
       <span slot="dropdown-header">
         <BaseButton
           class="selected-option"
           :class="currentOptionId"
           :data-title="$t('status')"
+          aria-haspopup="listbox"
+          :aria-expanded="dropdownIsVisible"
+          :aria-label="`Selected option: ${currentOptionName}`"
         >
           {{ currentOptionName }}
           <svgicon
@@ -34,14 +41,15 @@
         </BaseButton>
       </span>
       <span slot="dropdown-content">
-        <ul class="options" role="radiogroup">
+        <ul class="options" role="group">
           <li
             v-for="{ id, name, color } in options"
             class="option"
             :class="id"
             :key="id"
             tabindex="0"
-            :aria-checked="id"
+            :aria-checked="id === selectedOption"
+            :aria-label="name"
             role="radio"
             @keydown.space="changeOption(id)"
             @keydown.enter="changeOption(id)"
diff --git a/argilla-frontend/components/features/annotation/header/ToggleAnnotationType.vue b/argilla-frontend/components/features/annotation/header/ToggleAnnotationType.vue
index 76c7736cb8..55868e5ce8 100644
--- a/argilla-frontend/components/features/annotation/header/ToggleAnnotationType.vue
+++ b/argilla-frontend/components/features/annotation/header/ToggleAnnotationType.vue
@@ -6,7 +6,7 @@
       @click="switchFocusMode()"
       aria-label="Switch to Focus Mode"
       :data-title="$t('focus_mode')"
-      :aria-selected="recordCriteria.page.isFocusMode"
+      :aria-pressed="recordCriteria.page.isFocusMode"
     >
       <svgicon name="focus-mode" width="18" aria-hidden="true" />
     </button>
@@ -16,7 +16,7 @@
       :class="{ active: recordCriteria.page.isBulkMode }"
       @click="switchBulkMode()"
       :data-title="$t('bulk_mode')"
-      :aria-selected="recordCriteria.page.isBulkMode"
+      :aria-pressed="recordCriteria.page.isBulkMode"
     >
       <svgicon name="bulk-mode" width="18" aria-hidden="true" />
     </button>
diff --git a/argilla-frontend/components/features/annotation/header/header-bar/DatasetSettingsIconFeedbackTask.vue b/argilla-frontend/components/features/annotation/header/header-bar/DatasetSettingsIconFeedbackTask.vue
index 737d909138..71fdd39804 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/DatasetSettingsIconFeedbackTask.vue
+++ b/argilla-frontend/components/features/annotation/header/header-bar/DatasetSettingsIconFeedbackTask.vue
@@ -8,6 +8,7 @@
     badge-border-color="#212121"
     badge-size="20"
     icon="settings"
+    :aria-label="$t('settings.title')"
   />
 </template>
 
@@ -27,6 +28,7 @@ export default {
 .button-settings {
   padding: $base-space;
   overflow: visible;
+  flex-shrink: 0;
   &[data-title] {
     @include tooltip-mini("bottom");
   }
diff --git a/argilla-frontend/components/features/annotation/header/header-bar/ExportToHub.vue b/argilla-frontend/components/features/annotation/header/header-bar/ExportToHub.vue
index 097424feb1..6347c98676 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/ExportToHub.vue
+++ b/argilla-frontend/components/features/annotation/header/header-bar/ExportToHub.vue
@@ -7,8 +7,13 @@
       @mouseleave.native="closeDialogOnLeave"
       :loading="isExporting"
       :disabled="isExporting"
+      :aria-label="$t('button.exportToHub')"
     >
-      <svgicon class="export-to-hub__button__icon" name="export" />
+      <svgicon
+        class="export-to-hub__button__icon"
+        aria-hidden="true"
+        name="export"
+      />
       <span class="export-to-hub__button__text">{{
         $t("button.exportToHub")
       }}</span>
@@ -22,6 +27,9 @@
           middleware: closeMiddleware,
         }"
         class="export-to-hub__dialog"
+        role="dialog"
+        aria-labelledby="dialog-title"
+        aria-modal="true"
       >
         <div v-if="isExporting" class="export-to-hub__exporting-message">
           <h2
@@ -49,6 +57,7 @@
         </div>
         <form v-else @submit.prevent="exportToHub" class="export-to-hub__form">
           <h2
+            id="dialog-title"
             class="export-to-hub__title"
             v-text="$t('exportToHub.dialogTitle')"
           />
@@ -64,7 +73,6 @@
                   v-tooltip="{
                     content: $t('exportToHub.ownerTooltip'),
                   }"
-                  role="tooltip"
                   :aria-label="$t('exportToHub.ownerTooltip')"
                 />
               </div>
@@ -109,7 +117,6 @@
                 v-tooltip="{
                   content: $t('exportToHub.tokenTooltip'),
                 }"
-                role="tooltip"
                 :aria-label="$t('exportToHub.tokenTooltip')"
               />
             </div>
@@ -130,6 +137,7 @@
             <BaseSwitch
               class="export-to-hub__form__switch"
               v-model="exportToHubForm.isPrivate"
+              :name="$t('private')"
               >{{ $t("private") }}</BaseSwitch
             >
           </div>
diff --git a/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue b/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue
index 0b1fdb5cfc..360d54db66 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue
+++ b/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue
@@ -7,9 +7,7 @@
       @breadcrumb-action="$emit('breadcrumb-action', $event)"
     />
     <template v-if="datasetId && showSettingButton">
-      <div @click="goToSetting(datasetId)" role="button">
-        <DatasetSettingsIconFeedbackTask />
-      </div>
+      <DatasetSettingsIconFeedbackTask @click="goToSetting(datasetId)" />
     </template>
     <div class="topbar--left">
       <slot name="badge"></slot>
diff --git a/argilla-frontend/components/features/annotation/header/header-bar/ImportData.vue b/argilla-frontend/components/features/annotation/header/header-bar/ImportData.vue
index f0ee6d5b78..cd9d131270 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/ImportData.vue
+++ b/argilla-frontend/components/features/annotation/header/header-bar/ImportData.vue
@@ -2,9 +2,10 @@
   <div class="import-data">
     <BaseButton
       :data-title="$t('datasetCreation.addRecords')"
+      :aria-label="$t('datasetCreation.addRecords')"
       class="primary import-data__button"
       @click.prevent="visibleSnippet = !visibleSnippet"
-      ><svgicon name="plus"
+      ><svgicon name="plus" aria-hidden="true"
     /></BaseButton>
     <transition name="fade" appear>
       <dialog
diff --git a/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue b/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue
index bc22d482a2..73c9b6d2bc 100644
--- a/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue
+++ b/argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue
@@ -16,14 +16,17 @@
   -->
 
 <template>
-  <div
+  <form
+    role="search"
+    @submit.prevent="openOrApply"
     class="search-area"
     :class="{ active: isSearchActive, expanded: isExpanded }"
   >
     <BaseButton
-      @on-click="openOrApply"
+      type="submit"
       class="search-area__icon --search"
       :data-title="$t('search')"
+      :aria-label="$t('search')"
     >
       <svgicon name="search" width="16" height="16" aria-hidden="true" />
     </BaseButton>
@@ -32,7 +35,6 @@
       class="search-area__input"
       type="text"
       v-model.trim="searchValue"
-      role="search"
       :placeholder="$t('searchPlaceholder')"
       :aria-description="$t('searchPlaceholder')"
       autocomplete="off"
@@ -43,6 +45,7 @@
       @on-click="resetValue"
       v-if="showDelete"
       class="search-area__icon --close"
+      aria-label="close"
     >
       <svgicon name="close" width="12" height="12" aria-hidden="true" />
     </BaseButton>
@@ -71,7 +74,7 @@
         </ul>
       </template>
     </BaseDropdown>
-  </div>
+  </form>
 </template>
 
 <script>
diff --git a/argilla-frontend/components/features/annotation/pagination/Pagination.vue b/argilla-frontend/components/features/annotation/pagination/Pagination.vue
index 534be68307..f2ea52744c 100644
--- a/argilla-frontend/components/features/annotation/pagination/Pagination.vue
+++ b/argilla-frontend/components/features/annotation/pagination/Pagination.vue
@@ -6,7 +6,6 @@
       :disabled="isFirstPage"
       :aria-label="$t('shortcuts.pagination.go_to_previous_record')"
       :data-title="$t('shortcuts.pagination.go_to_previous_record')"
-      aria-controls="pagination"
       :aria-disabled="isFirstPage"
       @click="goToPrevPage"
     >
@@ -19,7 +18,6 @@
       :disabled="isLastPage"
       :aria-label="$t('shortcuts.pagination.go_to_next_record')"
       :data-title="$t('shortcuts.pagination.go_to_next_record')"
-      aria-controls="pagination"
       :aria-disabled="isLastPage"
       @click="goToNextPage"
     >
diff --git a/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounterSkeleton.vue b/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounterSkeleton.vue
index e2a325795f..638ec3d82c 100644
--- a/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounterSkeleton.vue
+++ b/argilla-frontend/components/features/annotation/progress/status-counter/StatusCounterSkeleton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-counter"></div>
+  <li class="status-counter"></li>
 </template>
 
 <style scoped lang="scss">
diff --git a/argilla-frontend/components/features/annotation/settings/SettingsFields.vue b/argilla-frontend/components/features/annotation/settings/SettingsFields.vue
index afcf41afe2..1f5019ed39 100644
--- a/argilla-frontend/components/features/annotation/settings/SettingsFields.vue
+++ b/argilla-frontend/components/features/annotation/settings/SettingsFields.vue
@@ -35,6 +35,7 @@
             v-if="field.isTextType || field.isChatType"
             class="settings__edition-form__switch"
             v-model="field.settings.use_markdown"
+            :name="$t('useMarkdown')"
             >{{ $t("useMarkdown") }}</BaseSwitch
           >
 
diff --git a/argilla-frontend/components/features/annotation/settings/SettingsMetadata.vue b/argilla-frontend/components/features/annotation/settings/SettingsMetadata.vue
index 638ecada75..ec955989f4 100644
--- a/argilla-frontend/components/features/annotation/settings/SettingsMetadata.vue
+++ b/argilla-frontend/components/features/annotation/settings/SettingsMetadata.vue
@@ -23,6 +23,7 @@
           <BaseSwitch
             class="settings__edition-form__switch"
             v-model="metadata.visibleForAnnotators"
+            :name="$t('visibleForAnnotators')"
             >{{ $t("visibleForAnnotators") }}</BaseSwitch
           >
 
diff --git a/argilla-frontend/components/features/annotation/settings/SettingsQuestions.vue b/argilla-frontend/components/features/annotation/settings/SettingsQuestions.vue
index 0591b92ecc..e339eafa87 100644
--- a/argilla-frontend/components/features/annotation/settings/SettingsQuestions.vue
+++ b/argilla-frontend/components/features/annotation/settings/SettingsQuestions.vue
@@ -60,6 +60,7 @@
                 class="settings__edition-form__switch --subcategory"
                 :id="`options-order-${question.id}`"
                 v-model="question.settings.suggestionFirst"
+                :name="$t('suggestionFirst')"
                 >{{ $t("suggestionFirst") }}</BaseSwitch
               >
 
diff --git a/argilla-frontend/components/features/annotation/settings/TopDatasetSettingsFeedbackTask.vue b/argilla-frontend/components/features/annotation/settings/TopDatasetSettingsFeedbackTask.vue
index f891c54dff..cb96811ab4 100644
--- a/argilla-frontend/components/features/annotation/settings/TopDatasetSettingsFeedbackTask.vue
+++ b/argilla-frontend/components/features/annotation/settings/TopDatasetSettingsFeedbackTask.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="top-content" :class="separator ? '--separator' : null">
-    <h1 v-text="$t('settings.title')" />
+    <h1 class="--heading2" v-text="$t('settings.title')" />
     <base-button @click="$emit('goToDataset')" class="secondary text">
       <svgicon name="chevron-left" width="10" height="10" />
       {{ $t("settings.seeYourDataset") }}
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfiguration.vue b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfiguration.vue
index 09b9a4e0d6..acfc9ff880 100644
--- a/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfiguration.vue
+++ b/argilla-frontend/components/features/dataset-creation/configuration/DatasetConfiguration.vue
@@ -59,6 +59,7 @@
             <div class="dataset-config__preview">
               <iframe
                 v-if="!!dataset.repoId"
+                :title="$t('preview')"
                 :src="`https://huggingface.co/datasets/${dataset.repoId}/embed/viewer/ParaphraseRC/train`"
                 frameborder="0"
                 width="100%"

From a755203a7ef19aa56a827710c2d8cdcbea5633ea Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Fri, 20 Dec 2024 13:29:02 +0100
Subject: [PATCH 3/6] improve dataset configurator accessibility

---
 .../questions/DatasetConfigurationAddQuestion.vue         | 6 ++++--
 .../questions/DatasetConfigurationQuestion.vue            | 3 ++-
 .../configuration/shared/DatasetConfigurationCard.vue     | 3 ++-
 .../shared/DatasetConfigurationChipsSelector.vue          | 8 +++++++-
 argilla-frontend/translation/de.js                        | 2 ++
 argilla-frontend/translation/en.js                        | 2 ++
 argilla-frontend/translation/es.js                        | 2 ++
 7 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationAddQuestion.vue b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationAddQuestion.vue
index 84d1234e7b..ac9832deb0 100644
--- a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationAddQuestion.vue
+++ b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationAddQuestion.vue
@@ -6,9 +6,11 @@
     v-if="options.length"
   >
     <template slot="dropdown-header">
-      <BaseButton class="add-question-selector__button"
+      <BaseButton
+        class="add-question-selector__button"
+        :aria-label="$t('config.addQuestion')"
         ><span class="add-question-selector__button-icon"
-          ><svgicon name="plus" /></span
+          ><svgicon name="plus" aria-hidden="true" /></span
       ></BaseButton>
     </template>
     <template slot="dropdown-content">
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue
index f51f44b079..dd3f051577 100644
--- a/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue
+++ b/argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue
@@ -8,9 +8,10 @@
   >
     <BaseButton
       class="config-card__remove"
+      :aria-label="$t('config.removeQuestion')"
       @click="remove"
       v-if="removeIsAllowed"
-      ><svgicon name="close"
+      ><svgicon name="close" aria-hidden="true"
     /></BaseButton>
 
     <template v-if="noMapping">
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationCard.vue b/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationCard.vue
index 6db7c5cd92..2a229891dd 100644
--- a/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationCard.vue
+++ b/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationCard.vue
@@ -8,6 +8,7 @@
             width="6"
             name="draggable"
             color="var(--bg-opacity-20)"
+            aria-hidden="true"
           />{{ item.name }}
           <span v-if="item.primitiveType" class="config-card__primitive-type">{{
             item.primitiveType
@@ -104,7 +105,7 @@ $no-mapping-color: hsl(0, 0%, 50%);
   &__icon {
     position: absolute;
     left: 6px;
-    top: 19px;
+    top: 18px;
     opacity: 0;
   }
   &__primitive-type {
diff --git a/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationChipsSelector.vue b/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationChipsSelector.vue
index 780304ddd1..b007e27e9c 100644
--- a/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationChipsSelector.vue
+++ b/argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationChipsSelector.vue
@@ -1,6 +1,12 @@
 <template>
-  <ul class="chip-selector__options">
+  <ul
+    class="chip-selector__options"
+    role="listbox"
+    aria-multiselectable="false"
+    :aria-label="id"
+  >
     <li
+      role="option"
       class="chip-selector__option"
       v-for="option in options"
       :key="`${id}-${option.value}`"
diff --git a/argilla-frontend/translation/de.js b/argilla-frontend/translation/de.js
index 59ab61eaec..7efedac452 100644
--- a/argilla-frontend/translation/de.js
+++ b/argilla-frontend/translation/de.js
@@ -343,6 +343,8 @@ export default {
     exportingWarning: "Das kann ein paar Sekunden dauern",
   },
   config: {
+    addQuestion: "Frage hinzufügen",
+    removeQuestion: "Frage entfernen",
     field: {
       text: "Textfeld",
       chat: "Chatfeld",
diff --git a/argilla-frontend/translation/en.js b/argilla-frontend/translation/en.js
index d56c1368f6..448c6f5cc3 100644
--- a/argilla-frontend/translation/en.js
+++ b/argilla-frontend/translation/en.js
@@ -344,6 +344,8 @@ export default {
     exportingWarning: "This might take a few seconds",
   },
   config: {
+    addQuestion: "Add question",
+    removeQuestion: "Remove question",
     field: {
       text: "Text field",
       chat: "Chat field",
diff --git a/argilla-frontend/translation/es.js b/argilla-frontend/translation/es.js
index 38dfd1909f..f6192f80f7 100644
--- a/argilla-frontend/translation/es.js
+++ b/argilla-frontend/translation/es.js
@@ -347,6 +347,8 @@ export default {
     exportingWarning: "Esto puede tardar unos segundos",
   },
   config: {
+    addQuestion: "Añadir pregunta",
+    removeQuestion: "Eliminar pregunta",
     field: {
       text: "Campo de texto",
       chat: "Campo de chat",

From 335a17ca6652d3763757a8ebe25cf0c4456917ad Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Fri, 20 Dec 2024 13:41:54 +0100
Subject: [PATCH 4/6] fix lint

---
 .../container/questions/form/text-area/TextArea.component.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextArea.component.vue b/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextArea.component.vue
index c0dff1ea36..2b521a397a 100644
--- a/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextArea.component.vue
+++ b/argilla-frontend/components/features/annotation/container/questions/form/text-area/TextArea.component.vue
@@ -54,7 +54,9 @@ export default {
             : "",
           tooltipText: this.isSuggested ? this.suggestedAgent : "",
           component: "TextAreaContents",
-          label: this.isSuggested ? this.$nuxt.$t("suggestion.name") : this.$nuxt.$t("questions_form.write")
+          label: this.isSuggested
+            ? this.$nuxt.$t("suggestion.name")
+            : this.$nuxt.$t("questions_form.write"),
         },
         ...(!this.isSuggested
           ? [

From 6f4ff3a47d20c731be731a1151f80ee8878ecda8 Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Wed, 8 Jan 2025 10:00:09 +0100
Subject: [PATCH 5/6] add native event

---
 .../annotation/header/header-bar/HeaderFeedbackTask.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue b/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue
index 360d54db66..9b704c7027 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue
+++ b/argilla-frontend/components/features/annotation/header/header-bar/HeaderFeedbackTask.vue
@@ -7,7 +7,7 @@
       @breadcrumb-action="$emit('breadcrumb-action', $event)"
     />
     <template v-if="datasetId && showSettingButton">
-      <DatasetSettingsIconFeedbackTask @click="goToSetting(datasetId)" />
+      <DatasetSettingsIconFeedbackTask @click.native="goToSetting(datasetId)" />
     </template>
     <div class="topbar--left">
       <slot name="badge"></slot>

From 6052448bb44dc0460f0035ba0dd300b2237e8a30 Mon Sep 17 00:00:00 2001
From: Leire Aguirre <leire@argilla.io>
Date: Wed, 8 Jan 2025 16:36:18 +0100
Subject: [PATCH 6/6] hide user badge in user settings

---
 .../features/user-settings/UserSettingsContent.vue        | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/argilla-frontend/components/features/user-settings/UserSettingsContent.vue b/argilla-frontend/components/features/user-settings/UserSettingsContent.vue
index 424cd25f27..b782873534 100644
--- a/argilla-frontend/components/features/user-settings/UserSettingsContent.vue
+++ b/argilla-frontend/components/features/user-settings/UserSettingsContent.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="edition-user-info">
     <div class="form-group circle-and-role">
-      <span v-circle="{ size: 'MEDIUM' }">
+      <span aria-hidden="true" v-circle="{ size: 'MEDIUM' }">
         {{ user.avatar }}
       </span>
-      <BaseBadge class="--capitalized" :text="user.role" />
+      <BaseBadge
+        :aria-label="`role: ${user.role}`"
+        class="--capitalized"
+        :text="user.role"
+      />
     </div>
 
     <div class="form-group">