adobecom · pinatacode · Sep 1, 2026
diff --git a/react/src/js/components/Consonant/Filters/Left/Desktop-Only/ClearButton.jsx b/react/src/js/components/Consonant/Filters/Left/Desktop-Only/ClearButton.jsx
@@ -6,11 +6,13 @@ import {
 
 const clearButtonType = {
     clearAllFiltersText: string,
+    clearAllFiltersAriaLabel: string,
     onClearAllFilters: func.isRequired,
 };
 
 const defaultProps = {
     clearAllFiltersText: '',
+    clearAllFiltersAriaLabel: '',
 };
 
 /**
@@ -35,13 +37,15 @@ const ClearBtn = (props) => {
     const {
         onClearAllFilters,
         clearAllFiltersText,
+        clearAllFiltersAriaLabel,
     } = props;
 
     return (
         <button
             type="button"
             data-testid="consonant-LeftFilters-clearLink"
             className="consonant-LeftFilters-clearLink"
+            aria-label={clearAllFiltersAriaLabel}
             onClick={onClearAllFilters}
             tabIndex="0">
             {clearAllFiltersText}

diff --git a/react/src/js/components/Consonant/Filters/Left/Mobile-Only/PanelFooter.jsx b/react/src/js/components/Consonant/Filters/Left/Mobile-Only/PanelFooter.jsx
@@ -12,6 +12,7 @@ const panelFooterType = {
     applyText: string,
     showTotalResults: bool,
     clearAllFiltersText: string,
+    clearAllFiltersAriaLabel: string,
     someFiltersAreSelected: bool,
     showTotalResultsText: string,
     onClearAllFilters: func.isRequired,
@@ -25,6 +26,7 @@ const defaultProps = {
     applyText: '',
     showTotalResults: false,
     clearAllFiltersText: '',
+    clearAllFiltersAriaLabel: '',
     showTotalResultsText: '',
     someFiltersAreSelected: false,
 };
@@ -55,6 +57,7 @@ const PanelFooter = forwardRef((props, ref) => {
         resQty,
         onClearAllFilters,
         clearAllFiltersText,
+        clearAllFiltersAriaLabel,
         onMobileFiltersToggleClick,
         someFiltersAreSelected,
         applyText,
@@ -100,6 +103,7 @@ const PanelFooter = forwardRef((props, ref) => {
                 type="button"
                 data-testid="consonant-LeftFilters-mobileFooterClearBtn"
                 className="consonant-LeftFilters-mobileFooterClearBtn"
+                aria-label={clearAllFiltersAriaLabel}
                 onClick={onClearAllFilters}>
                 {clearAllFiltersText}
             </button>

diff --git a/react/src/js/components/Consonant/Filters/Left/Panel.jsx b/react/src/js/components/Consonant/Filters/Left/Panel.jsx
@@ -97,6 +97,7 @@ const LeftFilterPanel = forwardRef(({
      */
     const showTotalResults = getConfig('collection', 'showTotalResults');
     const clearAllFiltersText = getConfig('filterPanel', 'i18n.leftPanel.clearAllFiltersText');
+    const clearAllFiltersAriaLabel = getConfig('filterPanel', 'i18n.leftPanel.clearAllFiltersAriaLabel');
     const bookmarksEnabled = getConfig('bookmarks', 'leftFilterPanel.showBookmarksFilter');
     const searchEnabled = getConfig('search', 'enabled');
     const panelHeader = getConfig('filterPanel', 'i18n.leftPanel.header');
@@ -213,6 +214,7 @@ const LeftFilterPanel = forwardRef(({
                 {DESKTOP_SCREEN_SIZE &&
                 <DesktopClearBtn
                     clearAllFiltersText={clearAllFiltersText}
+                    clearAllFiltersAriaLabel={clearAllFiltersAriaLabel}
                     onClearAllFilters={onClearAllFilters}
                     panelHeader={panelHeader} />
                 }
@@ -263,6 +265,7 @@ const LeftFilterPanel = forwardRef(({
                 showTotalResultsText={showTotalResultsText}
                 onMobileFiltersToggleClick={onMobileFiltersToggleClick}
                 clearAllFiltersText={clearAllFiltersText}
+                clearAllFiltersAriaLabel={clearAllFiltersAriaLabel}
                 onClearAllFilters={onClearAllFilters}
                 resQty={resQty}
                 showTotalResults={showTotalResults}

diff --git a/react/src/js/components/Consonant/Filters/Left/__tests__/Panel.spec.js b/react/src/js/components/Consonant/Filters/Left/__tests__/Panel.spec.js
@@ -70,6 +70,21 @@ describe('Consonant/Left/Panel', () => {
 
         onClearAllFilters.mockClear();
     });
+    test('Desktop clear-all button should have aria-label conveying purpose', () => {
+        renderFilterPanel();
+
+        const clearButtonElement = screen.queryByTestId('consonant-LeftFilters-clearLink');
+        expect(clearButtonElement).toHaveAttribute('aria-label', 'Clear all filters');
+    });
+    test('Mobile clear-all button should have aria-label conveying purpose', () => {
+        renderFilterPanel({
+            filters: selectedAllFilters,
+            windowWidth: NON_DESKTOP_WIDTH,
+        });
+
+        const mobileFooterClearElement = screen.queryByTestId('consonant-LeftFilters-mobileFooterClearBtn');
+        expect(mobileFooterClearElement).toHaveAttribute('aria-label', 'Clear all filters');
+    });
     test('Should be able to clear all filters using a mobile footer', () => {
         const { props: { onClearAllFilters } } = renderFilterPanel({
             filters: selectedAllFilters,

diff --git a/react/src/js/components/Consonant/Filters/Top/Footer.jsx b/react/src/js/components/Consonant/Filters/Top/Footer.jsx
@@ -7,6 +7,7 @@ import {
 
 const footerType = {
     clearFilterText: string,
+    clearFilterAriaLabel: string,
     numItemsSelected: number,
     mobileFooterBtnText: string,
     handleClear: func.isRequired,
@@ -17,6 +18,7 @@ const footerType = {
 const defaultProps = {
     numItemsSelected: 0,
     clearFilterText: '',
+    clearFilterAriaLabel: '',
     mobileFooterBtnText: '',
     mobileGroupTotalResultsText: '',
 };
@@ -44,6 +46,7 @@ const Footer = (props) => {
         numItemsSelected,
         handleClear,
         clearFilterText,
+        clearFilterAriaLabel,
         handleToggle,
         mobileFooterBtnText,
     } = props;
@@ -71,6 +74,7 @@ const Footer = (props) => {
             <button
                 data-testid="consonant-TopFilter-footerClearBtn"
                 type="button"
+                aria-label={clearFilterAriaLabel}
                 onClick={handleClear}
                 className="consonant-TopFilter-footerClearBtn"
                 tabIndex="0">

diff --git a/react/src/js/components/Consonant/Filters/Top/Group.jsx b/react/src/js/components/Consonant/Filters/Top/Group.jsx
@@ -11,7 +11,7 @@ import {
 import { Items } from './Items';
 import { Footer } from './Footer';
 import { filterItemType } from '../../types/config';
-import { stopPropagation } from '../../Helpers/general';
+import { stopPropagation, template } from '../../Helpers/general';
 import {
     useConfig,
     useExpandable,
@@ -82,6 +82,8 @@ const Group = (props) => {
         getConfig('filterPanel', 'i18n.topPanel.mobile.group.totalResultsText').replace('{total}', results);
     const mobileGroupApplyBtnText = getConfig('filterPanel', 'i18n.topPanel.mobile.group.applyBtnText');
     const mobileGroupDoneBtnText = getConfig('filterPanel', 'i18n.topPanel.mobile.group.doneBtnText');
+    const clearFilterAriaLabelTemplate = getConfig('filterPanel', 'i18n.topPanel.clearFilterAriaLabel');
+    const clearFilterAriaLabel = template(clearFilterAriaLabelTemplate, { name });
     const isCategoriesPage = getConfig('collection', 'layout.container') === 'categories';
     const isProductsFilter = id === 'caas:all-products';
 
@@ -257,6 +259,7 @@ const Group = (props) => {
                                     mobileFooterBtnText={mobileFooterBtnText}
                                     handleToggle={handleToggle}
                                     clearFilterText={clearFilterText}
+                                    clearFilterAriaLabel={clearFilterAriaLabel}
                                     handleClear={handleClear}
                                     numItemsSelected={numItemsSelected}
                                     mobileGroupTotalResultsText={mobileGroupTotalResultsText} />

diff --git a/react/src/js/components/Consonant/Filters/Top/Panel.jsx b/react/src/js/components/Consonant/Filters/Top/Panel.jsx
@@ -104,6 +104,7 @@ const FiltersPanelTop = (props) => {
     const searchTitle = getConfig('search', 'i18n.leftFilterPanel.searchTitle');
     const clearFilterText = getConfig('filterPanel', 'i18n.topPanel.mobile.group.clearFilterText');
     const clearAllFiltersText = getConfig('filterPanel', 'i18n.topPanel.clearAllFiltersText');
+    const clearAllFiltersAriaLabel = getConfig('filterPanel', 'i18n.topPanel.clearAllFiltersAriaLabel');
     const blurMobileFilters = getConfig('filterPanel', 'topPanel.mobile.blurFilters');
     const showTotalResults = getConfig('collection', 'showTotalResults');
     const showTotalResultsText = getConfig('collection', 'i18n.totalResultsText');
@@ -314,6 +315,7 @@ const FiltersPanelTop = (props) => {
                             type="button"
                             data-testid="consonant-TopFilters-clearBtn"
                             className="consonant-TopFilters-clearBtn"
+                            aria-label={clearAllFiltersAriaLabel}
                             onClick={onClearAllFilters}
                             tabIndex="0">
                             {clearAllFiltersText}

diff --git a/react/src/js/components/Consonant/Filters/Top/__tests__/Group.spec.js b/react/src/js/components/Consonant/Filters/Top/__tests__/Group.spec.js
@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom/extend-expect';
 import {
+    screen,
     fireEvent,
 } from '@testing-library/react';
 
@@ -8,6 +9,7 @@ import setup from '../../../Testing/Utils/Settings';
 import { testAccessibility } from '../../../Testing/Utils/a11yTest';
 import {
     DEFAULT_PROPS,
+    selectedAllItems,
 } from '../../../Testing/Constants/FilterItem';
 
 const renderTopFilterGroup = setup(Group, DEFAULT_PROPS);
@@ -51,6 +53,13 @@ describe('Consonant/Filters/Top/Group', () => {
         expect(filterNameElement).toHaveAttribute('daa-ll', `${name} Open`);
     });
 
+    test('Per-group footer clear button should have aria-label naming the group', () => {
+        const { props: { name } } = renderTopFilterGroup(selectedAllItems);
+
+        const clearBtn = screen.queryByTestId('consonant-TopFilter-footerClearBtn');
+        expect(clearBtn).toHaveAttribute('aria-label', `Clear ${name} filters`);
+    });
+
     // Accessibility test with jest-axe
     describe('Accessibility', () => {
         testAccessibility(renderTopFilterGroup, {}, 'Top Filter Group');

diff --git a/react/src/js/components/Consonant/Filters/Top/__tests__/Panel.spec.js b/react/src/js/components/Consonant/Filters/Top/__tests__/Panel.spec.js
@@ -131,6 +131,15 @@ describe('Consonant/Filters/Top/Panel', () => {
         fireEvent.click(clearButtonElement);
         expect(onClearAllFilters).toHaveBeenCalled();
     });
+    test('Top panel clear-all button should have aria-label conveying purpose', () => {
+        renderTopFilterPanel({
+            filterPanelEnabled: true,
+            filters: selectedAllFilters,
+        });
+
+        const clearButtonElement = screen.queryByTestId('consonant-TopFilters-clearBtn');
+        expect(clearButtonElement).toHaveAttribute('aria-label', 'Clear all filters');
+    });
 
     test('should load analytics onto the filter panel', () => {
         renderTopFilterPanel({

diff --git a/react/src/js/components/Consonant/Helpers/constants.js b/react/src/js/components/Consonant/Helpers/constants.js
@@ -189,6 +189,8 @@ export const DEFAULT_CONFIG = {
         filters: [],
         clearAllFiltersText: 'Clear all',
         clearFilterText: 'Clear',
+        clearAllFiltersAriaLabel: 'Clear all filters',
+        clearFilterAriaLabel: 'Clear {name} filters',
         filterLogic: 'and',
         leftPanelHeader: 'Refine the results',
         topPanel: {

diff --git a/react/src/js/components/Consonant/Testing/Mocks/config.json b/react/src/js/components/Consonant/Testing/Mocks/config.json
@@ -106,6 +106,7 @@
             "leftPanel": {
                 "header": "Filters",
                 "clearAllFiltersText": "Clear All",
+                "clearAllFiltersAriaLabel": "Clear all filters",
                 "mobile": {
                     "filtersBtnLabel": "Filters:",
                     "panel": {
@@ -126,6 +127,8 @@
             "topPanel": {
                 "groupLabel": "Filters:",
                 "clearAllFiltersText": "Clear All",
+                "clearAllFiltersAriaLabel": "Clear all filters",
+                "clearFilterAriaLabel": "Clear {name} filters",
                 "moreFiltersBtnText": "More +",
                 "mobile": {
                     "group": {

diff --git a/react/src/js/components/Consonant/types/config.js b/react/src/js/components/Consonant/types/config.js
@@ -71,6 +71,8 @@ const FilterPanelType = {
     clearFilterText: string,
     leftPanelHeader: string,
     clearAllFiltersText: string,
+    clearAllFiltersAriaLabel: string,
+    clearFilterAriaLabel: string,
     enabled: oneOfType(EnabledType),
     filters: oneOfType(FiltersType),
 };