fix(breadcrumbs): include/exclude aria labels (#3469)

Co-authored-by: ylakhdar <[email protected]>
coveo · Dec 8, 2023 · ce4f5a3 · ce4f5a3
1 parent f80d3b4
commit ce4f5a3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 0 deletions.
diff --git a/packages/atomic/cypress/e2e/breadbox-assertions.ts b/packages/atomic/cypress/e2e/breadbox-assertions.ts
@@ -18,6 +18,14 @@ export function assertDisplayBreadcrumb(display: boolean) {
   });
 }
 
+export function assertAriaLabel(includeOrExclude: 'inclusion' | 'exclusion') {
+  it(`should have aria-label "${includeOrExclude} filter"`, () => {
+    BreadboxSelectors.breadcrumbButton()
+      .should('have.attr', 'aria-label')
+      .and('include', `Remove ${includeOrExclude} filter on`);
+  });
+}
+
 export function assertBreadcrumbLabel(label: string) {
   it(`should have the label "${label}"`, () => {
     BreadboxSelectors.breadboxLabel().contains(label);

diff --git a/packages/atomic/cypress/e2e/breadbox.cypress.ts b/packages/atomic/cypress/e2e/breadbox.cypress.ts
@@ -155,6 +155,7 @@ describe('Breadbox Test Suites', () => {
       );
       BreadboxAssertions.assertDisplayBreadcrumbClearIcon();
       BreadboxAssertions.assertBreadcrumbDisplayLength(2);
+      BreadboxAssertions.assertAriaLabel('inclusion');
     });
 
     describe('when selecting "Clear all" button', () => {
@@ -291,6 +292,7 @@ describe('Breadbox Test Suites', () => {
       );
       BreadboxAssertions.assertBreadcrumbDisplayLength(1);
       BreadboxAssertions.assertDisplayBreadcrumbShowMore(false);
+      BreadboxAssertions.assertAriaLabel('exclusion');
     });
   });
 

diff --git a/packages/atomic/src/components/search/atomic-breadbox/atomic-breadbox.tsx b/packages/atomic/src/components/search/atomic-breadbox/atomic-breadbox.tsx
@@ -252,6 +252,13 @@ export class AtomicBreadbox implements InitializableComponent {
           style={isExclusion ? 'outline-error' : 'outline-bg-neutral'}
           class={classNames.join(' ')}
           title={title}
+          // TODO: [KIT-2939] Replace `remove-filter-on` by `remove-include-filter-on`.
+          ariaLabel={this.bindings.i18n.t(
+            isExclusion ? 'remove-exclusion-filter-on' : 'remove-filter-on',
+            {
+              value: title,
+            }
+          )}
           onClick={() => {
             if (isLastBreadcrumb) {
               this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch();

diff --git a/packages/atomic/src/locales.json b/packages/atomic/src/locales.json
@@ -674,6 +674,7 @@
     "zh-TW": "移除包含{{value}}的篩選器"
   },
   "remove-exclusion-filter-on": {
+    "en": "Remove exclusion filter on {{value}}",
     "fr": "Supprimer le filtre d'exclusion sur {{value}}",
     "cs": "Odstranit filtr vyloučení na {{value}}",
     "da": "Fjern udelukkelsesfilter på {{value}}",