@coveo/atomic-react 3.11.44 → 3.11.45

package/dist/cjs/recommendation/atomic-react.cjs

@@ -8361,7 +8361,7 @@ function getWindow$1() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.61.4",
+        version: "3.61.5",
         headlessVersion
     };
 }
@@ -18625,8 +18625,7 @@ const customRenderer = {
         return `<em part="answer-emphasis">${text}</em>`;
     },
     heading (text, level) {
-        const plainText = toInlinePlainText(text);
-        return `<div part="answer-heading-${level}" aria-label="${plainText}">${text}</div>`;
+        return `<div part="answer-heading-${level}" role="heading" aria-level="${level}">${text}</div>`;
     },
     html (text) {
         return escapeHtml(text);
@@ -19285,6 +19284,37 @@ const generated_answer_tw_css = [
 
 const atomic_generated_answer_tw_css = generated_answer_tw_css;
 
+const SILENT = {
+    message: '',
+    assertive: false
+};
+const getAnswerAnnouncement = (answer, i18n)=>{
+    if (!answer) return SILENT;
+    if (answer.error) {
+        const errorMessageKey = answer.error.isSseTurnLimitReachedError?.() ? 'generated-answer-error-turn-limit-reached' : 'generated-answer-error-generic';
+        return {
+            message: i18n.t(errorMessageKey),
+            assertive: true
+        };
+    }
+    if (answer.cannotAnswer) return {
+        message: i18n.t('generated-answer-cannot-generate-answer'),
+        assertive: true
+    };
+    if (answer.isStreaming || answer.isLoading) return {
+        message: i18n.t('generating-answer'),
+        assertive: false
+    };
+    if (answer.answer?.trim()) return {
+        message: i18n.t('answer-generated', {
+            answer: markdownToPlainText(answer.answer)
+        }),
+        assertive: false
+    };
+    return SILENT;
+};
+const isSettledAnswer = (answer)=>Boolean(answer && !answer.isStreaming && !answer.isLoading && !answer.error && !answer.cannotAnswer && answer.answer?.trim());
+
 const styles$8 = lit.css`/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */:host{display:inline}a{color:var(--atomic-primary);text-decoration-line:none}a [part=answer-link-text]{text-decoration-line:underline}.icon-wrapper{vertical-align:text-bottom;width:1em;height:1em;display:inline-block}`;
 const atomic_generated_answer_inline_link_tw_css = styles$8;
 
@@ -19423,7 +19453,11 @@ const renderGeneratedTextContent = ({ props })=>lit.html`
   `;
 
 const renderGeneratedContentContainer = ({ props })=>(children)=>lit.html`
-    <div part="generated-container">
+    <div
+      part="generated-container"
+      id=${ifDefined_js.ifDefined(props.id)}
+      aria-busy=${props.isStreaming ? 'true' : 'false'}
+    >
       ${'text/markdown' === props.answerContentFormat ? renderGeneratedMarkdownContent({
             props: {
                 answer: props.answer,
@@ -19451,6 +19485,7 @@ const renderCopyButton = ({ props })=>{
     return renderButton({
         props: {
             title: props.title,
+            ariaLabel: props.title,
             part: 'copy-button',
             style: 'text-transparent',
             class: classes.join(' '),
@@ -19458,7 +19493,7 @@ const renderCopyButton = ({ props })=>{
         }
     })(lit.html`
     <div class="icon-container text-neutral-dark">
-      <atomic-icon class="w-5" .icon=${copy}></atomic-icon>
+      <atomic-icon class="w-5" .icon=${copy} aria-hidden="true"></atomic-icon>
     </div>
   `);
 };
@@ -19487,6 +19522,7 @@ const renderFeedbackButton = ({ props })=>{
     return lit.html`<button
     type="button"
     title=${props.title}
+    aria-label=${props.title}
     part="feedback-button"
     class=${classNames}
     aria-pressed=${props.active ? 'true' : 'false'}
@@ -19495,7 +19531,7 @@ const renderFeedbackButton = ({ props })=>{
         })}
     @click=${props.onClick}
   >
-    <atomic-icon class=${iconClassNames} .icon=${thumbs}></atomic-icon>
+    <atomic-icon class=${iconClassNames} .icon=${thumbs} aria-hidden="true"></atomic-icon>
   </button>`;
 };
 
@@ -19609,6 +19645,24 @@ class AtomicGeneratedAnswerContent extends lit.LitElement {
       </div>
     `;
     }
+    updated() {
+        this.announceAnswerStatus();
+    }
+    announceAnswerStatus() {
+        if (!this.i18n || !this.generatedAnswer) return;
+        const { message, assertive } = getAnswerAnnouncement(this.generatedAnswer, this.i18n);
+        if (!this.hasObservedAnswer) {
+            this.hasObservedAnswer = true;
+            if (isSettledAnswer(this.generatedAnswer)) {
+                this.lastAnnouncedMessage = message;
+                return;
+            }
+        }
+        if (message === this.lastAnnouncedMessage) return;
+        this.lastAnnouncedMessage = message;
+        if (assertive) this.ariaErrorMessage.message = message;
+        else this.ariaMessage.message = message;
+    }
     renderFeedbackAndCopyButtons(answerId) {
         return lit.html`
       <div class="mt-4" part="feedback-and-copy-buttons">
@@ -19639,9 +19693,11 @@ class AtomicGeneratedAnswerContent extends lit.LitElement {
         try {
             await navigator.clipboard.writeText(answer);
             this.copyState = 'success';
+            this.ariaCopyMessage.message = this.i18n.t('generated-answer-copied');
             this.onCopyToClipboard(answerId);
         } catch (error) {
             this.copyState = 'error';
+            this.ariaCopyMessage.message = this.i18n.t('failed-to-copy-generated-answer');
             console.error(`Failed to copy to clipboard: ${error}`);
         }
         this.scheduleCopyReset();
@@ -19678,7 +19734,7 @@ class AtomicGeneratedAnswerContent extends lit.LitElement {
     `;
     }
     constructor(...args){
-        super(...args), this.answerId = '', this.renderCitations = ()=>lit.html``, this.onClickLike = ()=>{}, this.onClickDislike = ()=>{}, this.onCopyToClipboard = ()=>{}, this.copyState = 'idle';
+        super(...args), this.answerId = '', this.renderCitations = ()=>lit.html``, this.onClickLike = ()=>{}, this.onClickDislike = ()=>{}, this.onCopyToClipboard = ()=>{}, this.copyState = 'idle', this.ariaMessage = new AriaLiveRegionController(this, 'generated-answer', false, true), this.ariaErrorMessage = new AriaLiveRegionController(this, 'generated-answer-error', true), this.ariaCopyMessage = new AriaLiveRegionController(this, 'generated-answer-copy', true), this.hasObservedAnswer = false;
     }
 }
 AtomicGeneratedAnswerContent.styles = [
@@ -20277,7 +20333,7 @@ class AtomicGeneratedAnswerThreadItem extends lit.LitElement {
         const timelineConnectorClasses = "relative h-full w-px bg-neutral transition-colors duration-150 group-hover:bg-neutral-dark before:absolute before:left-0 before:top-[-8px] before:h-[8px] before:w-px before:bg-neutral before:transition-colors before:duration-150 group-hover:before:bg-neutral-dark before:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-[8px] after:w-px after:bg-neutral after:transition-colors after:duration-150 group-hover:after:bg-neutral-dark after:content-['']";
         return lit.html`
       <div class="group/title grid min-w-0 grid-cols-[10px_1fr] gap-x-3">
-        <div class="row-span-2 flex flex-col items-center">
+        <div class="row-span-2 flex flex-col items-center" aria-hidden="true">
           <div class=${timelineDotToggleClasses}>
             ${when_js.when(this.showTimelineDot, ()=>lit.html`
                 <span
@@ -20311,8 +20367,9 @@ class AtomicGeneratedAnswerThreadItem extends lit.LitElement {
                 >${this.title}</span
               >`)}
         </div>
-        <div id=${this.contentId} class="min-w-0 pl-2 py-1.5">
+        <div class="min-w-0 pl-2 py-1.5">
           <div
+            id=${this.contentId}
             class="mb-2"
             ?hidden=${!this.isExpanded}
             aria-hidden=${this.isExpanded ? 'false' : 'true'}
@@ -20473,7 +20530,7 @@ class AtomicGeneratedAnswerThread extends lit.LitElement {
     `;
         return lit.html`
       <li class="group/title grid min-w-0 grid-cols-[10px_1fr] gap-x-3">
-        <div class="row-span-2 flex flex-col items-center">
+        <div class="row-span-2 flex flex-col items-center" aria-hidden="true">
           <div class="flex justify-center items-center text-base h-[1lh] my-1.5">
             <span class=${timelineDotClasses}></span>
           </div>
@@ -22119,6 +22176,7 @@ const renderShowButton = ({ props })=>lit.html`${renderButton({
             part: 'answer-show-button',
             class: 'hidden items-center hover:bg-transparent',
             ariaExpanded: props.isCollapsed ? 'false' : 'true',
+            ariaControls: props.controlsId,
             onClick: props.onClick
         }
     })(lit.html`
@@ -22149,6 +22207,7 @@ const renderGeneratingAnswerLabel = ({ props })=>{
     `)}`;
 };
 
+const GENERATED_CONTENT_ID = 'generated-answer-content';
 const renderAnswerContent = ({ props })=>{
     const { i18n, generatedAnswer, collapsible, renderFeedbackAndCopyButtonsSlot, renderCitationsSlot, onRetry, onClickShowButton } = props;
     const { answer, isStreaming, citations, answerContentFormat, expanded, error } = generatedAnswer;
@@ -22166,7 +22225,8 @@ const renderAnswerContent = ({ props })=>{
         props: {
             answer,
             answerContentFormat,
-            isStreaming: !!isStreaming
+            isStreaming: !!isStreaming,
+            id: collapsible ? GENERATED_CONTENT_ID : void 0
         }
     })(lit.html`
               ${renderSourceCitations({
@@ -22194,7 +22254,8 @@ const renderAnswerContent = ({ props })=>{
         props: {
             i18n,
             onClick: onClickShowButton,
-            isCollapsed: !expanded
+            isCollapsed: !expanded,
+            controlsId: GENERATED_CONTENT_ID
         }
     }) : lit.nothing}
               </div>
@@ -28602,6 +28663,7 @@ let AtomicGeneratedAnswer$1 = class AtomicGeneratedAnswer extends lit.LitElement
                 'generated-answer-content-background': this.areFollowUpsEnabled,
                 'agent-scrollable': this.areFollowUpsEnabled
             })}
+                    tabindex=${this.areFollowUpsEnabled ? '0' : lit.nothing}
                   >
                     <article>${this.renderAnswerContent()}</article>
                   </div>
@@ -28626,6 +28688,9 @@ let AtomicGeneratedAnswer$1 = class AtomicGeneratedAnswer extends lit.LitElement
       </div>
     `;
     }
+    get shouldAnnounceAnswerStatus() {
+        return !this.areFollowUpsEnabled;
+    }
     get hasNoAnswerGenerated() {
         return this.controller.hasNoAnswerGenerated;
     }
@@ -28650,11 +28715,13 @@ let AtomicGeneratedAnswer$1 = class AtomicGeneratedAnswer extends lit.LitElement
     async copyToClipboard(answer) {
         await this.controller.copyToClipboard(answer, ()=>{
             this.copied = true;
+            this.ariaCopyMessage.message = this.bindings.i18n.t('generated-answer-copied');
             setTimeout(()=>{
                 this.copied = false;
             }, 2000);
         }, ()=>{
             this.copyError = true;
+            this.ariaCopyMessage.message = this.bindings.i18n.t('failed-to-copy-generated-answer');
             setTimeout(()=>{
                 this.copyError = false;
             }, 2000);
@@ -28849,7 +28916,7 @@ let AtomicGeneratedAnswer$1 = class AtomicGeneratedAnswer extends lit.LitElement
     constructor(){
         super(), this.DEFAULT_COLLAPSED_HEIGHT = 16, this.MAX_COLLAPSED_HEIGHT = 32, this.MIN_COLLAPSED_HEIGHT = 9, this.REQUIRED_FIELDS_TO_INCLUDE_IN_CITATIONS = [
             'filetype'
-        ], this.withToggle = false, this.collapsible = false, this.maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT, this.disableCitationAnchoring = false, this.tabsIncluded = [], this.tabsExcluded = [], this.copied = false, this.copyError = false, this.ariaMessage = new AriaLiveRegionController(this, 'generated-answer', false, true), this.ariaErrorMessage = new AriaLiveRegionController(this, 'generated-answer-error', true), this.onGeneratedAnswerStateUpdate = ()=>{
+        ], this.withToggle = false, this.collapsible = false, this.maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT, this.disableCitationAnchoring = false, this.tabsIncluded = [], this.tabsExcluded = [], this.copied = false, this.copyError = false, this.ariaMessage = new AriaLiveRegionController(this, 'generated-answer', false, true), this.ariaErrorMessage = new AriaLiveRegionController(this, 'generated-answer-error', true), this.ariaCopyMessage = new AriaLiveRegionController(this, 'generated-answer-copy', true), this.onGeneratedAnswerStateUpdate = ()=>{
             if (this.generatedAnswerState.isVisible !== this.controller.data.isVisible) {
                 this.controller.data = {
                     ...this.controller.data,
@@ -28857,6 +28924,7 @@ let AtomicGeneratedAnswer$1 = class AtomicGeneratedAnswer extends lit.LitElement
                 };
                 this.controller.writeStoredData(this.controller.data);
             }
+            if (!this.shouldAnnounceAnswerStatus) return;
             const status = this.controller.getGeneratedAnswerStatus();
             if (this.controller.isStatusAssertive()) {
                 this.ariaMessage.message = '';