Improve accessibility for screen readers

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);

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>

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>

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"

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;

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"

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>

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"

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"

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;

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)

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)"

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>

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,13 +62,15 @@
           @change="onSelect(option)"
           @focus="onFocus"
           @keydown.tab="expandLabelsOnTab(index)"
+          :aria-labelledby="`label-${option.id}`"
         />
         <BaseTooltip
           :title="isSuggested(option) ? $t('suggestion.name') : ''"
           :text="getSuggestedAgent(option)"
           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",

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"

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"
     />

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" />

argilla-frontend/components/features/annotation/container/questions/form/text-area/TextArea.component.vue

@@ -54,6 +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"),
         },
         ...(!this.isSuggested
           ? [
@@ -65,6 +68,7 @@ export default {
                 tooltipTitle: this.$nuxt.$t("suggestion.name"),
                 tooltipText: this.suggestedAgent,
                 component: "TextAreaSuggestion",
+                label: this.$nuxt.$t("suggestion.name"),
               },
             ]
           : []),