@coveo/atomic-react 3.11.44 → 3.11.46

package/dist/cjs/atomic-react.cjs

@@ -4910,6 +4910,46 @@ const booleanConverter = {
     }
 };
 
+const renderFacetValueLabelHighlight = ({ props })=>{
+    const classNames = tw({
+        'value-label peer-hover:text-error truncate': true,
+        'font-bold': props.isSelected || !!props.isExcluded
+    });
+    return lit.html`<span
+    title=${props.displayValue}
+    part="value-label"
+    class=${multiClassMap(classNames)}
+    .innerHTML=${highlightSearchResult(props.displayValue, props.searchQuery)}
+  ></span>`;
+};
+
+const renderCategoryFacetActiveValue = ({ props: { displayValue, numberOfResults, i18n, searchQuery, isLeafValue, setRef } })=>(children)=>{
+        const count = numberOfResults.toLocaleString(i18n.language);
+        return lit.html`${keyed_js.keyed(displayValue, lit.html`<li class="contents">
+        <span
+          part="active-parent ${isLeafValue ? 'leaf-value' : 'node-value'}"
+          class="text-primary flex w-full items-center truncate px-2 py-2.5 text-left"
+          aria-current="true"
+          tabindex="-1"
+          ${ref_js.ref(setRef)}
+        >
+          ${renderFacetValueLabelHighlight({
+            props: {
+                displayValue,
+                searchQuery,
+                isSelected: true
+            }
+        })}
+          <span part="value-count" class="value-count">
+            ${i18n.t('between-parentheses', {
+            text: count
+        })}
+          </span>
+        </span>
+        ${children}
+      </li>`)}`;
+    };
+
 var arrow_left_rounded = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.5 4.8-4.3 4.5c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0s.3-.9 0-1.3l-3.7-4 3.7-3.9c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z\"/></svg>";
 
 const getAllCategoriesLocalizedLabel = ({ facetId, field, i18n })=>{
@@ -4970,91 +5010,6 @@ const renderCategoryFacetParentButton = ({ props })=>{
   `);
 };
 
-const renderFacetValueLabelHighlight = ({ props })=>{
-    const classNames = tw({
-        'value-label peer-hover:text-error truncate': true,
-        'font-bold': props.isSelected || !!props.isExcluded
-    });
-    return lit.html`<span
-    title=${props.displayValue}
-    part="value-label"
-    class=${multiClassMap(classNames)}
-    .innerHTML=${highlightSearchResult(props.displayValue, props.searchQuery)}
-  ></span>`;
-};
-
-const renderFacetValueLink = ({ props })=>(children)=>{
-        const count = props.numberOfResults.toLocaleString(props.i18n.language);
-        const ariaLabel = props.i18n.t('facet-value', {
-            value: props.displayValue,
-            count: props.numberOfResults,
-            formattedCount: count,
-            interpolation: {
-                escapeValue: false
-            }
-        });
-        let part = props.part ?? `value-link${props.isSelected ? ' value-link-selected' : ''}`;
-        if (props.additionalPart) part += ` ${props.additionalPart}`;
-        return lit.html`
-      ${keyed_js.keyed(props.displayValue, lit.html`<li class=${ifDefined_js.ifDefined(props.class)}>
-          ${renderButton({
-            props: {
-                style: 'text-neutral',
-                part,
-                onClick: ()=>props.onClick(),
-                class: 'group flex w-full items-center truncate px-2 py-2.5 text-left focus-visible:outline-none',
-                ariaPressed: props.isSelected ? 'true' : 'false',
-                ariaLabel,
-                ref: props.buttonRef
-            }
-        })(lit.html`${children}<span part="value-count" class="value-count">
-                ${props.i18n.t('between-parentheses', {
-            text: count
-        })}
-              </span>`)}
-          ${props.subList}
-        </li>`)}
-    `;
-    };
-
-const renderCategoryFacetValueLink = ({ props: { displayValue, numberOfResults, i18n, onClick, isParent, isSelected, searchQuery, isLeafValue, setRef } })=>(children)=>{
-        const partNames = [];
-        if (isParent) partNames.push('active-parent');
-        else partNames.push(`value-link${isSelected ? ' value-link-selected' : ''}`);
-        if (isLeafValue) partNames.push('leaf-value');
-        else partNames.push('node-value');
-        return lit.html`${renderFacetValueLink({
-            props: {
-                displayValue,
-                numberOfResults,
-                i18n,
-                onClick,
-                isSelected,
-                searchQuery,
-                part: partNames.join(' '),
-                class: 'contents',
-                buttonRef: (element)=>{
-                    setRef?.(element);
-                },
-                subList: children
-            }
-        })(renderFacetValueLabelHighlight({
-            props: {
-                displayValue,
-                searchQuery,
-                isSelected
-            }
-        }))}`;
-    };
-
-const renderCategoryFacetParentValueLink = ({ props })=>renderCategoryFacetValueLink({
-        props: {
-            ...props,
-            isParent: true,
-            isSelected: true
-        }
-    });
-
 const renderCategoryFacetSearchResultsContainer = ()=>(children)=>lit.html`<ul part="search-results" class="mt-3">
       ${children}
     </ul>`;
@@ -5149,8 +5104,97 @@ const renderCategoryFacetSearchValue = ({ props })=>{
   </li>`;
 };
 
+const renderCategoryFacetSelectedValue = ({ props: { displayValue, label, i18n, onClearFilters } })=>lit.html`<div part="selected-value" class="mt-3 flex items-center justify-between gap-2">
+    <span
+      part="selected-value-pill"
+      title=${displayValue}
+      class="bg-neutral-light truncate rounded-md px-2 py-1 text-sm"
+      >${displayValue}</span
+    >
+    ${renderButton({
+        props: {
+            part: 'selected-value-clear-button',
+            style: 'text-primary',
+            class: 'flex shrink-0 items-center p-1 text-sm',
+            ariaLabel: i18n.t('clear-filters-for-facet', {
+                count: 1,
+                label: i18n.t(label)
+            }),
+            onClick: onClearFilters
+        }
+    })(lit.html`<atomic-icon
+          part="selected-value-clear-button-icon"
+          class="mr-1 h-2 w-2"
+          .icon=${images_close}
+        ></atomic-icon>
+        <span>${i18n.t('clear')}</span>`)}
+  </div>`;
+
 const renderCategoryFacetTreeValueContainer = ()=>(children)=>lit.html`<li class="contents">${children}</li>`;
 
+const renderFacetValueLink = ({ props })=>(children)=>{
+        const count = props.numberOfResults.toLocaleString(props.i18n.language);
+        const ariaLabel = props.i18n.t('facet-value', {
+            value: props.displayValue,
+            count: props.numberOfResults,
+            formattedCount: count,
+            interpolation: {
+                escapeValue: false
+            }
+        });
+        let part = props.part ?? `value-link${props.isSelected ? ' value-link-selected' : ''}`;
+        if (props.additionalPart) part += ` ${props.additionalPart}`;
+        return lit.html`
+      ${keyed_js.keyed(props.displayValue, lit.html`<li class=${ifDefined_js.ifDefined(props.class)}>
+          ${renderButton({
+            props: {
+                style: 'text-neutral',
+                part,
+                onClick: ()=>props.onClick(),
+                class: 'group flex w-full items-center truncate px-2 py-2.5 text-left focus-visible:outline-none',
+                ariaPressed: props.isSelected ? 'true' : 'false',
+                ariaLabel,
+                ref: props.buttonRef
+            }
+        })(lit.html`${children}<span part="value-count" class="value-count">
+                ${props.i18n.t('between-parentheses', {
+            text: count
+        })}
+              </span>`)}
+          ${props.subList}
+        </li>`)}
+    `;
+    };
+
+const renderCategoryFacetValueLink = ({ props: { displayValue, numberOfResults, i18n, onClick, isSelected, searchQuery, isLeafValue, setRef } })=>(children)=>{
+        const partNames = [
+            `value-link${isSelected ? ' value-link-selected' : ''}`,
+            isLeafValue ? 'leaf-value' : 'node-value'
+        ];
+        return lit.html`${renderFacetValueLink({
+            props: {
+                displayValue,
+                numberOfResults,
+                i18n,
+                onClick,
+                isSelected,
+                searchQuery,
+                part: partNames.join(' '),
+                class: 'contents',
+                buttonRef: (element)=>{
+                    setRef?.(element);
+                },
+                subList: children
+            }
+        })(renderFacetValueLabelHighlight({
+            props: {
+                displayValue,
+                searchQuery,
+                isSelected
+            }
+        }))}`;
+    };
+
 const styles$r = lit.css`/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.value-count{margin-left:calc(var(--spacing,.25rem)*1.5);color:var(--atomic-neutral-dark)}[part=value-exclude-button]+.value-count{margin-right:calc(var(--spacing,.25rem)*2)}:host(:state(hidden)){display:none}:host(.popover-nested){min-width:var(--container-2xs,18rem)}:host(.popover-nested)::part(label-button){display:none}:host(.popover-nested)::part(facet){--tw-shadow:0px 2px 8px var(--tw-shadow-color,#e5e8e8bf);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host(.popover-nested)::part(values){max-height:calc(var(--spacing,.25rem)*96);margin-top:0;overflow-y:auto}:host(.popover-nested)::part(search-wrapper){margin-bottom:calc(var(--spacing,.25rem)*2)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
 const facet_common_tw_css = styles$r;
 
@@ -8361,7 +8405,7 @@ function getWindow$1() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.61.4",
+        version: "3.62.0",
         headlessVersion
     };
 }
@@ -18625,8 +18669,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 +19328,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 +19497,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 +19529,7 @@ const renderCopyButton = ({ props })=>{
     return renderButton({
         props: {
             title: props.title,
+            ariaLabel: props.title,
             part: 'copy-button',
             style: 'text-transparent',
             class: classes.join(' '),
@@ -19458,7 +19537,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 +19566,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 +19575,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 +19689,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 +19737,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 +19778,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 +20377,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 +20411,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 +20574,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 +22220,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 +22251,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 +22269,8 @@ const renderAnswerContent = ({ props })=>{
         props: {
             answer,
             answerContentFormat,
-            isStreaming: !!isStreaming
+            isStreaming: !!isStreaming,
+            id: collapsible ? GENERATED_CONTENT_ID : void 0
         }
     })(lit.html`
               ${renderSourceCitations({
@@ -22194,7 +22298,8 @@ const renderAnswerContent = ({ props })=>{
         props: {
             i18n,
             onClick: onClickShowButton,
-            isCollapsed: !expanded
+            isCollapsed: !expanded,
+            controlsId: GENERATED_CONTENT_ID
         }
     }) : lit.nothing}
               </div>
@@ -25800,6 +25905,21 @@ let AtomicCategoryFacet$1 = class AtomicCategoryFacet extends lit.LitElement {
             }
         });
     }
+    renderSelectedValue() {
+        const activeValue = this.facetState.selectedValueAncestry.at(-1);
+        if (!activeValue) return lit.nothing;
+        return renderCategoryFacetSelectedValue({
+            props: {
+                displayValue: getFieldValueCaption(this.field, activeValue.value, this.bindings.i18n),
+                label: this.label,
+                i18n: this.bindings.i18n,
+                onClearFilters: ()=>{
+                    this.focusTargets.activeValueFocus.focusAfterSearch();
+                    this.facet.deselectAll();
+                }
+            }
+        });
+    }
     renderValuesTree(valuesAsTrees, isRoot) {
         if (!this.hasParents) return this.renderChildren();
         if (isRoot) return renderCategoryFacetTreeValueContainer()(lit.html`
@@ -25844,16 +25964,12 @@ let AtomicCategoryFacet$1 = class AtomicCategoryFacet extends lit.LitElement {
         const activeParent = valuesAsTrees[0];
         const activeParentDisplayValue = getFieldValueCaption(this.field, activeParent.value, this.bindings.i18n);
         return lit.html`
-      ${renderCategoryFacetParentValueLink({
+      ${renderCategoryFacetActiveValue({
             props: {
                 displayValue: activeParentDisplayValue,
                 numberOfResults: activeParent.numberOfResults,
                 i18n: this.bindings.i18n,
                 isLeafValue: activeParent.isLeafValue,
-                onClick: ()=>{
-                    this.focusTargets.activeValueFocus.focusAfterSearch();
-                    this.facet.deselectAll();
-                },
                 searchQuery: this.facetState.facetSearch.query,
                 setRef: (el)=>{
                     this.focusTargets.activeValueFocus.setTarget(el);
@@ -25876,7 +25992,6 @@ let AtomicCategoryFacet$1 = class AtomicCategoryFacet extends lit.LitElement {
                     this.focusTargets.activeValueFocus.focusAfterSearch();
                     this.facet.toggleSelect(facetValue);
                 },
-                isParent: false,
                 isSelected,
                 searchQuery: this.facetState.facetSearch.query,
                 isLeafValue: facetValue.isLeafValue,
@@ -25958,7 +26073,7 @@ let AtomicCategoryFacet$1 = class AtomicCategoryFacet extends lit.LitElement {
         return renderFacetContainer()(lit.html`
       ${this.renderHeader()}
       ${when_js.when(!this.isCollapsed, ()=>lit.html`
-          ${this.renderSearchInput()}
+          ${this.renderSearchInput()} ${this.renderSelectedValue()}
           ${when_js.when(shouldDisplaySearchResults(facetSearch), ()=>lit.html`
               ${when_js.when(facetSearch.values.length > 0, ()=>renderFacetValuesGroup({
                         props: {
@@ -28602,6 +28717,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 +28742,9 @@ let AtomicGeneratedAnswer$1 = class AtomicGeneratedAnswer extends lit.LitElement
       </div>
     `;
     }
+    get shouldAnnounceAnswerStatus() {
+        return !this.areFollowUpsEnabled;
+    }
     get hasNoAnswerGenerated() {
         return this.controller.hasNoAnswerGenerated;
     }
@@ -28650,11 +28769,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 +28970,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 +28978,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 = '';