@coveo/atomic 3.58.1 → 3.59.1

package/dist/cjs/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.cjs

@@ -62,7 +62,8 @@ class AtomicCommerceBreadbox extends external_lit_namespaceObject.LitElement {
         else this.searchOrListing = (0, commerce_namespaceObject.buildSearch)(this.bindings.engine);
         this.context = (0, commerce_namespaceObject.buildContext)(this.bindings.engine);
         this.breadcrumbManager = this.searchOrListing.breadcrumbManager();
-        if (window.ResizeObserver && this.parentElement) {
+        if (this.disableCollapse) this.isCollapsed = false;
+        else if (window.ResizeObserver && this.parentElement) {
             this.resizeObserver = new ResizeObserver(()=>this.adaptBreadcrumbs());
             this.resizeObserver.observe(this.parentElement);
         }
@@ -95,7 +96,7 @@ class AtomicCommerceBreadbox extends external_lit_namespaceObject.LitElement {
         this.breadcrumbs.forEach((breadcrumb)=>this.show(breadcrumb));
     }
     adaptBreadcrumbs() {
-        if (!this.breadcrumbs.length) return;
+        if (this.disableCollapse || !this.breadcrumbs.length) return;
         this.showAllBreadcrumbs();
         if (!this.isCollapsed) return void this.updateShowLessDisplay();
         this.hideOverflowingBreadcrumbs();
@@ -175,7 +176,7 @@ class AtomicCommerceBreadbox extends external_lit_namespaceObject.LitElement {
                 i18n: this.bindings.i18n
             }
         })((0, external_lit_namespaceObject.html)`${this.renderBreadcrumbs(breadcrumbs)}
-      ${(0, breadcrumb_show_more_cjs_namespaceObject.renderBreadcrumbShowMore)({
+      ${this.disableCollapse ? external_lit_namespaceObject.nothing : (0, external_lit_namespaceObject.html)`${(0, breadcrumb_show_more_cjs_namespaceObject.renderBreadcrumbShowMore)({
             props: {
                 refCallback: async (el)=>{
                     await this.breadcrumbShowLessFocus.setTarget(el);
@@ -194,7 +195,7 @@ class AtomicCommerceBreadbox extends external_lit_namespaceObject.LitElement {
                 })
             }
         })}
-      ${(0, breadcrumb_show_less_cjs_namespaceObject.renderBreadcrumbShowLess)({
+          ${(0, breadcrumb_show_less_cjs_namespaceObject.renderBreadcrumbShowLess)({
             props: {
                 onShowLess: ()=>{
                     this.breadcrumbShowLessFocus.focusOnNextTarget();
@@ -203,7 +204,7 @@ class AtomicCommerceBreadbox extends external_lit_namespaceObject.LitElement {
                 isCollapsed: this.isCollapsed,
                 i18n: this.bindings.i18n
             }
-        })}
+        })}`}
       ${(0, breadcrumb_clear_all_cjs_namespaceObject.renderBreadcrumbClearAll)({
             props: {
                 refCallback: async (ref)=>{
@@ -220,7 +221,7 @@ class AtomicCommerceBreadbox extends external_lit_namespaceObject.LitElement {
         })} `)}`;
     }
     constructor(){
-        super(), this.lastRemovedBreadcrumbIndex = 0, this.numberOfBreadcrumbs = 0, this.numberOfCollapsedBreadcrumbs = 0, this.isCollapsed = true, this.showMoreText = '', this.breadboxAriaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'breadbox', true), this.pathLimit = 3, this.valueForFacetType = (type, field, value)=>{
+        super(), this.lastRemovedBreadcrumbIndex = 0, this.numberOfBreadcrumbs = 0, this.numberOfCollapsedBreadcrumbs = 0, this.isCollapsed = true, this.showMoreText = '', this.disableCollapse = false, this.breadboxAriaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'breadbox', true), this.pathLimit = 3, this.valueForFacetType = (type, field, value)=>{
             switch(type){
                 case 'numericalRange':
                     return [
@@ -299,6 +300,12 @@ _ts_decorate([
 _ts_decorate([
     (0, decorators_js_namespaceObject.state)()
 ], AtomicCommerceBreadbox.prototype, "showMoreText", void 0);
+_ts_decorate([
+    (0, decorators_js_namespaceObject.property)({
+        type: Boolean,
+        attribute: 'disable-collapse'
+    })
+], AtomicCommerceBreadbox.prototype, "disableCollapse", void 0);
 _ts_decorate([
     (0, decorators_js_namespaceObject.property)({
         type: Number,

package/dist/cjs/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.cjs

@@ -289,6 +289,7 @@ class AtomicCommerceProductList extends (0, children_update_complete_mixin_cjs_n
                     firstItem,
                     host: this,
                     itemRenderingFunction: this.itemRenderingFunction,
+                    label: this.bindings.i18n.t('view-products'),
                     listClasses,
                     logger: this.bindings.engine.logger,
                     templateContentForFirstItem

package/dist/cjs/components/commerce/atomic-product-image/atomic-product-image.cjs

@@ -172,7 +172,10 @@ class AtomicProductImage extends external_lit_namespaceObject.LitElement {
                         navigateToImage: (index)=>this.navigateToImage(index),
                         nextImage: ()=>this.nextImage(),
                         previousImage: ()=>this.previousImage(),
-                        numberOfImages: this.numberOfImages
+                        numberOfImages: this.numberOfImages,
+                        label: this.bindings.i18n.t('image-gallery', {
+                            itemName: this.product.ec_name
+                        })
                     }
                 })(this.renderCurrentImage(this.images[this.currentImage]))))}
     `;

package/dist/cjs/components/common/atomic-citation/atomic-citation.cjs

@@ -61,6 +61,11 @@ class AtomicCitation extends external_lit_namespaceObject.LitElement {
         super.disconnectedCallback();
         this.cleanupPopper();
         this.clearTimers();
+        this.removeEventListener('keydown', this.handleKeyDown);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.handleKeyDown);
     }
     sendHoverAnalytics() {
         if (this.isOpen) {
@@ -188,6 +193,8 @@ class AtomicCitation extends external_lit_namespaceObject.LitElement {
         }, this.closePopover = ()=>{
             this.clearTimers();
             this.isOpen = false;
+        }, this.handleKeyDown = (e)=>{
+            if ('Escape' === e.key && this.isOpen) this.closePopover();
         }, this.delayedClosePopover = ()=>{
             this.clearTimers();
             this.closePopoverTimeout = setTimeout(()=>{

package/dist/cjs/components/common/atomic-generated-answer-feedback-modal/atomic-generated-answer-feedback-modal.cjs

@@ -196,6 +196,19 @@ class AtomicGeneratedAnswerFeedbackModal extends external_lit_namespaceObject.Li
       </div>
     `;
     }
+    renderRequiredFieldsAlert() {
+        return (0, external_lit_namespaceObject.html)`
+      <span
+        class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
+            'sr-only': true,
+            hidden: !this.answerEvaluationRequired
+        })}
+        role="alert"
+      >
+        ${this.bindings.i18n.t('required-fields-error')}
+      </span>
+    `;
+    }
     renderFeedbackOptions() {
         return (0, external_lit_namespaceObject.html)`
       <fieldset>
@@ -225,7 +238,6 @@ class AtomicGeneratedAnswerFeedbackModal extends external_lit_namespaceObject.Li
                   class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
                 'options flex flex-shrink-0 text-base': true
             })}
-                  aria-label=${this.bindings.i18n.t(localeKey)}
                 >
                   ${this.renderFeedbackOption('yes', correspondingAnswer)}
                   ${this.renderFeedbackOption('unknown', correspondingAnswer)}
@@ -288,8 +300,8 @@ class AtomicGeneratedAnswerFeedbackModal extends external_lit_namespaceObject.Li
             'flex flex-col gap-8 leading-4': true
         })}
       >
-        ${this.renderFeedbackOptions()} ${this.renderLinkToCorrectAnswerField()}
-        ${this.renderAddNotesField()}
+        ${this.renderRequiredFieldsAlert()} ${this.renderFeedbackOptions()}
+        ${this.renderLinkToCorrectAnswerField()} ${this.renderAddNotesField()}
       </form>
     `;
     }
@@ -307,9 +319,14 @@ class AtomicGeneratedAnswerFeedbackModal extends external_lit_namespaceObject.Li
             'w-48': true
         })}
         ></atomic-icon>
-        <p class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
+        <p
+          class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
             'text-base': true
-        })}>
+        })}
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+        >
           ${this.bindings.i18n.t('generated-answer-feedback-success')}
         </p>
       </div>
@@ -332,8 +349,10 @@ class AtomicGeneratedAnswerFeedbackModal extends external_lit_namespaceObject.Li
             'required-label text-base': true
         })}>
             <span class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({
-            'text-error mr-0.5': true
-        })}>*</span>
+            'text-error-red mr-0.5': true
+        })}
+              >*</span
+            >
             ${this.bindings.i18n.t('required-fields')}
           </div>
           <div class=${(0, multi_class_map_cjs_namespaceObject.multiClassMap)({

package/dist/cjs/components/common/atomic-tab-button/atomic-tab-button.cjs

@@ -28,7 +28,6 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const external_lit_namespaceObject = require("lit");
 const decorators_js_namespaceObject = require("lit/decorators.js");
-const external_button_cjs_namespaceObject = require("../button.cjs");
 const error_guard_cjs_namespaceObject = require("../../../decorators/error-guard.cjs");
 const with_tailwind_styles_cjs_namespaceObject = require("../../../decorators/with-tailwind-styles.cjs");
 const light_dom_cjs_namespaceObject = require("../../../mixins/light-dom.cjs");
@@ -44,17 +43,32 @@ function _ts_metadata(k, v) {
 class AtomicTabButton extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(external_lit_namespaceObject.LitElement) {
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('role', 'listitem');
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeydown);
+        this.updateHostAttributes();
         this.updateHostClasses();
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
     updated(changedProperties) {
         if (changedProperties.has('active')) {
-            this.setAttribute('aria-current', this.active ? 'true' : 'false');
-            this.setAttribute('part', this.active ? 'button-container-active' : 'button-container');
+            this.updateHostAttributes();
             this.updateHostClasses();
         }
     }
+    updateHostAttributes() {
+        this.setAttribute('role', 'tab');
+        this.setAttribute('aria-selected', this.active ? 'true' : 'false');
+        this.setAttribute('part', this.active ? 'button-container-active' : 'button-container');
+        this.tabIndex = this.active ? 0 : -1;
+    }
     updateHostClasses() {
+        this.classList.add('cursor-pointer', 'hover:text-primary', 'focus-visible:text-primary', 'focus-visible:outline-none');
+        this.classList.toggle('text-on-background', this.active);
+        this.classList.toggle('text-neutral-dark', !this.active);
         this.classList.toggle('relative', this.active);
         this.classList.toggle('after:block', this.active);
         this.classList.toggle('after:w-full', this.active);
@@ -67,29 +81,33 @@ class AtomicTabButton extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(e
     render() {
         const buttonClasses = [
             'relative',
+            'inline-block',
             'overflow-hidden',
             'w-full',
             'truncate',
             'px-2',
             'pb-1',
             'text-xl',
-            'sm:px-6',
-            'hover:text-primary',
-            !this.active && 'text-neutral-dark'
+            'sm:px-6'
         ].filter(Boolean).join(' ');
         return (0, external_lit_namespaceObject.html)`
-      ${(0, external_button_cjs_namespaceObject.renderButton)({
-            props: {
-                style: 'text-transparent',
-                class: buttonClasses,
-                part: this.active ? 'tab-button-active' : 'tab-button',
-                onClick: this.select
-            }
-        })((0, external_lit_namespaceObject.html)`${this.label}`)}
+      <span
+        class=${buttonClasses}
+        part=${this.active ? 'tab-button-active' : 'tab-button'}
+      >
+        ${this.label}
+      </span>
     `;
     }
     constructor(...args){
-        super(...args), this.active = false;
+        super(...args), this.active = false, this.handleClick = ()=>{
+            this.select();
+        }, this.handleKeydown = (event)=>{
+            if ('Enter' === event.key || ' ' === event.key) {
+                event.preventDefault();
+                this.select();
+            }
+        };
     }
 }
 _ts_decorate([

package/dist/cjs/components/common/carousel.cjs

@@ -111,7 +111,9 @@ const renderCarousel = ({ props })=>(children)=>{
             ${renderPreviousButton(numberOfPages, previousPage, props.bindings)}
             ${renderNextButton(numberOfPages, nextPage, props.bindings)}
           </div>
-          <div class="carousel-items">${children}</div>
+          <div class="carousel-items" aria-live="polite" aria-atomic="false">
+            ${children}
+          </div>
         </div>
         ${renderIndicators(numberOfPages, currentPage)}
       </div>

package/dist/cjs/components/common/image-carousel/image-carousel.cjs

@@ -91,9 +91,15 @@ const renderImageCarousel = ({ props })=>{
         if (!children || children === external_lit_namespaceObject.nothing) return external_lit_namespaceObject.nothing;
         return (0, external_lit_namespaceObject.html)` <div
       class="relative flex w-full min-w-full items-center justify-center"
+      role="region"
+      aria-roledescription="carousel"
+      aria-label=${props.label}
     >
-      ${renderPreviousButton()} ${children} ${renderNextButton()}
-      ${renderIndicators()}
+      ${renderPreviousButton()}
+      <div class="w-full h-full" aria-live="polite" aria-atomic="false">
+        ${children}
+      </div>
+      ${renderNextButton()} ${renderIndicators()}
     </div>`;
     };
 };

package/dist/cjs/components/common/item-list/table-layout.cjs

@@ -35,10 +35,14 @@ const map_js_namespaceObject = require("lit/directives/map.js");
 const ref_js_namespaceObject = require("lit/directives/ref.js");
 const external_table_element_utils_cjs_namespaceObject = require("../table-element-utils.cjs");
 const renderTableLayout = ({ props })=>{
-    const { host, listClasses, logger } = props;
+    const { host, listClasses, logger, label } = props;
     const fieldColumns = getFieldTableColumns(props);
     if (!fieldColumns.length) logger.error('atomic-table-element elements missing in the template to display columns.', host);
-    return (children)=>(0, external_lit_namespaceObject.html)`<table class="list-root ${listClasses}" part="result-table">
+    return (children)=>(0, external_lit_namespaceObject.html)`<table
+      class="list-root ${listClasses}"
+      part="result-table"
+      aria-label=${label}
+    >
       <thead part="result-table-heading">
         <tr part="result-table-heading-row">
           ${(0, map_js_namespaceObject.map)(fieldColumns, (column)=>(0, external_lit_namespaceObject.html)`<th part="result-table-heading-cell">

package/dist/cjs/components/search/atomic-breadbox/atomic-breadbox.cjs

@@ -57,7 +57,8 @@ class AtomicBreadbox extends external_lit_namespaceObject.LitElement {
     initialize() {
         this.breadcrumbManager = (0, headless_namespaceObject.buildBreadcrumbManager)(this.bindings.engine);
         this.facetManager = (0, headless_namespaceObject.buildFacetManager)(this.bindings.engine);
-        if (window.ResizeObserver && this.parentElement) {
+        if (this.disableCollapse) this.isCollapsed = false;
+        else if (window.ResizeObserver && this.parentElement) {
             this.resizeObserver = new ResizeObserver(()=>this.adaptBreadcrumbs());
             this.resizeObserver.observe(this.parentElement);
         }
@@ -77,7 +78,7 @@ class AtomicBreadbox extends external_lit_namespaceObject.LitElement {
                 i18n: this.bindings.i18n
             }
         })((0, external_lit_namespaceObject.html)`${this.renderBreadcrumbs(breadcrumbs)}
-      ${(0, breadcrumb_show_more_cjs_namespaceObject.renderBreadcrumbShowMore)({
+      ${this.disableCollapse ? external_lit_namespaceObject.nothing : (0, external_lit_namespaceObject.html)`${(0, breadcrumb_show_more_cjs_namespaceObject.renderBreadcrumbShowMore)({
             props: {
                 refCallback: async (el)=>{
                     await this.breadcrumbShowLessFocus.setTarget(el);
@@ -96,7 +97,7 @@ class AtomicBreadbox extends external_lit_namespaceObject.LitElement {
                 })
             }
         })}
-      ${(0, breadcrumb_show_less_cjs_namespaceObject.renderBreadcrumbShowLess)({
+          ${(0, breadcrumb_show_less_cjs_namespaceObject.renderBreadcrumbShowLess)({
             props: {
                 onShowLess: ()=>{
                     this.breadcrumbShowLessFocus.focusOnNextTarget();
@@ -105,7 +106,7 @@ class AtomicBreadbox extends external_lit_namespaceObject.LitElement {
                 isCollapsed: this.isCollapsed,
                 i18n: this.bindings.i18n
             }
-        })}
+        })}`}
       ${(0, breadcrumb_clear_all_cjs_namespaceObject.renderBreadcrumbClearAll)({
             props: {
                 refCallback: async (ref)=>{
@@ -144,7 +145,7 @@ class AtomicBreadbox extends external_lit_namespaceObject.LitElement {
         this.breadcrumbs.forEach((breadcrumb)=>this.show(breadcrumb));
     }
     adaptBreadcrumbs() {
-        if (!this.breadcrumbs.length) return;
+        if (this.disableCollapse || !this.breadcrumbs.length) return;
         this.showAllBreadcrumbs();
         if (!this.isCollapsed) return void this.updateShowLessDisplay();
         this.hideOverflowingBreadcrumbs();
@@ -288,7 +289,7 @@ class AtomicBreadbox extends external_lit_namespaceObject.LitElement {
         });
     }
     constructor(){
-        super(), this.lastRemovedBreadcrumbIndex = 0, this.numberOfBreadcrumbs = 0, this.numberOfCollapsedBreadcrumbs = 0, this.isCollapsed = true, this.showMoreText = '', this.breadboxAriaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'breadbox', true), this.pathLimit = 3;
+        super(), this.lastRemovedBreadcrumbIndex = 0, this.numberOfBreadcrumbs = 0, this.numberOfCollapsedBreadcrumbs = 0, this.isCollapsed = true, this.showMoreText = '', this.disableCollapse = false, this.breadboxAriaMessage = new accessibility_utils_cjs_namespaceObject.AriaLiveRegionController(this, 'breadbox', true), this.pathLimit = 3;
         new validate_props_controller_cjs_namespaceObject.ValidatePropsController(this, ()=>({
                 pathLimit: this.pathLimit
             }), AtomicBreadbox.propsSchema);
@@ -332,6 +333,12 @@ _ts_decorate([
 _ts_decorate([
     (0, decorators_js_namespaceObject.state)()
 ], AtomicBreadbox.prototype, "showMoreText", void 0);
+_ts_decorate([
+    (0, decorators_js_namespaceObject.property)({
+        type: Boolean,
+        attribute: 'disable-collapse'
+    })
+], AtomicBreadbox.prototype, "disableCollapse", void 0);
 _ts_decorate([
     (0, decorators_js_namespaceObject.property)({
         type: Number,

package/dist/cjs/components/search/atomic-result-list/atomic-result-list.cjs

@@ -238,6 +238,7 @@ class AtomicResultList extends (0, children_update_complete_mixin_cjs_namespaceO
                     firstItem,
                     host: this,
                     itemRenderingFunction: this.itemRenderingFunction,
+                    label: this.bindings.i18n.t('view-results'),
                     listClasses,
                     logger: this.bindings.engine.logger,
                     templateContentForFirstItem

package/dist/cjs/components/search/atomic-tab-manager/atomic-tab-manager.cjs

@@ -93,10 +93,11 @@ class AtomicTabManager extends external_lit_namespaceObject.LitElement {
         exportparts="popover-button, value-label, arrow-icon, backdrop, overflow-tabs, popover-tab"
       >
         <div
-          role="list"
+          role="tablist"
           aria-label="tab-area"
           part="tab-area"
           class="border-neutral mb-2 flex w-full flex-row border-b"
+          @keydown=${this.handleTablistKeydown}
         >
           ${this.tabs.map((tab)=>{
             const isActive = this.tabManagerState.activeTab === tab.name;
@@ -114,6 +115,20 @@ class AtomicTabManager extends external_lit_namespaceObject.LitElement {
       </atomic-tab-bar>
     `;
     }
+    handleTablistKeydown(event) {
+        const tabs = Array.from(event.currentTarget.querySelectorAll('[role="tab"]'));
+        const currentIndex = tabs.indexOf(event.target);
+        if (-1 === currentIndex) return;
+        let nextIndex = null;
+        if ('ArrowRight' === event.key) nextIndex = (currentIndex + 1) % tabs.length;
+        else if ('ArrowLeft' === event.key) nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        else if ('Home' === event.key) nextIndex = 0;
+        else if ('End' === event.key) nextIndex = tabs.length - 1;
+        if (null !== nextIndex) {
+            event.preventDefault();
+            tabs[nextIndex].focus();
+        }
+    }
     constructor(...args){
         super(...args), this.tabs = [], this.clearFiltersOnTabChange = false;
     }

package/dist/cjs/global/environment.cjs

@@ -33,7 +33,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.58.1",
+        version: "3.59.1",
         headlessVersion
     };
 }