Merge pull request #465 from 1CRM/axe-tests-adjustments-3067

Theme Editor: The color set in the default theme must comply with acc…
1CRM · Dec 26, 2024 · 2c91549 · 2c91549
2 parents cbb7680 + 58a7bee
commit 2c91549
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/packages/oceanfront/src/fields/Select.ts b/packages/oceanfront/src/fields/Select.ts
@@ -258,8 +258,9 @@ export const OfSelectField = defineComponent({
               ],
               id: inputId.value,
               ref: elt,
-              tabindex: fieldCtx.mode === 'fixed' ? -1 : undefined,
-              ariaLabel: fieldCtx.ariaLabel ?? props.label,
+              tabindex: fieldCtx.mode === 'fixed' ? -1 : 0,
+              ariaLabel:
+                fieldCtx.ariaLabel ?? props.label ?? stateValue.value ?? ' ',
               ...hooks
             },
             labels

diff --git a/packages/oceanfront/src/formats/Url.ts b/packages/oceanfront/src/formats/Url.ts
@@ -68,6 +68,6 @@ export class UrlFormatter implements TextFormatter {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   formatFixed(modelValue: any): Renderable | undefined {
     const url = this.fixUrl(modelValue as string)
-    return h('a', { href: url, target: '_blank' }, url)
+    return url === '' ? '' : h('a', { href: url, target: '_blank' }, url)
   }
 }
diff --git a/packages/oceanfront/src/scss/_states.scss b/packages/oceanfront/src/scss/_states.scss
@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
 
 @mixin state-mixin($color, $bg, $border) {
   // box-shadow: none;
@@ -44,7 +44,11 @@
 @mixin state-mixin-grad($color, $bg, $border) {
   @include state-mixin(
     $color,
-    linear-gradient(to bottom, color.adjust($bg, $lightness: 2%) 15%, color.adjust($bg, $lightness: -2%) 85%),
+    linear-gradient(
+      to bottom,
+      color.adjust($bg, $lightness: 2%) 15%,
+      color.adjust($bg, $lightness: -2%) 85%
+    ),
     $border
   );
 }
@@ -92,7 +96,11 @@
 }
 
 .state-info {
-  @include state-mixin-grad(#469, #cfeaff, color.adjust(#cfeaff, $lightness: -16%));
+  @include state-mixin-grad(
+    #469,
+    #cfeaff,
+    color.adjust(#cfeaff, $lightness: -16%)
+  );
 }
 
 .state-draft {
@@ -108,7 +116,11 @@
 }
 
 .state-special {
-  @include state-mixin-grad(#fff6ff, #a7a, color.adjust(#a7a, $lightness: -12%));
+  @include state-mixin-grad(
+    #fff6ff,
+    #a7a,
+    color.adjust(#a7a, $lightness: -12%)
+  );
   @include state-event-mixin(#806633, #fff0d1, #c92);
 }
 
@@ -143,12 +155,12 @@
 
 .state-primary {
   @include state-mixin(var(--of-primary-tint), '', var(--of-primary-tint));
-  @include state-event-mixin(#687580, #e3f3ff, #7dc6ff);
+  @include state-event-mixin(#636f79, #e3f3ff, #7dc6ff);
 }
 
 .state-ignore {
   @include state-mixin-grad(#8a8987, rgba(246, 245, 244, 1), #c7c6c6);
-  @include state-event-mixin(#8a8987, #f6f5f4, #c7c6c6);
+  @include state-event-mixin(#6f6f6d, #f6f5f4, #c7c6c6);
 }
 
 .state-active {