adobecom · cmiqueo · Apr 14, 2025 · Apr 7, 2025 · Apr 7, 2025 · Apr 8, 2025
diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/main.min.js b/dist/main.min.js
diff --git a/dist/main.source.js b/dist/main.source.js
diff --git a/less/components/consonant/cards-carousel.less b/less/components/consonant/cards-carousel.less
@@ -31,6 +31,13 @@
                         min-height: 496px;
                     }
                 }
+
+                &.tabbing {
+                    *:focus {
+                        outline: @consonantFocusedColor solid 4px;
+                        outline-offset: 3px;
+                    }
+                }
             }
         }
 
@@ -117,7 +124,7 @@
             }
 
             &--2up {
-                grid-template-columns: repeat(auto-fill, minmax(@consonant-DoubleWideCard-desktopMinWidth, @consonant-DoubleWideCard-desktopMinWidth));
+                grid-template-columns: auto;
 
                 .consonant-Card {
                     min-width: 500px;
@@ -143,10 +150,30 @@
             }
 
             &--3up {
-                grid-template-columns: repeat(auto-fill, minmax(@consonantCardMaxWidth, @consonantCardMaxWidth-3up));
+                grid-template-columns: auto;
 
-                .consonant-Card {
-                    min-width: @consonantCardMaxWidth-3up;
+                &.consonant-CardsGrid--with1xGutter {
+                    .consonant-Card {
+                        width: 394px;
+                    }
+                }
+
+                &.consonant-CardsGrid--with2xGutter {
+                    .consonant-Card {
+                        width: 389px;
+                    }
+                }
+
+                &.consonant-CardsGrid--with3xGutter {
+                    .consonant-Card {
+                        width: 384px;
+                    }
+                }
+
+                &.consonant-CardsGrid--with4xGutter {
+                    .consonant-Card {
+                        width: 378px;
+                    }
                 }
 
                 &:after {
@@ -169,10 +196,30 @@
             }
 
             &--4up {
-                grid-template-columns: repeat(auto-fill, minmax(@consonant-CardsGrid-smallerCardMaxWidth, @consonant-CardsGrid-smallerCardMaxWidth));
+                grid-template-columns: auto;
 
-                .consonant-Card {
-                    min-width: @consonant-CardsGrid-smallerCardMaxWidth;
+                &.consonant-CardsGrid--with1xGutter {
+                    .consonant-Card {
+                        width: 294px;
+                    }
+                }
+
+                &.consonant-CardsGrid--with2xGutter {
+                    .consonant-Card {
+                        width: 288px;
+                    }
+                }
+
+                &.consonant-CardsGrid--with3xGutter {
+                    .consonant-Card {
+                        width: 282px;
+                    }
+                }
+
+                &.consonant-CardsGrid--with4xGutter {
+                    .consonant-Card {
+                        width: 276px;
+                    }
                 }
 
                 &:after {
@@ -190,7 +237,7 @@
             }
 
             &--5up {
-                grid-template-columns: repeat(auto-fill, minmax(@consonant-CardsGrid-smallestCardMaxWidth, @consonant-CardsGrid-smallestCardMaxWidth));
+                grid-template-columns: auto;
 
                 .consonant-Card {
                     min-width: @consonant-CardsGrid-smallestCardMaxWidth;

diff --git a/react/src/js/components/Consonant/Cards/Card.jsx b/react/src/js/components/Consonant/Cards/Card.jsx
@@ -51,6 +51,7 @@ const CardType = {
     onFocus: func.isRequired,
     origin: string,
     ariaHidden: bool,
+    tabIndex: string,
 };
 
 const defaultProps = {
@@ -75,6 +76,7 @@ const defaultProps = {
     tags: [],
     origin: '',
     ariaHidden: false,
+    tabIndex: '',
 };
 
 /**
@@ -155,6 +157,7 @@ const Card = (props) => {
         onFocus,
         origin,
         ariaHidden,
+        tabIndex,
     } = props;
 
     let bannerBackgroundColorToUse = bannerBackgroundColor;
@@ -399,7 +402,7 @@ const Card = (props) => {
     const altCtaLink = getAltCtaLink(footer);
     const ctaText = (altCtaUsed && isUpcoming && altCtaLink !== '') ? getCtaText(footer, 'alt') : getCtaText(footer, 'right');
     const overlay = (altCtaUsed && isLive && altCtaLink !== '') ? altCtaLink : overlayParams;
-    const getsFocus = (isHalfHeight && !videoURLToUse)
+    const getsFocus = isHalfHeight
         || isThreeFourths
         || isFull
         || isDoubleWide
@@ -552,23 +555,26 @@ const Card = (props) => {
                         endDate={endDate}
                         cardStyle={cardStyle}
                         onFocus={onFocus}
-                        title={title} />
+                        title={title}
+                        tabIndex={tabIndex}
+                        renderOverlay={renderOverlay} />
                 ))}
                 {(isThreeFourths || isDoubleWide || isFull)
                     && !renderOverlay
                     && <LinkBlocker
                         target={linkBlockerTarget}
                         link={overlay}
                         title={title}
-                        getsFocus={getsFocus}
+                        getsFocus={getsFocus || true}
                         daa={ctaText} />}
             </div>
             {(renderOverlay || hideCTA || isHalfHeight || isIcon)
             && <LinkBlocker
                 target={linkBlockerTarget}
                 link={overlay}
                 title={title}
-                getsFocus={getsFocus}
+                getsFocus={getsFocus || true}
+                ariaHidden={ariaHidden}
                 tabIndex={ariaHidden ? -1 : 0}
                 daa={ctaText} />}
         </div>

diff --git a/react/src/js/components/Consonant/Cards/CardFooter/CardFooter.jsx b/react/src/js/components/Consonant/Cards/CardFooter/CardFooter.jsx
@@ -43,6 +43,8 @@
         isFluid,
         onFocus,
         title,
+        tabIndex,
+        renderOverlay,
     } = props;
 
     /**
@@ -151,7 +153,13 @@
                 {shouldRenderRight &&
                 <div
                     className="consonant-CardFooter-cell consonant-CardFooter-cell--right">
-                    <Group renderList={right} onFocus={onFocus} title={title} />
+                    <Group
+                        renderList={right}
+                        onFocus={onFocus}
+                        title={title}
+                        tabIndex={tabIndex}
+                        renderOverlay={renderOverlay}
+                    />
                 </div>
                 }
                 {shouldRenderAltRightUpcoming &&

diff --git a/react/src/js/components/Consonant/Cards/LinkBlocker/LinkBlocker.jsx b/react/src/js/components/Consonant/Cards/LinkBlocker/LinkBlocker.jsx
@@ -6,6 +6,7 @@ const LinkBlockerType = {
     link: string,
     target: string,
     title: string,
+    ariaHidden: bool,
     getsFocus: bool,
     daa: string,
 };
@@ -14,6 +15,7 @@ const defaultProps = {
     link: '',
     target: '',
     title: '',
+    ariaHidden: false,
     getsFocus: false,
     daa: '',
 };
@@ -39,6 +41,7 @@ const LinkBlocker = (props) => {
         target,
         title,
         getsFocus,
+        ariaHidden,
         daa,
     } = props;
     return (
@@ -48,7 +51,8 @@ const LinkBlocker = (props) => {
             target={target}
             rel="noopener noreferrer"
             aria-label={title}
-            tabIndex={getsFocus ? 0 : -1}
+            aria-hidden={ariaHidden}
+            tabIndex={(!ariaHidden && getsFocus) ? 0 : -1}
             daa-ll={daa}
             className="consonant-LinkBlocker" />
     );

diff --git a/react/src/js/components/Consonant/Cards/LinkBlocker/__tests__/LinkBlocker.spec.js b/react/src/js/components/Consonant/Cards/LinkBlocker/__tests__/LinkBlocker.spec.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import LinkBlocker from '../LinkBlocker';
+
+describe('LinkBlocker Component', () => {
+  test('should set tabIndex to -1 when aria-hidden is true regardless of getsFocus', () => {
+    render(
+      <LinkBlocker 
+        link="https://example.com"
+        target="_blank"
+        title="Example Link"
+        ariaHidden={true}
+        getsFocus={true} // This should be overridden by ariaHidden
+        daa="test-daa"
+      />
+    );
+
+    const linkElement = document.querySelector('.consonant-LinkBlocker');
+    expect(linkElement).toHaveAttribute('tabIndex', '-1');
+    expect(linkElement).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  test('should set tabIndex to -1 when getsFocus is false but not aria-hidden', () => {
+    render(
+      <LinkBlocker 
+        link="https://example.com"
+        target="_blank"
+        title="Example Link"
+        ariaHidden={false}
+        getsFocus={false}
+        daa="test-daa"
+      />
+    );
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('tabIndex', '-1');
+    expect(linkElement).not.toHaveAttribute('aria-hidden', 'true');
+  });
+
+  test('should set tabIndex to -1 when both ariaHidden and getsFocus are false', () => {
+    render(
+      <LinkBlocker 
+        link="https://example.com"
+        target="_blank"
+        title="Example Link"
+        ariaHidden={false}
+        getsFocus={false}
+        daa="test-daa"
+      />
+    );
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('tabIndex', '-1');
+  });
+
+  test('should handle default props correctly with tabIndex -1', () => {
+    render(<LinkBlocker />);
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('tabIndex', '-1');
+    expect(linkElement).toHaveAttribute('href', '');
+    expect(linkElement).toHaveAttribute('aria-label', '');
+  });
+
+  test('should evaluate expression (!ariaHidden && getsFocus) correctly for various combinations', () => {
+    // Case 1: !false && true => true => tabIndex should be 0
+    const { rerender } = render(
+      <LinkBlocker ariaHidden={false} getsFocus={true} />
+    );
+    let linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('tabIndex', '0');
+
+    // Case 2: !true && true => false => tabIndex should be -1
+    rerender(<LinkBlocker ariaHidden={true} getsFocus={true} />);
+    linkElement = document.querySelector('.consonant-LinkBlocker');
+    expect(linkElement).toHaveAttribute('tabIndex', '-1');
+
+    // Case 3: !false && false => false => tabIndex should be -1
+    rerender(<LinkBlocker ariaHidden={false} getsFocus={false} />);
+    linkElement = document.querySelector('.consonant-LinkBlocker');
+    expect(linkElement).toHaveAttribute('tabIndex', '-1');
+
+    // Case 4: !true && false => false => tabIndex should be -1
+    rerender(<LinkBlocker ariaHidden={true} getsFocus={false} />);
+    linkElement = document.querySelector('.consonant-LinkBlocker');
+    expect(linkElement).toHaveAttribute('tabIndex', '-1');
+  });
+});