Merge branch 'develop' into refactor/remove-check_same_thread_parameter

README.md

@@ -77,14 +77,14 @@ We are an open-source community-driven project and we love to hear from you. Her
 The community uses Argilla to create amazing open-source [datasets](https://huggingface.co/datasets?library=library:argilla&sort=trending) and [models](https://huggingface.co/models?other=distilabel).
 
 - [Cleaned UltraFeedback dataset](https://huggingface.co/datasets/argilla/ultrafeedback-binarized-preferences-cleaned) used to fine-tune the [Notus](https://huggingface.co/argilla/notus-7b-v1) and [Notux](https://huggingface.co/argilla/notux-8x7b-v1) models. The original UltraFeedback dataset was curated using Argilla UI filters to find and report a bug in the original data generation code. Based on this data curation process, Argilla built this new version of the UltraFeedback dataset and fine-tuned Notus, outperforming Zephyr on several benchmarks.
-- [distilabeled Intel Orca DPO dataset](https://huggingface.co/datasets/argilla/distilabel-intel-orca-dpo-pairs) used to fine-tune the [improved OpenHermes model](https://huggingface.co/argilla/distilabeled-OpenHermes-2.5-Mistral-7B). This dataset was built by combining human curation in Argilla with AI feedback from distilabel, leading to an improved version of the Intel Orca dataset and outperforming models fine-tuned on the original dataset.
+- [distilabel Intel Orca DPO dataset](https://huggingface.co/datasets/argilla/distilabel-intel-orca-dpo-pairs) used to fine-tune the [improved OpenHermes model](https://huggingface.co/argilla/distilabeled-OpenHermes-2.5-Mistral-7B). This dataset was built by combining human curation in Argilla with AI feedback from distilabel, leading to an improved version of the Intel Orca dataset and outperforming models fine-tuned on the original dataset.
 
 ### Examples Use cases
 
-AI teams from companies like [the Red Cross](https://510.global/), [Loris.ai](https://loris.ai/) and [Prolific](https://www.prolific.com/) use Argilla to improve the quality and efficiency of AI projects. They shared their experiences in our [AI community meetup](https://lu.ma/embed-checkout/evt-IQtRiSuXZCIW6FB).
+AI teams from organizations such as the [Red Cross](https://510.global/), [Loris.ai](https://loris.ai/) and [Prolific](https://www.prolific.com/) use Argilla to improve the quality and efficiency of AI projects. They shared their experiences in our [AI community meetup](https://lu.ma/embed-checkout/evt-IQtRiSuXZCIW6FB).
 
 - AI for good: [the Red Cross presentation](https://youtu.be/ZsCqrAhzkFU?feature=shared) showcases how the Red Cross domain experts and AI team collaborated by classifying and redirecting requests from refugees of the Ukrainian crisis to streamline the support processes of the Red Cross.
-- Customer support: during [the Loris meetup](https://youtu.be/jWrtgf2w4VU?feature=shared) they showed how their AI team uses unsupervised and few-shot contrastive learning to help them quickly validate and gain labelled samples for a huge amount of multi-label classifiers.
+- Customer support: during [the Loris meetup](https://youtu.be/jWrtgf2w4VU?feature=shared) they showed how their AI team uses unsupervised and few-shot contrastive learning to help them quickly validate and gain labeled samples for a huge amount of multi-label classifiers.
 - Research studies: [the showcase from Prolific](https://youtu.be/ePDlhIxnuAs?feature=shared) announced their integration with our platform. They use it to actively distribute data collection projects among their annotating workforce. This allows Prolific to quickly and efficiently collect high-quality data for research studies.
 
 ## 👨‍💻 Getting started

argilla-frontend/CHANGELOG.md

@@ -16,11 +16,15 @@ These are the section headers that we use:
 
 ## [Unreleased]()
 
+### Added
+- Add a high-contrast theme & improvements for the forced-colors mode ([#5661](https://github.com/argilla-io/argilla/pull/5661))
+
 ## [2.4.0](https://github.com/argilla-io/argilla/compare/v2.3.0...v2.4.0)
 
 ### Added
 
 - Added new dataset configurator to import datasets from Hugging Face using Argilla UI. ([#5532](https://github.com/argilla-io/argilla/pull/5532))
+- Improve Accessibility for Screenreaders ([#5634](https://github.com/argilla-io/argilla/pull/5634))
 
 ### Fixed
 

argilla-frontend/assets/icons/high-contrast-theme.js

@@ -0,0 +1,36 @@
+/*
+ * Taken from https://icons.getbootstrap.com/icons/universal-access/
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2019-2024 The Bootstrap Authors
+
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  //
+  'high-contrast-theme': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M6 5.5l-4.535-.442A.531.531 0 0 1 1.531 4H14.47a.531.531 0 0 1 .066 1.058L10 5.5V9l.452 6.42a.535.535 0 0 1-1.053.174L8.243 9.97c-.064-.252-.422-.252-.486 0l-1.156 5.624a.535.535 0 0 1-1.053-.174L6 9z" />'
+  }
+})

argilla-frontend/assets/icons/index.js

@@ -24,6 +24,7 @@ require('./external')
 require('./filter')
 require('./focus-mode')
 require('./hand-labeling')
+require('./high-contrast-theme')
 require('./import')
 require('./info')
 require('./kebab')

argilla-frontend/assets/scss/abstract/variables/_themes.scss

@@ -5,6 +5,8 @@
   --color-brand: hsl(3, 100%, 69%);
   --color-brand-secondary: hsl(19, 85%, 81%);
   --color-danger: var(--color-brand);
+  --color-avatar-fg: var(--color-white);
+  --color-avatar-bg: var(--color-brand);
   --color-warning: hsl(18, 98%, 68%);
   --color-success: hsl(88, 74%, 36%);
   --color-info: hsl(0, 0%, 90%);
@@ -78,7 +80,7 @@
   --bg-banner-error: hsl(3, 100%, 92%);
   --bg-tooltip: var(--color-dark-grey);
   --bg-config-card: hsl(227, 100%, 90%);
-  --bg-congig-alert: hsl(41, 100%, 82%, 0.8);
+  --bg-config-alert: hsl(41, 100%, 82%, 0.8);
   --fg-chat-1: #488d81;
   --fg-chat-2: #e07be0;
   --fg-chat-3: #fd926a;
@@ -151,7 +153,7 @@
   --bg-banner-error: hsl(3, 100%, 20%);
   --bg-tooltip: hsl(207, 9%, 32%);
   --bg-config-card: hsla(227, 100%, 66%, 20%);
-  --bg-congig-alert: hsl(41, 100%, 82%, 0.4);
+  --bg-config-alert: hsl(41, 100%, 82%, 0.4);
   --fg-chat-1: #628e87;
   --fg-chat-2: #af6daf;
   --fg-chat-3: #cd8065;
@@ -166,3 +168,94 @@
 [data-theme="dark"] {
   color-scheme: dark;
 }
+
+[data-theme="high-contrast"] {
+  --color-black: hsla(0, 0%, 0%, 100%);
+  --color-brand: hsl(3, 99%, 28%);
+  --color-brand-secondary: hsl(19, 85%, 81%);
+  --color-danger: var(--color-brand);
+  --color-avatar-fg: var(--color-black);
+  --color-avatar-bg: var(--color-white);
+  --color-warning: hsl(18, 100%, 50%);
+  --color-success: hsl(88, 100%, 31%);
+  --color-info: hsl(0, 0%, 90%);
+  --bg-action: hsl(227, 100%, 40%);
+  --bg-action-accent: hsl(227, 98%, 25%);
+  --bg-black: hsla(0, 0%, 0%, 0.87);
+  --bg-solid-grey-1: hsl(0, 0%, 98%);
+  --bg-solid-grey-2: hsl(0, 0%, 96%);
+  --bg-solid-grey-3: hsl(0, 0%, 90%);
+  --bg-accent-grey-1: hsl(0, 0%, 100%);
+  --bg-accent-grey-2: hsl(0, 0%, 100%);
+  --bg-accent-grey-3: hsl(0, 0%, 98%);
+  --bg-accent-grey-4: hsl(0, 0%, 98%);
+  --bg-accent-grey-5: hsl(0, 0%, 100%);
+  --bg-opacity-1: hsla(0, 0%, 0%, 0.01);
+  --bg-opacity-2: hsla(0, 0%, 0%, 0.02);
+  --bg-opacity-3: hsla(0, 0%, 0%, 0.03);
+  --bg-opacity-4: hsla(0, 0%, 0%, 0.04);
+  --bg-opacity-6: hsla(0, 0%, 0%, 0.06);
+  --bg-opacity-10: hsla(0, 0%, 0%, 0.1);
+  --bg-opacity-20: hsla(0, 0%, 0%, 0.2);
+  --bg-opacity-37: hsla(0, 0%, 0%, 0.87);
+  --bg-opacity-54: hsla(0, 0%, 0%, 0.87);
+  --bg-opacity-87: hsla(0, 0%, 0%, 0.87);
+  --fg-lighter: hsl(0, 0%, 100%);
+  --fg-primary: hsla(0, 0%, 0%, 0.87);
+  --fg-secondary: hsla(0, 0%, 10%, 0.87);
+  --fg-tertiary: hsla(10, 10%, 10%, 0.87);
+  --fg-cuaternary: hsl(227, 96%, 39%);
+  --fg-status-pending: hsl(0, 100%, 30%);
+  --fg-status-draft: hsl(143, 100%, 20%);
+  --bg-status-draft: hsl(125, 63%, 82%);
+  --bg-status-draft-accent: hsl(128, 63%, 84%);
+  --fg-status-discarded: rgb(0, 0, 0);
+  --bg-status-discarded: hsla(0, 5%, 87%);
+  --bg-status-discarded-accent: hsla(0, 5%, 83%);
+  --fg-status-submitted: hsl(227, 100%, 39%);
+  --bg-status-submitted: hsl(227, 100%, 85%);
+  --bg-status-submitted-accent: hsl(227, 100%, 82%);
+  --fg-filter-badge: hsl(239, 36%, 47%);
+  --fg-filter-badge-accent: hsl(239, 100%, 39%);
+  --bg-filter-badge: hsl(240, 100%, 92%);
+  --bg-filter-badge-accent: hsl(240, 100%, 90%);
+  --fg-label: var(--color-black);
+  --fg-label-2: var(--color-black);
+  --bg-label: var(--color-black);
+  --bg-label-unselected: hsl(0, 0%, 96%);
+  --bg-label-unselected-hover: hsla(0, 0%, 0%, 0.06);
+  --bg-field: linear-gradient(45deg, var(--bg-opacity-2), var(--bg-opacity-1));
+  --border-field: hsl(0, 0%, 94%);
+  --bg-bubble: linear-gradient(45deg, var(--bg-opacity-3), var(--bg-opacity-1));
+  --bg-bubble-inverse: linear-gradient(
+    45deg,
+    var(--bg-opacity-1),
+    var(--bg-opacity-3)
+  );
+  --bg-form: hsl(0, 0%, 100%);
+  --bg-form-button-area: hsl(228, 50%, 96%);
+  --fg-shortcut-key: hsla(0, 0%, 0%, 0.2);
+  --bg-similarity: hsl(2, 100%, 94%);
+  --fg-similarity: hsl(3, 100%, 50%);
+  --fg-highlight: hsl(3, 100%, 49%);
+  --bg-auth: hsl(18, 57%, 91%);
+  --bg-auth-gradient: linear-gradient(
+    178.31deg,
+    #ffe5d9 1.36%,
+    #ffd1bc 109.14%
+  );
+  --bg-banner-info: hsl(0, 0%, 90%);
+  --bg-banner-warning: hsl(47, 83%, 91%);
+  --bg-banner-error: hsl(3, 100%, 92%);
+  --bg-tooltip: var(--color-dark-grey);
+  --bg-config-card: hsl(0, 0%, 100%);
+  --bg-config-alert: hsl(0, 0%, 100%);
+  --fg-chat-1: #198700;
+  --fg-chat-2: #933e00;
+  --fg-chat-3: #ae0000;
+  --fg-chat-4: #86008d;
+  --fg-chat-5: #002dd0;
+}
+[data-theme="high-contrast"] {
+  color-scheme: high-contrast;
+}

argilla-frontend/components/base/base-dropdown/BaseDropdown.vue

@@ -208,6 +208,7 @@ export default {
     box-shadow: $shadow;
     border-radius: $border-radius;
     background: var(--bg-accent-grey-2);
+    border: 1px solid var(--bg-opacity-1);
   }
   &--frozen-page {
     &:before {

argilla-frontend/components/base/base-feedback/base-feedback-error/BaseFeedbackError.component.vue

@@ -49,7 +49,7 @@ export default {
   gap: $base-space * 2;
   padding: $base-space;
   margin-right: auto;
-  background-color: rgba(255, 103, 95, 0.2);
+  background-color: var(--color-brand-secondary);
   border-radius: $border-radius;
 }
 
@@ -69,7 +69,7 @@ export default {
 
 .button {
   color: white;
-  background-color: rgba(255, 103, 95, 0.6);
+  background-color: var(--color-brand);
   border-radius: $border-radius;
   button {
     padding: 6px 12px;

argilla-frontend/components/base/base-radio-button/BaseRadioButton.vue

@@ -32,7 +32,7 @@ export default {
     disabled: Boolean,
     color: {
       type: String,
-      default: "#3e5cc9",
+      default: "var(--fg-status-submitted)",
     },
   },
   model: {

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

@@ -41,6 +41,7 @@ export default {
   padding-bottom: 0;
   padding-right: 1.2em;
   padding-left: $base-space * 2;
+  border: 1px solid var(--bg-opacity-1);
   a {
     text-decoration: none;
     @include media("<=tablet") {

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

@@ -84,6 +84,7 @@ export default {
     list-style: none;
     padding: $base-space;
     margin: 0;
+    border: 1px solid var(--bg-opacity-1);
     li {
       border-radius: $border-radius-s;
       transition: background-color 0.3s ease;

argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue

@@ -377,6 +377,7 @@ export default {
 }
 
 .button {
+  border: 1px solid var(--bg-opacity-1);
   &__shortcuts {
     display: inline-flex;
     align-items: center;

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

@@ -131,6 +131,7 @@ export default {
   padding-inline: $base-space;
   outline: none;
   background: var(--bg-label-unselected);
+  border: 1px solid var(--bg-opacity-1);
   color: var(--fg-label);
   font-weight: 500;
   overflow: hidden;
@@ -147,6 +148,9 @@ export default {
     color: var(--color-white);
     background: var(--bg-label);
     box-shadow: none;
+    @media (forced-colors: active) {
+      outline: 5px solid;
+    }
     &:hover {
       box-shadow: inset 0 -2px 6px 0 hsl(from var(--bg-label) h s l / 80%);
       background: hsl(from var(--bg-label) h s l / 80%);

argilla-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue

@@ -463,6 +463,9 @@ export default {
     color: white;
     background: var(--bg-label);
     box-shadow: none;
+    @media (forced-colors: active) {
+      outline: 5px solid;
+    }
     &:hover {
       box-shadow: inset 0 -2px 6px 0 hsl(from var(--bg-label) h s l / 80%);
       background: hsl(from var(--bg-label) h s l / 80%);

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

@@ -109,6 +109,9 @@ input[type="checkbox"] {
   [data-theme="dark"] & {
     background: hsl(from v-bind(optionDarkColor) h s l / 10%);
   }
+  [data-theme="high-contrast"] & {
+    color: var(--color-black);
+  }
   span {
     white-space: nowrap;
     overflow: hidden;
@@ -124,6 +127,9 @@ input[type="checkbox"] {
   &.label-active {
     background: v-bind(optionColor);
     color: var(--fg-primary);
+    @media (forced-colors: active) {
+      outline: 5px solid;
+    }
     [data-theme="dark"] & {
       background: v-bind(optionVeryDarkColor);
     }

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

@@ -12,6 +12,7 @@
       class="textarea--markdown"
       :markdown="question.answer.value"
       @click.native="onFocus"
+      role="textbox"
     />
     <ContentEditableFeedbackTask
       v-else

argilla-frontend/components/features/annotation/header/ToggleAnnotationType.vue

@@ -6,6 +6,7 @@
       @click="switchFocusMode()"
       aria-label="Switch to Focus Mode"
       :data-title="$t('focus_mode')"
+      :aria-selected="recordCriteria.page.isFocusMode"
     >
       <svgicon name="focus-mode" width="18" aria-hidden="true" />
     </button>
@@ -15,6 +16,7 @@
       :class="{ active: recordCriteria.page.isBulkMode }"
       @click="switchBulkMode()"
       :data-title="$t('bulk_mode')"
+      :aria-selected="recordCriteria.page.isBulkMode"
     >
       <svgicon name="bulk-mode" width="18" aria-hidden="true" />
     </button>

argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue

@@ -229,7 +229,7 @@ export default {
     &__intro {
       display: block;
       padding: 4px;
-      background: var(--bg-congig-alert);
+      background: var(--bg-config-alert);
       @include font-size(12px);
       @include line-height(16px);
     }

argilla-frontend/components/features/global/user/UserAvatarTooltip.vue

@@ -1,6 +1,7 @@
 <template>
   <div v-if="$auth.loggedIn" v-click-outside="close" class="user">
     <a
+      v-circle
       class="user__button"
       @click.prevent="showSelector"
       role="button"
@@ -11,7 +12,7 @@
     <div v-if="visibleSelector && user" class="user__content">
       <div class="head">
         <div class="left-head">
-          <span v-circle v-text="user.avatar" />
+          <span v-circle v-text="user.avatar" class="user__content__icon" />
         </div>
         <div class="right-head">
           <div class="item">
@@ -118,10 +119,10 @@ $buttonSize: 34px;
     user-select: none;
     cursor: pointer;
     @extend %circle;
-    background: var(--color-brand);
+    background: var(--color-avatar-bg);
     transform: scale3d(1, 1, 1) translateZ(0);
     transition: all 0.2s ease-in-out;
-    color: var(--color-white);
+    color: var(--color-avatar-fg);
     will-change: auto;
     &:hover {
       transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
@@ -137,6 +138,7 @@ $buttonSize: 34px;
     padding-top: $base-space * 2;
     background: var(--color-dark-grey);
     border-radius: $border-radius;
+    border: 1px solid var(--bg-opacity-1);
     @include font-size(14px);
     font-weight: 400;
     color: var(--color-white);
@@ -151,6 +153,10 @@ $buttonSize: 34px;
     a {
       text-decoration: none;
     }
+    &__icon {
+      background: var(--color-avatar-bg);
+      color: var(--color-avatar-fg);
+    }
   }
   &__link {
     user-select: none;

argilla-frontend/components/features/login/components/LoginInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="input-field">
     <Validation :validations="showValidations ? translatedValidations : []">
-      <label class="input-field__label" v-text="name" :for="name" />
+      <label class="input-field__label" :id="name" v-text="name" :for="name" />
       <span class="input-field__container">
         <input
           ref="input"