refactor: Rename santoriniV2 feature flag to a11yImproveContrast (#18953

)
SAP · Jun 12, 2024 · 051406f · 051406f
1 parent 1ed8366
commit 051406f
Show file tree

Hide file tree

Showing 40 changed files with 91 additions and 78 deletions.
diff --git a/feature-libs/cart/base/styles/components/_item-counter.scss b/feature-libs/cart/base/styles/components/_item-counter.scss
@@ -30,7 +30,7 @@
     border: solid 1px var(--cx-color-light);
     display: inline-flex;
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       border: solid 1px var(--cx-color-dark);
     }
 
@@ -45,7 +45,7 @@
         background: var(--cx-color-background);
       }
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         border-color: var(--cx-color-dark);
         &:focus {
           background-color: var(--cx-color-transparent);
@@ -81,7 +81,7 @@
       color: var(--cx-color-light);
     }
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       font-size: var(--cx-font-size, 2rem);
       line-height: 0;
       color: var(--cx-color-text);

diff --git a/feature-libs/cart/base/styles/components/_mini-cart.scss b/feature-libs/cart/base/styles/components/_mini-cart.scss
@@ -28,7 +28,7 @@
       font-size: var(--cx-font-size, 1.188rem);
       font-weight: var(--cx-font-weight-bold);
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         @include type('3');
       }
     }

diff --git a/feature-libs/cart/quick-order/styles/_quick-order-form.scss b/feature-libs/cart/quick-order/styles/_quick-order-form.scss
@@ -28,7 +28,7 @@
       right: 6px;
       top: 4px;
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         color: var(--cx-color-secondary);
       }
     }

diff --git a/feature-libs/organization/administration/styles/_form.scss b/feature-libs/organization/administration/styles/_form.scss
@@ -48,7 +48,7 @@
         font-size: 16px;
         font-weight: normal;
 
-        @include forFeature('santoriniV2') {
+        @include forFeature('a11yImproveContrast') {
           @include type('6');
         }
       }

diff --git a/feature-libs/pickup-in-store/styles/_my-preferred-store.scss b/feature-libs/pickup-in-store/styles/_my-preferred-store.scss
@@ -27,7 +27,7 @@
       margin-bottom: 0;
       color: var(--cx-color-primary);
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         @include type('2');
       }
     }

diff --git a/integration-libs/s4om/styles/schedule-lines.scss b/integration-libs/s4om/styles/schedule-lines.scss
@@ -12,7 +12,7 @@ cx-schedule-lines {
     font-size: var(--cx-font-size, 1rem);
     padding-inline-end: 0.313rem;
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       @include type('7');
     }
   }

diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -257,9 +257,22 @@ export interface FeatureTogglesInterface {
   a11yCloseProductImageBtnFocus?: boolean;
 
   /**
-   * Enables the updated Santorini theme.
+   * Improve colour contrast in the demonstration theme Santorini
+   * to comply with accessibility standards. On activation, colour
+   * assignations for all UI elements will change and previous keyboard
+   * focus-ring gets replaced by a new bi-colour focus-ring.
+   *
+   * Note: If you're not using in your app the `StorefrontComponent`
+   *       (`<cx-storefront>`) from Spartacus, then you'll need to also add
+   *       the following line to the constructor of your app's root component:
+   *
+   * ```
+   * constructor() {
+   *   useFeatureStyles('a11yImproveContrast');
+   * }
+   * ```
    */
-  santoriniV2?: boolean;
+  a11yImproveContrast?: boolean;
 
   /**
    * Moves input elements of 'NotificationPreferenceComponent' into a fieldset.
@@ -330,8 +343,8 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yPreventSRFocusOnHiddenElements: false,
   a11yMyAccountLinkOutline: false,
   a11yCloseProductImageBtnFocus: false,
-  santoriniV2: false,
   a11yNotificationPreferenceFieldset: false,
+  a11yImproveContrast: false,
   a11yEmptyWishlistHeading: false,
   a11yUseButtonsForBtnLinks: false,
   a11yFacetsDialogFocusHandling: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -311,8 +311,8 @@ if (environment.estimatedDeliveryDate) {
         a11ySemanticPaginationLabel: true,
         a11yMyAccountLinkOutline: true,
         a11yCloseProductImageBtnFocus: true,
-        santoriniV2: true,
         a11yNotificationPreferenceFieldset: true,
+        a11yImproveContrast: true,
         a11yEmptyWishlistHeading: true,
         a11yUseButtonsForBtnLinks: true,
         a11yFacetsDialogFocusHandling: true,

diff --git a/projects/storefrontlib/layout/main/storefront.component.ts b/projects/storefrontlib/layout/main/storefront.component.ts
@@ -62,7 +62,7 @@ export class StorefrontComponent implements OnInit, OnDestroy {
     protected elementRef: ElementRef<HTMLElement>,
     protected keyboardFocusService: KeyboardFocusService
   ) {
-    useFeatureStyles('santoriniV2');
+    useFeatureStyles('a11yImproveContrast');
   }
 
   ngOnInit(): void {

diff --git a/projects/storefrontstyles/scss/components/content/banner/_banner.scss b/projects/storefrontstyles/scss/components/content/banner/_banner.scss
@@ -28,7 +28,7 @@
     }
   }
 
-  @include forFeature('santoriniV2') {
+  @include forFeature('a11yImproveContrast') {
     cx-media {
       color: black;
     }

diff --git a/projects/storefrontstyles/scss/components/content/media/_media.scss b/projects/storefrontstyles/scss/components/content/media/_media.scss
@@ -21,7 +21,7 @@
     url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" viewBox="0 0 515 515" xml:space="preserve"%3E%3Cstyle type="text/css"%3E.st0%7Bfill:%23FFFFFF;%7D.st1%7Bfill:%23D3D6DB;%7D%3C/style%3E%3Crect y="0" class="st0" width="515" height="515"/%3E%3Cpath class="st1" d="M352.6,198.7h-31.9v15.6h31.9V198.7z M279.3,293.6c-5.9,5.2-14.8,8.1-23,8.1c-22.2,0-39.3-17.8-39.3-40 c0-1.5,0-3.7,0-5.2L279.3,293.6z M296.3,261.7c0,2.2,0,5.2,0,5.9l-64.4-37.8c7.4-5.2,15.6-8.9,24.4-8.9 C278.6,221.7,296.3,240.2,296.3,261.7z M129.7,204.7v120c0,8.9,5.9,15.6,15.6,15.6h214.1l-65.9-37.8c-9.6,8.9-23,14.8-37.8,14.8 c-30.4,0-54.8-25.9-54.8-55.6c0-5.2,0-9.6,1.5-13.3L129.7,204.7z M115.6,170.6L406,341.7l5.2,2.2l-2.2,5.9l-2.2,2.2l-2.2,5.9 l-5.9-3.7L108.9,183.2l-5.9-3.7l3.7-5.2l1.5-2.2l3.7-5.9L115.6,170.6z M206.7,181.7l-1.5-9.6c-1.5-2.2-2.2-3.7-5.2-3.7h-15.6h-14.8 c-2.2,0-3.7,1.5-5.2,3.7l-2.2,9.6h-1.5h-11.9l68.1,40c9.6-9.6,24.4-15.6,39.3-15.6c31.9,0,55.6,25.2,55.6,55.6 c0,5.2-1.5,9.6-2.2,14.8l74.1,43.7V198.7c0-9.6-7.4-17-15.6-17h-15.6c-5.2-1.5-8.9-5.2-11.1-8.9l-2.2-3.7 c-3.7-5.9-11.9-11.1-18.5-11.1h-45.2c-7.4,0-15.6,5.2-19.3,11.1l-3.7,5.2c-2.2,2.2-5.9,5.9-9.6,7.4h-23h-11.1H206.7L206.7,181.7z"/%3E%3C/svg%3E');
   background-size: contain;
 
-  @include forFeature('santoriniV2') {
+  @include forFeature('a11yImproveContrast') {
     background: no-repeat top center
       url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" viewBox="0 0 515 515" xml:space="preserve"%3E%3Cstyle type="text/css"%3E.st0%7Bfill:%23FFFFFF;%7D.st1%7Bfill:%2377818B;%7D%3C/style%3E%3Crect y="0" class="st0" width="515" height="515"/%3E%3Cpath class="st1" d="M352.6,198.7h-31.9v15.6h31.9V198.7z M279.3,293.6c-5.9,5.2-14.8,8.1-23,8.1c-22.2,0-39.3-17.8-39.3-40 c0-1.5,0-3.7,0-5.2L279.3,293.6z M296.3,261.7c0,2.2,0,5.2,0,5.9l-64.4-37.8c7.4-5.2,15.6-8.9,24.4-8.9 C278.6,221.7,296.3,240.2,296.3,261.7z M129.7,204.7v120c0,8.9,5.9,15.6,15.6,15.6h214.1l-65.9-37.8c-9.6,8.9-23,14.8-37.8,14.8 c-30.4,0-54.8-25.9-54.8-55.6c0-5.2,0-9.6,1.5-13.3L129.7,204.7z M115.6,170.6L406,341.7l5.2,2.2l-2.2,5.9l-2.2,2.2l-2.2,5.9 l-5.9-3.7L108.9,183.2l-5.9-3.7l3.7-5.2l1.5-2.2l3.7-5.9L115.6,170.6z M206.7,181.7l-1.5-9.6c-1.5-2.2-2.2-3.7-5.2-3.7h-15.6h-14.8 c-2.2,0-3.7,1.5-5.2,3.7l-2.2,9.6h-1.5h-11.9l68.1,40c9.6-9.6,24.4-15.6,39.3-15.6c31.9,0,55.6,25.2,55.6,55.6 c0,5.2-1.5,9.6-2.2,14.8l74.1,43.7V198.7c0-9.6-7.4-17-15.6-17h-15.6c-5.2-1.5-8.9-5.2-11.1-8.9l-2.2-3.7 c-3.7-5.9-11.9-11.1-18.5-11.1h-45.2c-7.4,0-15.6,5.2-19.3,11.1l-3.7,5.2c-2.2,2.2-5.9,5.9-9.6,7.4h-23h-11.1H206.7L206.7,181.7z"/%3E%3C/svg%3E');
   }

diff --git a/projects/storefrontstyles/scss/components/content/navigation/_breadcrumb.scss b/projects/storefrontstyles/scss/components/content/navigation/_breadcrumb.scss
@@ -17,7 +17,7 @@ html[dir='rtl'] cx-breadcrumb nav span:not(:last-child):after {
     box-shadow: none;
   }
 
-  @include forFeature('santoriniV2') {
+  @include forFeature('a11yImproveContrast') {
     color: var(--cx-color-text);
   }
 
@@ -38,7 +38,7 @@ html[dir='rtl'] cx-breadcrumb nav span:not(:last-child):after {
   }
 
   nav {
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       // complements reboot to remove focus-ring from unfocused elements
       &[tabindex='-1']:focus {
         box-shadow: 0 0 0 0 !important;
@@ -72,7 +72,7 @@ html[dir='rtl'] cx-breadcrumb nav span:not(:last-child):after {
           color: inherit;
           padding: 0px 5px;
 
-          @include forFeature('santoriniV2') {
+          @include forFeature('a11yImproveContrast') {
             color: var(--cx-color-primary);
           }
         }

diff --git a/projects/storefrontstyles/scss/components/content/navigation/_footer-navigation.scss b/projects/storefrontstyles/scss/components/content/navigation/_footer-navigation.scss
@@ -3,7 +3,7 @@
   a {
     font-size: var(--cx-font-small, 0.8rem);
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       @include type('8');
     }
 
@@ -36,7 +36,7 @@
       }
     }
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       nav ul.childs > li > cx-generic-link > a:hover {
         color: var(--cx-color-inverse);
       }

diff --git a/projects/storefrontstyles/scss/components/content/navigation/_navigation-ui.scss b/projects/storefrontstyles/scss/components/content/navigation/_navigation-ui.scss
@@ -93,7 +93,7 @@
         color: var(--cx-color-primary);
       }
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         &:hover {
           color: var(--cx-color-text);
         }
@@ -114,7 +114,7 @@
       }
     }
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       // arrow down caret to stay white on desktop
       // adding outline to convey button's definition
       button:hover {
@@ -156,7 +156,7 @@
       cx-generic-link a {
         padding: 1rem;
 
-        @include forFeature('santoriniV2') {
+        @include forFeature('a11yImproveContrast') {
           // adjust style for mobile menu, has diff background colour
           &:hover {
             color: var(--cx-color-primary);
@@ -176,7 +176,7 @@
           padding-bottom: 22px;
           padding-inline-start: 0;
           padding-inline-end: 0;
-          @include forFeature('santoriniV2') {
+          @include forFeature('a11yImproveContrast') {
             margin-top: 2px;
             margin-bottom: 2px;
             margin-inline-start: 5px;
@@ -221,7 +221,7 @@
     ul.childs > li > cx-generic-link > a {
       padding: 5px 0;
     }
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       li > cx-generic-link > a {
         padding-top: 10px;
         padding-bottom: 12px;
@@ -253,7 +253,7 @@
         font-size: 1rem;
       }
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         padding-inline-start: 0;
       }
     }
@@ -273,7 +273,7 @@
         }
       }
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         cx-generic-link:hover {
           color: var(--cx-color-text);
         }
@@ -292,7 +292,7 @@
       text-decoration: none;
       white-space: nowrap;
     }
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       a:hover {
         color: var(--cx-color-inverse);
         text-decoration: underline;
@@ -449,7 +449,7 @@
     &.accNavComponent {
       background-color: transparent;
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         // my account button has text, this fixes white hover on desktop
         button:hover {
           color: var(--cx-color-primary);

diff --git a/projects/storefrontstyles/scss/components/content/pdf/_pdf.scss b/projects/storefrontstyles/scss/components/content/pdf/_pdf.scss
@@ -2,7 +2,7 @@
   .pdf-container {
     padding-top: 0.938rem;
     font-size: var(--cx-font-size, 0.875rem);
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       @include type('7');
     }
     a {
@@ -11,7 +11,7 @@
       text-decoration: underline;
       font-weight: 600;
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         @include type('3');
       }
     }

diff --git a/...frontstyles/scss/components/content/tab-paragraph-container/_tab-paragraph-container.scss b/...frontstyles/scss/components/content/tab-paragraph-container/_tab-paragraph-container.scss
@@ -15,7 +15,7 @@ $useAccordionOnly: false !default;
     height: 63px;
     position: relative;
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       @include type('3');
       border-top: 1px solid var(--cx-color-medium);
 

diff --git a/projects/storefrontstyles/scss/components/layout/_storefront.scss b/projects/storefrontstyles/scss/components/layout/_storefront.scss
@@ -30,7 +30,7 @@
     :focus,
     .ng-select-focused {
       --cx-visual-focus-width: 0;
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         // this change is not kicking-in, minor issue, it does work work when unwraping, unwrap in next major
         box-shadow: 0 0 0 0;
       }

diff --git a/projects/storefrontstyles/scss/components/layout/header/_header.scss b/projects/storefrontstyles/scss/components/layout/header/_header.scss
@@ -79,7 +79,7 @@ $space: 0.5rem;
     }
     justify-content: flex-start;
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       @include type('8');
     }
   }

diff --git a/projects/storefrontstyles/scss/components/misc/chat-messaging/_avatar.scss b/projects/storefrontstyles/scss/components/misc/chat-messaging/_avatar.scss
@@ -10,7 +10,7 @@
     border: 1px solid var(--cx-color-light);
     font-size: var(--cx-font-size, 2rem);
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       @include type('1');
       border: 1px solid var(--cx-color-medium);
     }

diff --git a/projects/storefrontstyles/scss/components/misc/chat-messaging/_messaging.scss b/projects/storefrontstyles/scss/components/misc/chat-messaging/_messaging.scss
@@ -26,7 +26,7 @@
         margin-bottom: 0;
         font-size: var(--cx-font-size, 0.875rem);
 
-        @include forFeature('santoriniV2') {
+        @include forFeature('a11yImproveContrast') {
           @include type('4');
         }
       }
@@ -143,7 +143,7 @@
           text-align: end;
           margin: 0;
 
-          @include forFeature('santoriniV2') {
+          @include forFeature('a11yImproveContrast') {
             @include type('8');
           }
         }

diff --git a/projects/storefrontstyles/scss/components/misc/pagination/_pagination.scss b/projects/storefrontstyles/scss/components/misc/pagination/_pagination.scss
@@ -5,7 +5,7 @@
   align-content: center;
   align-items: stretch;
 
-  @include forFeature('santoriniV2') {
+  @include forFeature('a11yImproveContrast') {
     align-items: center;
   }
 
@@ -22,7 +22,7 @@
     justify-content: center;
     transition: background-color 0.3s, color 0.3s;
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       @include type('7');
       border: solid 1px var(--cx-color-medium);
     }
@@ -31,7 +31,7 @@
       border-top-left-radius: 0.25rem;
       border-bottom-left-radius: 0.25rem;
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         color: var(--cx-color-secondary);
         font-size: var(--cx-font-size, 2rem);
         line-height: 0;
@@ -43,7 +43,7 @@
       border-top-right-radius: 0.25rem;
       border-bottom-right-radius: 0.25rem;
 
-      @include forFeature('santoriniV2') {
+      @include forFeature('a11yImproveContrast') {
         border-inline-end: solid 1px var(--cx-color-medium);
         color: var(--cx-color-secondary);
         font-size: var(--cx-font-size, 2rem);

diff --git a/projects/storefrontstyles/scss/components/misc/popover/_popover.scss b/projects/storefrontstyles/scss/components/misc/popover/_popover.scss
@@ -30,7 +30,7 @@
   padding: 1rem 0.938rem;
   box-shadow: 0px 1px 11px 2px var(--cx-popover-box-shadow-color);
 
-  @include forFeature('santoriniV2') {
+  @include forFeature('a11yImproveContrast') {
     @include type('7');
   }
 

diff --git a/projects/storefrontstyles/scss/components/misc/progress-button/_progress-button.scss b/projects/storefrontstyles/scss/components/misc/progress-button/_progress-button.scss
@@ -14,7 +14,7 @@
     font-size: var(--cx-font-size, 1.188rem);
     font-weight: var(--cx-font-weight-bold);
 
-    @include forFeature('santoriniV2') {
+    @include forFeature('a11yImproveContrast') {
       @include type('4');
     }