elastic · paulinashakirova · Oct 30, 2025 · Jul 31, 2025 · Sep 15, 2025 · Sep 15, 2025
@@ -274,12 +274,15 @@ export const ReactControlExample = ({
   return (
     <>
       {dataViewNotFound && (
-        <EuiCallOut color="warning" iconType="warning">
+        <EuiCallOut announceOnMount color="warning" iconType="warning">
           <p>{`Install "Sample web logs" to run example`}</p>
         </EuiCallOut>
       )}
       {!dataViewNotFound && (
-        <EuiCallOut title="This example uses session storage to persist saved state and unsaved changes">
+        <EuiCallOut
+          announceOnMount
+          title="This example uses session storage to persist saved state and unsaved changes"
+        >
           <EuiButton
             color="accent"
             size="s"

@@ -169,6 +169,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
             >
               {showLibraryCallout && (
                 <EuiCallOut
+                  announceOnMount={false}
                   size="s"
                   color={'warning'}
                   title={

@@ -147,7 +147,12 @@ export const App = (props: { core: CoreStart; plugins: StartDependencies }) => {
               />
             </EuiFormRow>
             {currentWarnings.length ? (
-              <EuiCallOut title="Validation warnings" color="warning" iconType="warning">
+              <EuiCallOut
+                announceOnMount
+                title="Validation warnings"
+                color="warning"
+                iconType="warning"
+              >
                 <p>Here the list of warnings:</p>
                 <ul>
                   {currentWarnings.map((message) => (

@@ -66,7 +66,7 @@ export function App() {
               items={datatable.rows ?? []}
             />
           ) : (
-            <EuiCallOut color="success">
+            <EuiCallOut announceOnMount={false} color="success">
               <p>Click or press any key.</p>
             </EuiCallOut>
           )}

@@ -91,7 +91,12 @@ export const PageSimpleStringStream: FC = () => {
         <p data-test-subj="responseStreamString">{data}</p>
       </EuiText>
       {errors.length > 0 && (
-        <EuiCallOut title="Sorry, there was an error" color="danger" iconType="warning">
+        <EuiCallOut
+          announceOnMount
+          title="Sorry, there was an error"
+          color="danger"
+          iconType="warning"
+        >
           {errors.length === 1 ? (
             <p>{errors[0]}</p>
           ) : (

@@ -71,7 +71,7 @@ export function GetMessageRouteExample({ getMessageById }: Props) {
         </EuiFormRow>
 
         {error !== undefined ? (
-          <EuiCallOut color="danger" iconType="warning">
+          <EuiCallOut announceOnMount color="danger" iconType="warning">
             {error.message}
           </EuiCallOut>
         ) : null}

@@ -83,7 +83,7 @@ export function PostMessageRouteExample({ postMessage, addSuccessToast }: Props)
         </EuiFormRow>
 
         {error !== undefined ? (
-          <EuiCallOut color="danger" iconType="warning">
+          <EuiCallOut announceOnMount color="danger" iconType="warning">
             {error.message}
           </EuiCallOut>
         ) : null}

@@ -72,7 +72,7 @@ export function RandomNumberBetweenRouteExample({ fetchRandomNumberBetween }: Pr
         </EuiFormRow>
 
         {error !== undefined ? (
-          <EuiCallOut color="danger" iconType="warning">
+          <EuiCallOut announceOnMount color="danger" iconType="warning">
             {error.message}
           </EuiCallOut>
         ) : null}

@@ -53,7 +53,7 @@ export function RandomNumberRouteExample({ fetchRandomNumber }: Props) {
         </EuiButton>
 
         {error !== undefined ? (
-          <EuiCallOut color="danger" iconType="warning">
+          <EuiCallOut announceOnMount color="danger" iconType="warning">
             {JSON.stringify(error)}
           </EuiCallOut>
         ) : null}

@@ -41,6 +41,7 @@ export const ConfigurationFormControlled: React.FC<ConfigurationFormControlledPr
       {!!error && (
         <>
           <EuiCallOut
+            announceOnMount={false}
             color="danger"
             iconType="error"
             title={i18n.translate('cloud.connectionDetails.tab.apiKeys.error.title', {

@@ -26,7 +26,7 @@ export const ContentEditorFlyoutWarningsCallOut = ({
 
   return warningMessages?.length ? (
     <>
-      <EuiCallOut title={i18nTexts.title} color="warning">
+      <EuiCallOut announceOnMount={false} title={i18nTexts.title} color="warning">
         <ul>
           {warningMessages.map((message) => (
             <li>{message}</li>

@@ -61,7 +61,9 @@ export const MetadataForm: FC<React.PropsWithChildren<Props>> = ({
   return (
     <EuiForm isInvalid={isSubmitted && !isValid} error={getErrors()} data-test-subj="metadataForm">
       <ContentEditorFlyoutWarningsCallOut warningMessages={getWarnings()} />
-      {isReadonly && <EuiCallOut size="s" title={readonlyReason} iconType="info" />}
+      {isReadonly && (
+        <EuiCallOut announceOnMount={false} size="s" title={readonlyReason} iconType="info" />
+      )}
       <EuiFormRow
         label={i18n.translate('contentManagement.contentEditor.metadataForm.nameInputLabel', {
           defaultMessage: 'Name',

@@ -142,7 +142,7 @@ export const SettingsApplication = () => {
             ))}
           </EuiTabs>
           <EuiSpacer size="xl" />
-          <EuiCallOut title={selectedTab.callOutTitle} iconType="warning">
+          <EuiCallOut announceOnMount={false} title={selectedTab.callOutTitle} iconType="warning">
             <p>{selectedTab.callOutText}</p>
           </EuiCallOut>
         </>

@@ -147,6 +147,7 @@ export const ConnectorConfigurationComponent: FC<
         {!uncategorizedDisplayList.length && (
           <EuiFlexItem>
             <EuiCallOut
+              announceOnMount
               color="warning"
               title={i18n.translate(
                 'searchConnectors.configurationConnector.config.noConfigCallout.title',
@@ -235,6 +236,7 @@ export const ConnectorConfigurationComponent: FC<
         {!!error && (
           <EuiFlexItem>
             <EuiCallOut
+              announceOnMount
               color="danger"
               title={i18n.translate('searchConnectors.configurationConnector.config.error.title', {
                 defaultMessage: 'Connector error',

@@ -194,6 +194,7 @@ export const ConnectorSchedulingComponent: React.FC<ConnectorContentSchedulingPr
               {isDocumentLevelSecurityDisabled && (
                 <EuiFlexItem>
                   <EuiCallOut
+                    announceOnMount={false}
                     title={i18n.translate(
                       'searchConnectors.connectorScheduling.schedulePanel.documentLevelSecurity.dlsDisabledCallout.title',
                       { defaultMessage: 'Access control syncs not allowed' }

@@ -30,6 +30,7 @@ export const SyncJobCallouts: React.FC<SyncJobCalloutsProps> = ({ syncJob }) =>
       {!!syncJob.completed_at && (
         <EuiFlexItem>
           <EuiCallOut
+            announceOnMount
             color="success"
             iconType="check"
             title={i18n.translate('searchConnectors.syncJobs.flyout.completedTitle', {
@@ -49,6 +50,7 @@ export const SyncJobCallouts: React.FC<SyncJobCalloutsProps> = ({ syncJob }) =>
       {syncJob.status === SyncStatus.ERROR && (
         <EuiFlexItem>
           <EuiCallOut
+            announceOnMount
             color="danger"
             iconType="cross"
             title={i18n.translate('searchConnectors.syncJobs.flyout.failureTitle', {
@@ -67,6 +69,7 @@ export const SyncJobCallouts: React.FC<SyncJobCalloutsProps> = ({ syncJob }) =>
       {syncJob.status === SyncStatus.CANCELED && (
         <EuiFlexItem>
           <EuiCallOut
+            announceOnMount
             color="danger"
             iconType="cross"
             title={i18n.translate('searchConnectors.syncJobs.flyout.canceledTitle', {
@@ -88,6 +91,7 @@ export const SyncJobCallouts: React.FC<SyncJobCalloutsProps> = ({ syncJob }) =>
       {syncJob.status === SyncStatus.IN_PROGRESS && (
         <EuiFlexItem>
           <EuiCallOut
+            announceOnMount
             color="warning"
             iconType="clock"
             title={i18n.translate('searchConnectors.syncJobs.flyout.inProgressTitle', {
@@ -106,6 +110,7 @@ export const SyncJobCallouts: React.FC<SyncJobCalloutsProps> = ({ syncJob }) =>
       {!!syncJob.started_at && (
         <EuiFlexItem>
           <EuiCallOut
+            announceOnMount
             color="primary"
             iconType="info"
             title={

@@ -33,6 +33,7 @@ export const renderComparisonToolbar = ({
       bottomSection:
         totalFields > comparisonFields.length ? (
           <EuiCallOut
+            announceOnMount={false}
             size="s"
             iconType="info"
             title={i18n.translate('unifiedDataTable.comparisonMaxFieldsCallout', {

@@ -401,6 +401,7 @@ export const UserProfilesSelectable = <Option extends UserProfileWithAvatar | nu
             <>
               <EuiHorizontalRule margin="none" />
               <EuiCallOut
+                announceOnMount
                 title={
                   limitReachedMessage ? (
                     limitReachedMessage(limit)

diff --git a/...platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_message.tsx b/...platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_message.tsx
@@ -129,7 +129,7 @@ export const RuleActionsMessage = (props: RuleActionsMessageProps) => {
             {warning ? (
               <>
                 <EuiSpacer size="s" />
-                <EuiCallOut size="s" color="warning" title={warning} />
+                <EuiCallOut announceOnMount size="s" color="warning" title={warning} />
               </>
             ) : null}
           </Suspense>

diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_flyout/rule_flyout_body.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_flyout/rule_flyout_body.tsx
@@ -158,6 +158,7 @@ export const RuleFlyoutBody = ({
         {hasActionsDisabled && (
           <>
             <EuiCallOut
+              announceOnMount
               size="s"
               color="danger"
               iconType="error"

diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx
@@ -123,6 +123,7 @@ export const RulePage = (props: RulePageProps) => {
           {hasActionsDisabled && (
             <>
               <EuiCallOut
+                announceOnMount
                 size="s"
                 color="danger"
                 iconType="error"

diff --git a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/panel.tsx b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/components/panel/panel.tsx
@@ -103,6 +103,7 @@ export const Panel: FC<Props> = ({ selectedNode }) => {
     console.error(serializeError);
     return (
       <EuiCallOut
+        announceOnMount
         color="danger"
         iconType="cross"
         data-test-subj="sideNavPanelError"

@@ -223,6 +223,7 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
       ) : (
         <>
           <EuiCallOut
+            announceOnMount
             color="warning"
             iconType="warning"
             title={i18n.translate(

@@ -91,6 +91,7 @@ describe('SubmitErrorCallout', () => {
 
     expect(wrapper).toMatchInlineSnapshot(`
       <EuiCallOut
+        announceOnMount={true}
         color="primary"
         title={
           <Memo(MemoizedFormattedMessage)
@@ -167,6 +168,7 @@ describe('SubmitErrorCallout', () => {
 
     expect(wrapper).toMatchInlineSnapshot(`
       <EuiCallOut
+        announceOnMount={true}
         color="primary"
         title={
           <Memo(MemoizedFormattedMessage)
@@ -320,6 +322,7 @@ describe('SubmitErrorCallout', () => {
 
     expect(wrapper).toMatchInlineSnapshot(`
       <EuiCallOut
+        announceOnMount={true}
         color="primary"
         title={
           <Memo(MemoizedFormattedMessage)