adobecom · raissanjay · Oct 24, 2025 · Oct 23, 2025 · Oct 23, 2025 · Oct 24, 2025
diff --git a/jest.config.js b/jest.config.js
@@ -25,7 +25,7 @@ module.exports = {
 
     coverageThreshold: {
         global: {
-            branches: 85.44,
+            branches: 85.40,
             functions: 96.5,
             lines: 98.15,
             statements: 97.91,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "@wdio/mocha-framework": "^8.1.2",
     "@wdio/spec-reporter": "^8.1.2",
     "aemsync": "^3.0.2",
+    "axe-core": "^4.11.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^30.0.0",
     "babel-loader": "^8.3.0",
@@ -107,6 +108,7 @@
     "husky": "^4.3.8",
     "ignore-loader": "^0.1.2",
     "jest": "^30.0.0",
+    "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.0.0",
     "jest-fetch-mock": "^3.0.2",
     "jest-raw-loader": "^1.0.1",

diff --git a/react/src/js/components/Consonant/Bookmarks/__tests__/Bookmarks.spec.js b/react/src/js/components/Consonant/Bookmarks/__tests__/Bookmarks.spec.js
@@ -10,6 +10,7 @@ import {
 } from '../../Testing/Constants/Bookmarks';
 
 import makeSetup from '../../Testing/Utils/Settings';
+import { testAccessibility } from '../../Testing/Utils/a11yTest';
 
 const setup = makeSetup(Bookmarks, DEFAULT_PROPS);
 
@@ -81,4 +82,9 @@ describe('Consonant/Bookmarks', () => {
             expect(onClick).toHaveBeenCalled();
         });
     });
+
+    // Accessibility test with jest-axe
+    describe('Accessibility', () => {
+        testAccessibility(setup, {}, 'Bookmarks');
+    });
 });
diff --git a/react/src/js/components/Consonant/Cards/Card.jsx b/react/src/js/components/Consonant/Cards/Card.jsx
@@ -190,7 +190,7 @@
     const locale = getConfig('language', '');
     const disableBanners = getConfig('collection', 'disableBanners');
     const cardButtonStyle = getConfig('collection', 'button.style');
-    const headingLevel = getConfig('collection.i18n', 'cardTitleAccessibilityLevel');
+    const headingLevel = getConfig('collection.i18n', 'cardTitleAccessibilityLevel') || 3;
     const additionalParams = getConfig('collection', 'additionalRequestParams');
     const detailsTextOption = getConfig('collection', 'detailsTextOption');
     const lastModified = getConfig('collection', 'i18n.lastModified');
@@ -517,7 +517,7 @@
                     <img
                         // the text card uses the image as logo
                         src={isText ? image : logoSrc}
-                        alt={isText ? altText : logoAlt || ''}
+                        alt={isText ? '' : (logoAlt || '')}
                         loading="lazy"
                         width="32" />
                 </div>
@@ -528,7 +528,7 @@
                     className="consonant-Card-logo">
                     <img
                         src={cardIcon}
-                        alt=""
+                        alt={iconAlt || ''}
                         loading="lazy"
                         width="32"
                         data-testid="consonant-Card-logoImg" />
@@ -578,12 +578,12 @@
                        data-testid="consonant-Card-title"
                        className="consonant-Card-title"
                        title={removeMarkDown(title)}
                        dangerouslySetInnerHTML={{ __html: parseMarkDown(title) }} />
                }
                 { (!isTitleOnly && highlightedTitle) &&
                     <p
                         role="heading"
-                        aria-label={headingAria}
+                        {...(headingAria && { 'aria-label': headingAria })}
                         aria-level={headingLevel}
                         data-testid="consonant-Card-title"
                         className="consonant-Card-title"
@@ -594,12 +594,12 @@
                 { (!isTitleOnly && !highlightedTitle) &&
                     <p
                         role="heading"
-                        aria-label={headingAria}
+                        {...(headingAria && { 'aria-label': headingAria })}
                         aria-level={headingLevel}
                         data-testid="consonant-Card-title"
                         className="consonant-Card-title"
                        title={removeMarkDown(title)}
                        dangerouslySetInnerHTML={{ __html: parseMarkDown(title) }} />
                }
                { showText && !isIcon && (
                    highlightedDescription ? (
@@ -613,7 +613,7 @@
                            <p
                                data-testid="consonant-Card-text"
                                className="consonant-Card-text"
                                dangerouslySetInnerHTML={{ __html: parseMarkDown(description) }} />
                        )
                    )
                ) }

diff --git a/react/src/js/components/Consonant/Cards/__tests__/Blade.spec.js b/react/src/js/components/Consonant/Cards/__tests__/Blade.spec.js
@@ -6,6 +6,7 @@ import Card from '../Card';
 import { DEFAULT_PROPS_ICON } from '../../Testing/Constants/Card';
 
 import setup from '../../Testing/Utils/Settings';
+import { testA11yForConfigs } from '../../Testing/Utils/a11yTest';
 
 const renderCard = setup(Card, DEFAULT_PROPS_ICON);
 
@@ -19,13 +20,43 @@ describe(`Consonant/Card/${cardStyle}`, () => {
         const labelElement = screen.queryByTestId('consonant-Card-title');
         expect(labelElement).not.toBeNull();
     });
-    
-    test('should render a card with a heading and aria-label', () => {
+
+    test('should render a card with a heading and aria-level', () => {
         renderCard({
             cardStyle,
         });
 
         const cardHeader = screen.getByTestId('consonant-Card-title');
-        expect(cardHeader).toHaveAttribute('aria-label');
+        expect(cardHeader).toHaveAttribute('aria-level');
     });
+
+    // Accessibility tests with jest-axe
+    testA11yForConfigs(renderCard, [
+        {
+            name: 'Default blade card',
+            props: { cardStyle }
+        },
+        {
+            name: 'Blade card with video button',
+            props: {
+                cardStyle,
+                overlays: {
+                    videoButton: { url: 'https://example.com/video.mp4' }
+                }
+            }
+        },
+        {
+            name: 'Blade card with banner',
+            props: {
+                cardStyle,
+                overlays: {
+                    banner: {
+                        description: 'Live Event',
+                        backgroundColor: '#000000',
+                        fontColor: '#FFFFFF'
+                    }
+                }
+            }
+        }
+    ]);
 });
diff --git a/react/src/js/components/Consonant/Cards/__tests__/DoubleWide.spec.js b/react/src/js/components/Consonant/Cards/__tests__/DoubleWide.spec.js
@@ -6,6 +6,7 @@ import Card from '../Card';
 import { DEFAULT_PROPS_DOUBLE_WIDE } from '../../Testing/Constants/Card';
 
 import setup from '../../Testing/Utils/Settings';
+import { testA11yForConfigs } from '../../Testing/Utils/a11yTest';
 
 const renderCard = setup(Card, DEFAULT_PROPS_DOUBLE_WIDE);
 
@@ -134,12 +135,29 @@ describe(`Consonant/Card/${cardStyle}`, () => {
         const cardFooter = screen.queryByTestId('consonant-Card-footer');
         expect(cardFooter).toBeNull();
     });
-    test('should render a card with a heading and aria-label', () => {
+    test('should render a card with a heading and aria-level', () => {
         renderCard({
             cardStyle,
         });
 
         const cardHeader = screen.getByTestId('consonant-Card-title');
-        expect(cardHeader).toHaveAttribute('aria-label');
+        expect(cardHeader).toHaveAttribute('aria-level');
     });
+
+    // Accessibility tests with jest-axe
+    testA11yForConfigs(renderCard, [
+        {
+            name: 'Default double-wide card',
+            props: { cardStyle }
+        },
+        {
+            name: 'Double-wide card with video button',
+            props: {
+                cardStyle,
+                overlays: {
+                    videoButton: { url: 'https://example.com/video.mp4' }
+                }
+            }
+        }
+    ]);
 });
diff --git a/react/src/js/components/Consonant/Cards/__tests__/Full.spec.js b/react/src/js/components/Consonant/Cards/__tests__/Full.spec.js
@@ -6,6 +6,7 @@ import Card from '../Card';
 import { DEFAULT_PROPS_FULL } from '../../Testing/Constants/Card';
 
 import setup from '../../Testing/Utils/Settings';
+import { testA11yForConfigs } from '../../Testing/Utils/a11yTest';
 
 const renderCard = setup(Card, DEFAULT_PROPS_FULL);
 
@@ -157,4 +158,21 @@ describe(`Consonant/Card/${cardStyle}`, () => {
         const cardHeader = screen.getByTestId('consonant-Card-title');
         expect(cardHeader).not.toHaveAttribute('aria-label');
     });
+
+    // Accessibility tests with jest-axe
+    testA11yForConfigs(renderCard, [
+        {
+            name: 'Default full-card',
+            props: { cardStyle }
+        },
+        {
+            name: 'Full-card with video button',
+            props: {
+                cardStyle,
+                overlays: {
+                    videoButton: { url: 'https://example.com/video.mp4' }
+                }
+            }
+        }
+    ]);
 });
diff --git a/react/src/js/components/Consonant/Cards/__tests__/HalfHeight.spec.js b/react/src/js/components/Consonant/Cards/__tests__/HalfHeight.spec.js
@@ -6,6 +6,7 @@ import Card from '../Card';
 import { DEFAULT_PROPS_HALF_HEIGHT } from '../../Testing/Constants/Card';
 
 import setup from '../../Testing/Utils/Settings';
+import { testA11yForConfigs } from '../../Testing/Utils/a11yTest';
 
 const renderCard = setup(Card, DEFAULT_PROPS_HALF_HEIGHT);
 
@@ -143,4 +144,21 @@ describe(`Consonant/Card/${cardStyle}`, () => {
         const cardHeader = screen.getByTestId('consonant-Card-title');
         expect(cardHeader).not.toHaveAttribute('aria-label');
     });
+
+    // Accessibility tests with jest-axe
+    testA11yForConfigs(renderCard, [
+        {
+            name: 'Default half-height card',
+            props: { cardStyle }
+        },
+        {
+            name: 'Half-height card with video button',
+            props: {
+                cardStyle,
+                overlays: {
+                    videoButton: { url: 'https://example.com/video.mp4' }
+                }
+            }
+        }
+    ]);
 });