Add a high-contrast theme & improvements for the forced-colors mode (#5661)

# Add a high-contrast theme & improvements for the forced-colors mode

- Invisible borders for key items to make them visible in forced colors
mode via `border: 1px solid var(--bg-opacity-1)`
- Set a button outline of 5px in forced colors to make selections
visible via `@media (forced-colors: active) `
- add a new high contrast theme to the theme.scss & to the settings menu
- all new colors in the new high-contrast theme should create enough
contrast for WCAG AAA
- replace some hard coded colors with the colors from the current theme
- add hexToCssHsl to the Color.ts and resolveCssVariable to the
RecordStatus.ts to use theme vars there too

The high contrast theme is currently basically the light theme with
stronger colors so that it complies with WCAG AAA

![high_contrast_theme](https://github.com/user-attachments/assets/2ba38c76-9982-452d-83f0-6190aa09f7d5)


In the forced color mode you can now see certain features that where not
visible before:

![forced_colors](https://github.com/user-attachments/assets/7648bcb6-9f21-40d6-96f1-5df68f6f37be)

Forced contrast mode depends on the implementation of the OS & browser
therefore the selected labels I cannot just highlight with a background
color and I did it with a thick border.

**Type of change**

- New feature (non-breaking change which adds functionality)

**How Has This Been Tested**
Local Build - Firefox Nightly + Chromium

**Checklist**
<!-- Please go over the list and make sure you've taken everything into
account -->

- I added relevant documentation
- I followed the style guidelines of this project
- I did a self-review of my code
- I made corresponding changes to the documentation
- I confirm My changes generate no new warnings
- I have added tests that prove my fix is effective or that my feature
works
- I have added relevant notes to the CHANGELOG.md file (See
https://keepachangelog.com/)

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: paulbauriegel

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%);
@@ -18,7 +20,6 @@
   --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);
@@ -77,8 +78,6 @@
   --bg-banner-warning: hsl(47, 83%, 91%);
   --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);
   --fg-chat-1: #488d81;
   --fg-chat-2: #e07be0;
   --fg-chat-3: #fd926a;
@@ -97,7 +96,6 @@
   --bg-accent-grey-2: hsl(214, 12%, 16%);
   --bg-accent-grey-3: hsl(214, 12%, 14%);
   --bg-accent-grey-4: hsl(214, 12%, 16%);
-  --bg-accent-grey-5: hsl(214, 12%, 20%);
   --bg-opacity-1: hsla(0, 0%, 100%, 0.01);
   --bg-opacity-2: hsla(0, 0%, 100%, 0.02);
   --bg-opacity-3: hsla(0, 0%, 100%, 0.03);
@@ -150,8 +148,6 @@
   --bg-banner-warning: hsl(47, 83%, 16%);
   --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);
   --fg-chat-1: #628e87;
   --fg-chat-2: #af6daf;
   --fg-chat-3: #cd8065;
@@ -166,3 +162,91 @@
 [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-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);
+  --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;