Dataset creation feature final QA

argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue

@@ -2,9 +2,9 @@
   <div
     class="panel"
     :class="[
-    !isExpanded ? '--collapsed' : undefined,
-    hideOnDesktop ? '--mobile' : undefined,
-  ]"
+      !isExpanded ? '--collapsed' : undefined,
+      hideOnDesktop ? '--mobile' : undefined,
+    ]"
   >
     <BaseButton
       class="panel__header"

argilla-frontend/components/base/base-progress/BaseLinearProgress.vue

@@ -19,7 +19,7 @@
           @mouseenter="hoveredRange = range"
           @mouseleave="hoveredRange = null"
         >
-        <div class="progress__bar" :style="{ background: range.color }"></div>
+          <div class="progress__bar" :style="{ background: range.color }"></div>
         </div>
       </div>
       <template v-if="showTooltip && !!hoveredRange">

argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue

@@ -17,7 +17,13 @@
 
 <template>
   <base-input-container class="search-area" :class="filter ? 'active' : null">
-    <svgicon name="search" width="20" height="20" color="#acacac" aria-hidden="true" />
+    <svgicon
+      name="search"
+      width="20"
+      height="20"
+      color="#acacac"
+      aria-hidden="true"
+    />
     <base-input
       class="search-area__input"
       role="search"

argilla-frontend/components/base/base-separator/BaseSeparator.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .separator {
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--bg-opacity-10);
   width: 100%;
 }
 </style>

argilla-frontend/components/base/base-table/BaseTableInfo.vue

@@ -19,7 +19,11 @@
     <div class="table-info" role="table">
       <div class="table-info__header">
         <slot name="columns">
-          <div class="table-info__item" role="columnheader" aria-label="Table Header">
+          <div
+            class="table-info__item"
+            role="columnheader"
+            aria-label="Table Header"
+          >
             <div
               v-for="(column, key) in columns"
               :key="key"
@@ -43,7 +47,12 @@
                 :aria-label="'Sort by ' + column.name"
                 :aria-sort="sortOrder === 'asc' ? 'descending' : 'ascending'"
               >
-                <svgicon width="18" height="18" name="sort" aria-hidden="true"/>
+                <svgicon
+                  width="18"
+                  height="18"
+                  name="sort"
+                  aria-hidden="true"
+                />
                 <span>{{ column.name }}</span>
               </button>
               <button v-else :data-title="column.tooltip">
@@ -57,7 +66,13 @@
       <template v-else>
         <div class="table-info__body" ref="table" aria-label="Table Body">
           <ul role="rowgroup">
-            <li v-for="item in filteredResults" :key="item.id" :id="item.id" role="row" :aria-label="'Row for ' + item.id">
+            <li
+              v-for="item in filteredResults"
+              :key="item.id"
+              :id="item.id"
+              role="row"
+              :aria-label="'Row for ' + item.id"
+            >
               <nuxt-link :to="rowLink(item)" class="table-info__item">
                 <span
                   v-for="(column, idx) in columns"
@@ -66,7 +81,11 @@
                   role="cell"
                 >
                   <span :class="column.class">
-                    <span v-if="column.actions" role="group" aria-label="Row actions">
+                    <span
+                      v-if="column.actions"
+                      role="group"
+                      aria-label="Row actions"
+                    >
                       <div class="table-info__actions">
                         <p
                           class="table-info__main"
@@ -111,7 +130,7 @@
                     <nuxt-link v-else-if="column.link" :to="column.link(item)">
                       {{ itemValue(item, column) }}
                     </nuxt-link>
-                    <span v-else >{{ itemValue(item, column) }}</span>
+                    <span v-else>{{ itemValue(item, column) }}</span>
                     <span v-if="column.component">
                       <component
                         :aria-label="column.component.name"

argilla-frontend/components/base/base-table/TableFiltrableColumn.vue

@@ -5,7 +5,7 @@
       @click="openFilter(column)"
       :class="[visibleFilter || selectedOptions.length ? 'active' : '']"
     >
-      <svgicon name="filter" width="16" aria-hidden="true"/>
+      <svgicon name="filter" width="16" aria-hidden="true" />
       {{ column.name }}
     </button>
     <div class="table__filter" v-click-outside="close" v-if="visibleFilter">

argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue

@@ -17,7 +17,7 @@
 
 <template>
   <div class="topbar" role="banner" aria-label="Top navigation bar">
-    <brand-icon class="brand-icon" color="white" aria-label="Argilla icon"/>
+    <brand-icon class="brand-icon" color="white" aria-label="Argilla icon" />
     <slot />
   </div>
 </template>

argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue

@@ -8,8 +8,12 @@
       <template slot="dropdown-header">
         <BaseButton
           class="record-menu__header"
-          :aria-label="(dropdownIsVisible? 'Collapse' : 'Expand') + ' Record Dropdown for Extra Information'">
-          <svgicon name="kebab" width="20" height="20" aria-hidden="true"/>
+          :aria-label="
+            (dropdownIsVisible ? 'Collapse' : 'Expand') +
+            ' Record Dropdown for Extra Information'
+          "
+        >
+          <svgicon name="kebab" width="20" height="20" aria-hidden="true" />
         </BaseButton>
       </template>
       <template slot="dropdown-content">

argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue

@@ -7,7 +7,11 @@
     aria-label="Data Record Field"
   >
     <div class="title-area --body2">
-      <span class="text_field_component__title-content" v-text="title" :aria-label="'Field Name: ' + title" />
+      <span
+        class="text_field_component__title-content"
+        v-text="title"
+        :aria-label="'Field Name: ' + title"
+      />
       <BaseActionTooltip
         class="text_field_component__tooltip"
         :tooltip="$t('copied')"
@@ -20,11 +24,21 @@
           @click.prevent="$copyToClipboard(fieldText)"
           role="button"
         >
-          <svgicon color="#acacac" name="copy" width="18" height="18" aria-hidden="true"/>
+          <svgicon
+            color="#acacac"
+            name="copy"
+            width="18"
+            height="18"
+            aria-hidden="true"
+          />
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div id="fields-content" class="text_field_component__area --body1" :aria-label="'Data entry for Field: ' + title" >
+    <div
+      id="fields-content"
+      class="text_field_component__area --body1"
+      :aria-label="'Data entry for Field: ' + title"
+    >
       <p
         :class="[
           allowOverlapping

argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue

@@ -1,7 +1,16 @@
 <template>
   <div>
-    <p v-if="legend" class="questions__title --body3 --light" v-text="legend" :aria-label="legend" />
-    <div class="questions" role="list" aria-label="List of annotation questions">
+    <p
+      v-if="legend"
+      class="questions__title --body3 --light"
+      v-text="legend"
+      :aria-label="legend"
+    />
+    <div
+      class="questions"
+      role="list"
+      aria-label="List of annotation questions"
+    >
       <div
         v-for="(question, index) in questions"
         :key="question.id"

argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue

@@ -24,7 +24,12 @@
           :text="getSuggestedAgent(item)"
           minimalist
         >
-          <svgicon width="6" name="draggable" :id="`${item.value}-icon`" aria-label="Dragging Icon"/>
+          <svgicon
+            width="6"
+            name="draggable"
+            :id="`${item.value}-icon`"
+            aria-label="Dragging Icon"
+          />
           <span
             class="draggable__rank-card__title"
             v-text="item.text"

argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="wrapper">
     <QuestionHeaderComponent :question="question" />
-    <div class="question__warning" v-if="warningMessage" role="status" aria-live="polite">
-      <svgicon name="danger" width="16" height="16" aria-hidden="true"/>
+    <div
+      class="question__warning"
+      v-if="warningMessage"
+      role="status"
+      aria-live="polite"
+    >
+      <svgicon name="danger" width="16" height="16" aria-hidden="true" />
       <span v-text="warningMessage" />
     </div>
     <EntityLabelSelectionComponent

argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue

@@ -15,7 +15,7 @@
           width="20"
           height="20"
           name="change-height"
-          aria-hidden="true"/></BaseButton
+          aria-hidden="true" /></BaseButton
     ></template>
     <template slot="dropdown-content">
       <div class="view-config__content">

argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue

@@ -25,7 +25,12 @@
           :data-title="$t('status')"
         >
           {{ currentOptionName }}
-          <svgicon name="chevron-down" width="8" height="8" aria-hidden="true"/>
+          <svgicon
+            name="chevron-down"
+            width="8"
+            height="8"
+            aria-hidden="true"
+          />
         </BaseButton>
       </span>
       <span slot="dropdown-content">

argilla-frontend/components/features/annotation/header/filters/FilterButton.vue

@@ -1,6 +1,12 @@
 <template>
   <div :class="isButtonActive ? 'filter-button--active' : 'filter-button'">
-    <svgicon v-if="iconName" :name="iconName" width="16" height="16" aria-hidden="true" />
+    <svgicon
+      v-if="iconName"
+      :name="iconName"
+      width="16"
+      height="16"
+      aria-hidden="true"
+    />
     <BaseButton class="filter-button__button">{{ buttonName }}</BaseButton>
     <slot></slot>
     <svgicon

argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue

@@ -34,7 +34,12 @@
             @click="selectMetadataCategory(null)"
           >
             <span v-text="visibleCategory.title" />
-            <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
+            <svgicon
+              name="chevron-left"
+              width="12"
+              height="12"
+              aria-hidden="true"
+            />
           </div>
           <div class="metadata-filter__content">
             <LabelsSelector

argilla-frontend/components/features/annotation/header/responses-filter/ResponsesFilter.vue

@@ -27,7 +27,12 @@
         <template v-else>
           <div class="responses-filter__header" @click="selectResponse(null)">
             <span v-text="selectedResponse.name" />
-            <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
+            <svgicon
+              name="chevron-left"
+              width="12"
+              height="12"
+              aria-hidden="true"
+            />
           </div>
           <div class="responses-filter__content">
             <LabelsSelector

argilla-frontend/components/features/annotation/header/search-bar-filter/SearchBarFilter.vue

@@ -25,7 +25,7 @@
       class="search-area__icon --search"
       :data-title="$t('search')"
     >
-      <svgicon name="search" width="16" height="16" aria-hidden="true"/>
+      <svgicon name="search" width="16" height="16" aria-hidden="true" />
     </BaseButton>
     <input
       ref="searchRef"
@@ -58,7 +58,7 @@
           <span class="search-area__fields__header__text">{{
             selectedField.title
           }}</span>
-          <svgicon name="chevron-down" height="8" aria-hidden="true"/>
+          <svgicon name="chevron-down" height="8" aria-hidden="true" />
         </span>
       </template>
       <template slot="dropdown-content">

argilla-frontend/components/features/annotation/header/sort-filter/SortSelectorItem.vue

@@ -36,7 +36,10 @@
         width="16"
         height="16"
         :name="category.sort === 'asc' ? 'arrow-up' : 'arrow-down'"
-        :aria-label="'Change sort direction to ' + (category.sort === 'asc' ? 'up' : 'down')"
+        :aria-label="
+          'Change sort direction to ' +
+          (category.sort === 'asc' ? 'up' : 'down')
+        "
       />
     </BaseButton>
     <BaseButton

argilla-frontend/components/features/annotation/header/suggestion-filter/SuggestionFilter.vue

@@ -31,7 +31,12 @@
             @click="selectSuggestion(null)"
           >
             <span v-text="selectedSuggestion.name" />
-            <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
+            <svgicon
+              name="chevron-left"
+              width="12"
+              height="12"
+              aria-hidden="true"
+            />
           </div>
           <div>
             <CategoriesSelector

argilla-frontend/components/features/annotation/pagination/Pagination.vue

@@ -10,7 +10,7 @@
       :aria-disabled="isFirstPage"
       @click="goToPrevPage"
     >
-      <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
+      <svgicon name="chevron-left" width="12" height="12" aria-hidden="true" />
     </BaseButton>
 
     <BaseButton