fix: (CXSPA-8764) - Cropped focus ring (SAP#19579)

crisli001 · Nov 22, 2024 · c4d4d14 · c4d4d14
1 parent 30b4e7f
commit c4d4d14
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 5 deletions.
diff --git a/feature-libs/cart/base/components/cart-shared/cart-item-list/cart-item-list.component.ts b/feature-libs/cart/base/components/cart-shared/cart-item-list/cart-item-list.component.ts
@@ -101,6 +101,7 @@ export class CartItemListComponent implements OnInit, OnDestroy {
     useFeatureStyles('a11yPreventHorizontalScroll');
     useFeatureStyles('a11yQTY2Quantity');
     useFeatureStyles('a11yPickupOptionsTabs');
+    useFeatureStyles('a11yCroppedFocusRing');
   }
 
   ngOnInit(): void {

diff --git a/feature-libs/cart/base/components/cart-shared/cart-item/cart-item.component.ts b/feature-libs/cart/base/components/cart-shared/cart-item/cart-item.component.ts
@@ -46,6 +46,7 @@ export class CartItemComponent implements OnChanges {
   constructor(protected cartItemContextSource: CartItemContextSource) {
     useFeatureStyles('a11yCartItemsLinksStyles');
     useFeatureStyles('a11yQTY2Quantity');
+    useFeatureStyles('a11yCroppedFocusRing');
   }
 
   ngOnChanges(changes?: SimpleChanges) {

diff --git a/feature-libs/cart/base/styles/components/_cart-item-list.scss b/feature-libs/cart/base/styles/components/_cart-item-list.scss
@@ -52,6 +52,11 @@
     grid-template-columns: 5rem 14rem;
     gap: 1rem;
     text-indent: 0;
+    @include forFeature('a11yCroppedFocusRing') {
+      a {
+        height: fit-content;
+      }
+    }
   }
 
   .cx-name {

diff --git a/feature-libs/cart/base/styles/components/_cart-item.scss b/feature-libs/cart/base/styles/components/_cart-item.scss
@@ -96,6 +96,9 @@
       display: block;
       padding: 0 1vw;
       height: 100%;
+      @include forFeature('a11yCroppedFocusRing') {
+        height: unset;
+      }
     }
   }
 

diff --git a/feature-libs/organization/administration/components/shared/list/list.component.ts b/feature-libs/organization/administration/components/shared/list/list.component.ts
@@ -46,6 +46,7 @@ export class ListComponent<T = any, P = PaginationModel> {
     useFeatureStyles('a11yListOversizedFocus');
     useFeatureStyles('a11yOrganizationLinkableCells');
     useFeatureStyles('a11yTextSpacingAdjustments');
+    useFeatureStyles('a11yCroppedFocusRing');
   }
 
   @HostBinding('class')

diff --git a/feature-libs/organization/administration/styles/_list.scss b/feature-libs/organization/administration/styles/_list.scss
@@ -90,6 +90,12 @@
       }
     }
   }
+
+  @include forFeature('a11yCroppedFocusRing') {
+    .header h2 button {
+      outline-offset: -2px;
+    }
+  }
   @include forFeature('a11yOrganizationListHeadingOrder') {
     .title {
       h2,
@@ -99,6 +105,7 @@
         button {
           border: none;
           background-color: inherit;
+
           cx-icon {
             pointer-events: none;
             color: var(--cx-color, var(--cx-color-info));

diff --git a/...roduct/future-stock/components/future-stock-accordion/future-stock-accordion.component.ts b/...roduct/future-stock/components/future-stock-accordion/future-stock-accordion.component.ts
@@ -5,8 +5,9 @@
  */
 
 import { Component } from '@angular/core';
-import { ICON_TYPE } from '@spartacus/storefront';
+import { useFeatureStyles } from '@spartacus/core';
 import { FutureStockFacade } from '@spartacus/product/future-stock/root';
+import { ICON_TYPE } from '@spartacus/storefront';
 
 @Component({
   selector: 'cx-future-stock-accordion',
@@ -17,7 +18,9 @@ export class FutureStockAccordionComponent {
   expanded: boolean = false;
   iconType = ICON_TYPE;
 
-  constructor(protected futureStockService: FutureStockFacade) {}
+  constructor(protected futureStockService: FutureStockFacade) {
+    useFeatureStyles('a11yCroppedFocusRing');
+  }
 
   toggle(): void {
     this.expanded = !this.expanded;

diff --git a/feature-libs/product/future-stock/styles/_future-stock-accordion.scss b/feature-libs/product/future-stock/styles/_future-stock-accordion.scss
@@ -7,6 +7,11 @@ cx-future-stock-accordion {
     border: none;
     background-color: transparent;
     padding-inline-start: 1.25rem;
+    @include forFeature('a11yCroppedFocusRing') {
+      padding-inline-start: unset;
+      margin-inline-start: 1.25rem;
+      padding: 0;
+    }
     margin: 0.5rem auto;
     cursor: pointer;
 

diff --git a/feature-libs/quote/components/confirm-dialog/quote-confirm-dialog.component.ts b/feature-libs/quote/components/confirm-dialog/quote-confirm-dialog.component.ts
@@ -10,7 +10,11 @@ import {
   inject,
   OnInit,
 } from '@angular/core';
-import { CxDatePipe, TranslationService } from '@spartacus/core';
+import {
+  CxDatePipe,
+  TranslationService,
+  useFeatureStyles,
+} from '@spartacus/core';
 import { QuoteCoreConfig } from '@spartacus/quote/core';
 import {
   FocusConfig,
@@ -44,6 +48,10 @@ export class QuoteConfirmDialogComponent implements OnInit {
 
   confirmationContext$: Observable<ConfirmationContext>;
 
+  constructor() {
+    useFeatureStyles('a11yCroppedFocusRing');
+  }
+
   ngOnInit(): void {
     this.confirmationContext$ = this.launchDialogService.data$.pipe(
       filter((data) => !!data),

diff --git a/feature-libs/quote/styles/_quote-confirm-dialog.scss b/feature-libs/quote/styles/_quote-confirm-dialog.scss
@@ -22,6 +22,9 @@
 
         button.close {
           padding-inline-end: 0px;
+          @include forFeature('a11yCroppedFocusRing') {
+            padding: 0;
+          }
         }
         @include cx-highContrastTheme {
           background-color: var(--cx-color-background);

diff --git a/feature-libs/quote/styles/mixins/_quote-toggle.scss b/feature-libs/quote/styles/mixins/_quote-toggle.scss
@@ -4,6 +4,10 @@
     user-select: none;
     margin-bottom: 1rem;
 
+    @include forFeature('a11yCroppedFocusRing') {
+      width: fit-content;
+    }
+
     cx-icon {
       padding-inline-end: 5px;
     }

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
@@ -684,6 +684,13 @@ export interface FeatureTogglesInterface {
    */
   a11yShowDownArrowOnFocusedSelectMenu?: boolean;
 
+  /**
+   * Fixes various instances of the focus ring being cropped in the UI.
+   * The focus ring on interactive elements should have all its sides visible and not include any extra padding.
+   * Affects styles of: 'CartItemListComponent, CartItemComponent, ListComponent, FutureStockAccordionComponent, QuoteConfirmDialogComponent, MessagingComponent
+   */
+  a11yCroppedFocusRing?: boolean;
+
   /**
    * Fixes text formatting issues while a11y text spacing is enabled.
    * Affects: ListComponent, CSAgentLoginFormComponent
@@ -907,6 +914,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDeleteButton2First: false,
   a11yShowLabelOfSelect: false,
   a11yShowDownArrowOnFocusedSelectMenu: false,
+  a11yCroppedFocusRing: false,
   a11yTextSpacingAdjustments: false,
   a11yTableHeaderReadout: false,
   occCartNameAndDescriptionInHttpRequestBody: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -394,6 +394,7 @@ if (environment.cpq) {
         a11yDeleteButton2First: true,
         a11yShowLabelOfSelect: true,
         a11yShowDownArrowOnFocusedSelectMenu: true,
+        a11yCroppedFocusRing: true,
         a11yTextSpacingAdjustments: true,
         a11yTableHeaderReadout: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,

diff --git a/projects/storefrontlib/shared/components/chat-messaging/messaging/messaging.component.ts b/projects/storefrontlib/shared/components/chat-messaging/messaging/messaging.component.ts
@@ -18,7 +18,7 @@ import {
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
-import { WindowRef } from '@spartacus/core';
+import { useFeatureStyles, WindowRef } from '@spartacus/core';
 import { Observable } from 'rxjs';
 import { ICON_TYPE } from '../../../../cms-components/misc/icon/icon.model';
 import { FilesFormValidators } from '../../../services/file/files-form-validators';
@@ -94,7 +94,9 @@ export class MessagingComponent implements OnInit, AfterViewChecked {
   constructor(
     protected windowRef: WindowRef,
     protected filesFormValidators: FilesFormValidators
-  ) {}
+  ) {
+    useFeatureStyles('a11yCroppedFocusRing');
+  }
 
   ngOnInit(): void {
     this.buildForm();

diff --git a/projects/storefrontstyles/scss/components/misc/chat-messaging/_messaging.scss b/projects/storefrontstyles/scss/components/misc/chat-messaging/_messaging.scss
@@ -56,13 +56,19 @@
           90%
         );
         border-radius: 0px 16px 16px 16px;
+        @include forFeature('a11yCroppedFocusRing') {
+          outline-offset: -2px;
+        }
       }
 
       .cx-message-right-align-text {
         padding: 20px 28px;
         border: 1px solid var(--cx-color-light);
         background-color: var(--cx-color-background);
         border-radius: 0px 16px 16px 16px;
+        @include forFeature('a11yCroppedFocusRing') {
+          outline-offset: -2px;
+        }
       }
 
       .cx-attachment {