diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live.mdx
new file mode 100644
index 00000000000..d966b2d928b
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live.mdx
@@ -0,0 +1,15 @@
+---
+title: 'AriaLive'
+description: 'AriaLive is a React component and hook that helps make your web app more accessible by announcing dynamic changes to screen readers.'
+showTabs: true
+hideTabs:
+  - title: Events
+theme: 'sbanken'
+status: 'new'
+---
+
+import AriaLiveInfo from 'Docs/uilib/components/aria-live/info'
+import AriaLiveDemos from 'Docs/uilib/components/aria-live/demos'
+
+<AriaLiveInfo />
+<AriaLiveDemos />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/Examples.tsx
new file mode 100644
index 00000000000..f229cd1faf8
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/Examples.tsx
@@ -0,0 +1,154 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import { Field, FieldBlock, Form } from '@dnb/eufemia/src/extensions/forms'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import { AriaLive, Button, Flex, P } from '@dnb/eufemia/src'
+
+export const AriaLivePlayground = () => (
+  <ComponentBox hideCode>
+    {() => {
+      const priorities = ['low', 'high']
+      const contents = {
+        default: 'This is a default announcement',
+        second: 'And a second one',
+        third: 'A third one',
+        fourth: 'And a fourth one',
+      }
+      const priority: 'low' | 'high' = 'low'
+      const defaultData = {
+        enabled: false,
+        content: contents.default,
+        priority,
+      }
+
+      function AriaLiveExample() {
+        const { data } = Form.useData('aria-live-playground', defaultData)
+
+        return (
+          <Form.Handler id="aria-live-playground">
+            <Flex.Stack>
+              <Field.Boolean label="Enabled" path="/enabled" />
+              <Field.Selection
+                variant="button"
+                optionsLayout="horizontal"
+                label="Priority"
+                path="/priority"
+              >
+                {priorities.map((content) => {
+                  return (
+                    <Field.Option
+                      key={content}
+                      title={content}
+                      value={content}
+                    />
+                  )
+                })}
+              </Field.Selection>
+
+              <Field.Selection
+                optionsLayout="horizontal"
+                label="Content"
+                path="/content"
+              >
+                {Object.entries(contents).map(([key, value]) => {
+                  return (
+                    <Field.Option key={key} title={key} value={value} />
+                  )
+                })}
+              </Field.Selection>
+
+              <Field.String
+                label="Content as freetext"
+                path="/content"
+                multiline
+              />
+
+              <Flex.Item>
+                Output:{' '}
+                <AriaLive
+                  delay={1000}
+                  disabled={!data.enabled}
+                  priority={data.priority}
+                  showChildren
+                >
+                  Message: {data.content}
+                </AriaLive>
+              </Flex.Item>
+            </Flex.Stack>
+          </Form.Handler>
+        )
+      }
+
+      return <AriaLiveExample />
+    }}
+  </ComponentBox>
+)
+
+export const AriaLiveAdditions = () => (
+  <ComponentBox hideCode scope={{ FieldBlock }}>
+    {() => {
+      const defaultData = {
+        enabled: false,
+        content: [<P key="one">Line 1</P>],
+      }
+
+      function AriaLiveExample() {
+        const { data, update } = Form.useData(
+          'aria-live-additions',
+          defaultData,
+        )
+
+        return (
+          <Form.Handler id="aria-live-additions">
+            <Flex.Stack>
+              <Field.Boolean label="Enabled" path="/enabled" />
+
+              <FieldBlock label="Content">
+                <Form.ButtonRow>
+                  <Button
+                    text="Add more content"
+                    variant="secondary"
+                    icon="add"
+                    icon_position="left"
+                    on_click={() => {
+                      update('/content', (content) => {
+                        const c = content.length + 1
+                        content.push(<P key={c}>Line {c}</P>)
+                        return content
+                      })
+                    }}
+                  />
+                  <Button
+                    text="Remove content"
+                    variant="tertiary"
+                    icon="subtract"
+                    icon_position="left"
+                    on_click={() => {
+                      update('/content', (content) => {
+                        content.pop()
+                        return content
+                      })
+                    }}
+                  />
+                </Form.ButtonRow>
+              </FieldBlock>
+
+              <Flex.Item>
+                Output:{' '}
+                <AriaLive variant="content" disabled={!data.enabled}>
+                  Message: {data.content}
+                </AriaLive>
+              </Flex.Item>
+            </Flex.Stack>
+          </Form.Handler>
+        )
+      }
+
+      return <AriaLiveExample />
+    }}
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/demos.mdx
new file mode 100644
index 00000000000..c9d0b6b72fc
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/demos.mdx
@@ -0,0 +1,15 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Playground
+
+<Examples.AriaLivePlayground />
+
+### Additions
+
+<Examples.AriaLiveAdditions />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx
new file mode 100644
index 00000000000..f2dbbec0018
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx
@@ -0,0 +1,50 @@
+---
+showTabs: true
+---
+
+## Description
+
+AriaLive is a React component and hook that helps make your web app more accessible by announcing dynamic changes to screen readers.
+
+By default, the `AriaLive` component will announce changes to the screen reader in a polite manner. This means that the announcement will be made when the screen reader is idle. This is the recommended way to use the component.
+
+## Usage
+
+For text content:
+
+```tsx
+import { AriaLive } from '@dnb/eufemia'
+render(<AriaLive>unvisible message to announce</AriaLive>)
+```
+
+For content that is not visible, but should be announced on changes:
+
+```tsx
+import { AriaLive } from '@dnb/eufemia'
+render(
+  <AriaLive variant="content">
+    <ul>
+      <li>item one</li>
+      <li>item two</li>
+      {/* When item three appears, it will be announced */}
+    </ul>
+  </AriaLive>,
+)
+```
+
+## Priority
+
+The `priority` prop in the `AriaLive` component is used to control the urgency of the announcement. It can be set to `high` (defaults to `low`). This allows you to control how assertive the announcement should be, helping to create a better user experience for users who rely on screen readers.
+
+## AriaLive Hook
+
+The `useAriaLive` hook is a part of the `AriaLive` component. It can be used to make announcements in functional components. Here's an example of how to use it:
+
+```tsx
+import useAriaLive from '@dnb/eufemia/components/aria-live/useAriaLive'
+
+function MyCustomAriaLive(props) {
+  const ariaAttributes = useAriaLive(props)
+  return <section {...ariaAttributes} />
+}
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/properties.mdx
new file mode 100644
index 00000000000..99a0a7ae08c
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/properties.mdx
@@ -0,0 +1,17 @@
+---
+showTabs: true
+---
+
+## Properties
+
+| Properties     | Types       | Description                                                                                                                             |
+| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant`      | `string`    | _(optional)_ Can be `text` for text messages or `content` for whole application content. Defaults to `text`.                            |
+| `priority`     | `string`    | _(optional)_ Priority of the announcement. Can be `low` or `high`. Defaults to `low`.                                                   |
+| `delay`        | `number`    | _(optional)_ Delay in milliseconds before the announcement is made. Defaults to `1000`.                                                 |
+| `disabled`     | `boolean`   | _(optional)_ If `true`, the announcement will not be made. Defaults to `false`.                                                         |
+| `atomic`       | `boolean`   | _(optional)_ If `true`, assistive technologies will present the entire region as a whole. If `false`, only additions will be announced. |
+| `politeness`   | `string`    | _(optional)_ The politeness setting for the announcement. Can be `polite` or `assertive`.                                               |
+| `relevant`     | `string`    | _(optional)_ A space-separated list of the types of changes that should be announced. Can be `additions`, `removals`, `text`, or `all`. |
+| `showChildren` | `boolean`   | _(optional)_ Whether to show the children or not.                                                                                       |
+| `children`     | `ReactNode` | The content that will be announced to the user.                                                                                         |
diff --git a/packages/dnb-eufemia/src/components/AriaLive.ts b/packages/dnb-eufemia/src/components/AriaLive.ts
new file mode 100644
index 00000000000..1f9e2236197
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/AriaLive.ts
@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index aria-live to autogenerate all the components and extensions
+ * Used by "prepareAriaLives"
+ */
+
+import AriaLive from './aria-live/AriaLive'
+export * from './aria-live/AriaLive'
+export default AriaLive
diff --git a/packages/dnb-eufemia/src/components/aria-live/AriaLive.tsx b/packages/dnb-eufemia/src/components/aria-live/AriaLive.tsx
new file mode 100644
index 00000000000..d966dd69bc5
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/aria-live/AriaLive.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { AriaLiveAllProps } from './types'
+import useAriaLive from './useAriaLive'
+
+export default function AriaLive(props: AriaLiveAllProps) {
+  const ariaAttributes = useAriaLive(props)
+
+  return <section {...ariaAttributes} />
+}
+
+AriaLive._supportsSpacingProps = 'children'
diff --git a/packages/dnb-eufemia/src/components/aria-live/__tests__/AriaLive.test.tsx b/packages/dnb-eufemia/src/components/aria-live/__tests__/AriaLive.test.tsx
new file mode 100644
index 00000000000..4d117084276
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/aria-live/__tests__/AriaLive.test.tsx
@@ -0,0 +1,180 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import AriaLive from '../AriaLive'
+
+describe('AriaLive', () => {
+  it('renders with default props', async () => {
+    render(<AriaLive>Default announcement</AriaLive>)
+
+    await waitFor(() =>
+      expect(screen.getByText('Default announcement')).toBeInTheDocument()
+    )
+
+    const element = document.querySelector('.dnb-aria-live')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['aria-live', 'aria-atomic', 'class'])
+    expect(element).toHaveAttribute('aria-live', 'polite')
+    expect(element).toHaveAttribute('aria-atomic', 'true')
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-aria-live',
+      'dnb-sr-only',
+    ])
+  })
+
+  it('does not render when disabled', async () => {
+    render(<AriaLive disabled={true}>Disabled announcement</AriaLive>)
+
+    await waitFor(() =>
+      expect(screen.queryByText('Disabled announcement')).toBeNull()
+    )
+  })
+
+  it('renders with delay', async () => {
+    render(<AriaLive>Delayed announcement</AriaLive>)
+
+    expect(screen.queryByText('Delayed announcement')).toBeNull()
+    await waitFor(() =>
+      expect(screen.getByText('Delayed announcement')).toBeInTheDocument()
+    )
+  })
+
+  it('renders with politeness', async () => {
+    render(
+      <AriaLive politeness="assertive">Assertive announcement</AriaLive>
+    )
+
+    await waitFor(() =>
+      expect(
+        screen.getByText('Assertive announcement')
+      ).toBeInTheDocument()
+    )
+  })
+
+  it('renders with atomic', async () => {
+    render(<AriaLive atomic={true}>Atomic announcement</AriaLive>)
+
+    await waitFor(() =>
+      expect(screen.getByText('Atomic announcement')).toBeInTheDocument()
+    )
+  })
+
+  it('renders with relevant', async () => {
+    render(<AriaLive relevant="text">Relevant text announcement</AriaLive>)
+
+    await waitFor(() =>
+      expect(
+        screen.getByText('Relevant text announcement')
+      ).toBeInTheDocument()
+    )
+  })
+
+  it('updates when children changes', async () => {
+    const { rerender } = render(<AriaLive>First announcement</AriaLive>)
+
+    await waitFor(() =>
+      expect(screen.getByText('First announcement')).toBeInTheDocument()
+    )
+
+    rerender(<AriaLive>Second announcement</AriaLive>)
+
+    await waitFor(() =>
+      expect(screen.getByText('Second announcement')).toBeInTheDocument()
+    )
+  })
+
+  it('renders with a paragraph element', async () => {
+    render(
+      <AriaLive>
+        <p>Announcement</p>
+      </AriaLive>
+    )
+
+    await waitFor(() =>
+      expect(screen.getByText('Announcement')).toBeInTheDocument()
+    )
+  })
+
+  it('should set any given HTML attribute on the element', () => {
+    render(
+      <AriaLive id="test-id" data-test="test-data">
+        <p>Announcement</p>
+      </AriaLive>
+    )
+
+    const element = document.querySelector('.dnb-aria-live')
+
+    expect(element).toHaveAttribute('id', 'test-id')
+    expect(element).toHaveAttribute('data-test', 'test-data')
+  })
+
+  it('should have dnb-sr-only class', () => {
+    render(
+      <AriaLive>
+        <p>Announcement</p>
+      </AriaLive>
+    )
+
+    const element = document.querySelector('.dnb-aria-live')
+
+    expect(element).toHaveClass('dnb-sr-only')
+  })
+
+  it('should set a custom HTML class name on the element', () => {
+    render(<AriaLive className="custom-class">Announcement</AriaLive>)
+
+    const element = document.querySelector('.dnb-aria-live')
+    expect(element).toHaveClass('custom-class')
+    expect(element).toHaveClass('dnb-aria-live')
+  })
+
+  it('has the same attributes with default as with low priority', () => {
+    const { rerender } = render(
+      <AriaLive>
+        <p>Default priority announcement</p>
+      </AriaLive>
+    )
+
+    let element = document.querySelector('.dnb-aria-live')
+
+    expect(element).toBeInTheDocument()
+    expect(element).toHaveAttribute('aria-live', 'polite')
+
+    rerender(
+      <AriaLive priority="low">
+        <p>Low priority announcement</p>
+      </AriaLive>
+    )
+
+    element = document.querySelector('.dnb-aria-live')
+
+    expect(element).toBeInTheDocument()
+    expect(element).toHaveAttribute('aria-live', 'polite')
+  })
+
+  it('should make content visible when variant is content', () => {
+    render(
+      <AriaLive variant="content">
+        <ul>
+          <li>item one</li>
+          <li>item two</li>
+        </ul>
+      </AriaLive>
+    )
+
+    expect(screen.getByText('item one')).toBeInTheDocument()
+    expect(screen.getByText('item two')).toBeInTheDocument()
+
+    const element = document.querySelector('.dnb-aria-live')
+
+    expect(element).toHaveAttribute('aria-live', 'polite')
+    expect(element).toHaveAttribute('aria-atomic', 'false')
+    expect(Array.from(element.classList)).toEqual(['dnb-aria-live'])
+  })
+
+  it('should have constant of _supportsSpacingProps="children"', () => {
+    expect(AriaLive._supportsSpacingProps).toBe('children')
+  })
+})
diff --git a/packages/dnb-eufemia/src/components/aria-live/__tests__/useAriaLIve.test.ts b/packages/dnb-eufemia/src/components/aria-live/__tests__/useAriaLIve.test.ts
new file mode 100644
index 00000000000..5bdcfff38ae
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/aria-live/__tests__/useAriaLIve.test.ts
@@ -0,0 +1,36 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import useAriaLive from '../useAriaLive'
+
+describe('useAriaLive', () => {
+  it('returns correct aria attributes and announcement for low priority', async () => {
+    const { result } = renderHook(() =>
+      useAriaLive({
+        priority: 'low',
+        children: 'Low priority announcement',
+      })
+    )
+
+    expect(result.current['aria-live']).toBe('polite')
+    expect(result.current.children).toBe('')
+
+    await waitFor(async () => {
+      expect(result.current.children).toBe('Low priority announcement')
+    })
+  })
+
+  it('returns correct aria attributes and announcement for high priority', async () => {
+    const { result } = renderHook(() =>
+      useAriaLive({
+        priority: 'high',
+        children: 'High priority announcement',
+      })
+    )
+
+    expect(result.current['aria-live']).toBe('assertive')
+    expect(result.current.children).toBe('')
+
+    await waitFor(async () => {
+      expect(result.current.children).toBe('High priority announcement')
+    })
+  })
+})
diff --git a/packages/dnb-eufemia/src/components/aria-live/index.ts b/packages/dnb-eufemia/src/components/aria-live/index.ts
new file mode 100644
index 00000000000..a911ee32f06
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/aria-live/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import VisuallyHidden from './AriaLive'
+export default VisuallyHidden
+export * from './AriaLive'
diff --git a/packages/dnb-eufemia/src/components/aria-live/stories/AriaLive.stories.tsx b/packages/dnb-eufemia/src/components/aria-live/stories/AriaLive.stories.tsx
new file mode 100644
index 00000000000..1d6e7a2fdeb
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/aria-live/stories/AriaLive.stories.tsx
@@ -0,0 +1,147 @@
+import React from 'react'
+import AriaLive from '../AriaLive'
+import { Field, FieldBlock, Form } from '../../../extensions/forms'
+import { AriaLiveProps } from '../types'
+import { Button, Flex } from '../..'
+import { P } from '../../../elements'
+
+export default {
+  title: 'Eufemia/Components/AriaLive',
+}
+
+const priorities = ['low', 'high']
+const contents = {
+  default: 'This is a default announcement',
+  second: 'And a second one',
+  third: 'A third one',
+  fourth: 'And a fourth one',
+}
+
+type Data = {
+  enabled: boolean
+  content: string
+  priority: AriaLiveProps['priority']
+}
+
+const defaultData: Data = {
+  enabled: true,
+  content: contents.default,
+  priority: 'low',
+}
+
+export function AriaLivePlayground() {
+  const { data } = Form.useData<Data>('aria-live', defaultData)
+
+  return (
+    <Form.Handler id="aria-live">
+      <Flex.Stack>
+        <Field.Boolean
+          variant="buttons"
+          label="Announce"
+          path="/enabled"
+        />
+        <Field.Selection
+          variant="button"
+          optionsLayout="horizontal"
+          label="Priority"
+          path="/priority"
+        >
+          {priorities.map((content) => {
+            return (
+              <Field.Option
+                key={content}
+                title={content}
+                value={content}
+              />
+            )
+          })}
+        </Field.Selection>
+        <Field.Selection
+          variant="button"
+          optionsLayout="horizontal"
+          label="Content"
+          path="/content"
+        >
+          {Object.entries(contents).map(([key, value]) => {
+            return <Field.Option key={key} title={key} value={value} />
+          })}
+        </Field.Selection>
+        <Field.String
+          label="Content as freetext"
+          path="/content"
+          multiline
+        />
+        <Flex.Item>
+          Output:{' '}
+          <AriaLive
+            disabled={!data.enabled}
+            priority={data.priority}
+            showChildren
+          >
+            Message: {data.content}
+          </AriaLive>
+        </Flex.Item>
+      </Flex.Stack>
+    </Form.Handler>
+  )
+}
+
+export function AriaLiveAdditions() {
+  const defaultData = React.useMemo(
+    () => ({
+      enabled: true,
+      content: [<P key="one">Line 1</P>],
+    }),
+    []
+  )
+  const { data, update } = Form.useData('aria-live-additions', defaultData)
+
+  return (
+    <Form.Handler id="aria-live-additions">
+      <Flex.Stack>
+        <Field.Boolean label="Enabled" path="/enabled" />
+
+        <FieldBlock label="Content">
+          <Form.ButtonRow>
+            <Button
+              text="Add more content"
+              variant="secondary"
+              icon="add"
+              icon_position="left"
+              on_click={() => {
+                update('/content', (content) => {
+                  const c = content.length + 1
+                  content.push(<P key={c}>Line {c}</P>)
+                  return content
+                })
+              }}
+            />
+            <Button
+              text="Remove content"
+              variant="tertiary"
+              icon="subtract"
+              icon_position="left"
+              on_click={() => {
+                update('/content', (content) => {
+                  content.pop()
+                  return content
+                })
+              }}
+            />
+          </Form.ButtonRow>
+        </FieldBlock>
+
+        <Flex.Item>
+          Output:{' '}
+          <AriaLive
+            variant="content"
+            disabled={!data.enabled}
+            relevant="all"
+          >
+            {data.content}
+          </AriaLive>
+        </Flex.Item>
+      </Flex.Stack>
+    </Form.Handler>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/aria-live/types.ts b/packages/dnb-eufemia/src/components/aria-live/types.ts
new file mode 100644
index 00000000000..a2c912e648a
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/aria-live/types.ts
@@ -0,0 +1,52 @@
+export type AriaLiveProps = {
+  /**
+   * The variant of the announcement. Can be 'text' or 'content'.
+   */
+  variant?: 'text' | 'content'
+
+  /**
+   * The priority level of the announcement. Can be 'low', or 'high'.
+   */
+  priority?: 'low' | 'high'
+
+  /**
+   * Delay in milliseconds before the announcement is made. Defaults to 1000.
+   * @default 1000
+   */
+  delay?: number
+
+  /**
+   * Whether the AriaLive component is on or off.
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * The politeness level of the announcement. Can be 'off', 'polite', or 'assertive'.
+   */
+  politeness?: React.HTMLAttributes<HTMLElement>['aria-live']
+
+  /**
+   * Whether the entire region should be considered as a whole when communicating updates.
+   */
+  atomic?: React.HTMLAttributes<HTMLElement>['aria-atomic']
+
+  /**
+   * What types of changes should be presented to the user. Can be 'additions', 'removals', 'text', or 'all'.
+   */
+  relevant?: React.HTMLAttributes<HTMLElement>['aria-relevant']
+
+  /**
+   * Whether to show the children or not.
+   * @default false
+   */
+  showChildren?: boolean
+
+  /**
+   * The content to be announced.
+   */
+  children: React.ReactNode
+}
+
+export type AriaLiveAllProps = AriaLiveProps &
+  React.HTMLAttributes<HTMLElement>
diff --git a/packages/dnb-eufemia/src/components/aria-live/useAriaLive.tsx b/packages/dnb-eufemia/src/components/aria-live/useAriaLive.tsx
new file mode 100644
index 00000000000..7b96b4dae31
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/aria-live/useAriaLive.tsx
@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react'
+import classnames from 'classnames'
+import { AriaLiveAllProps } from './types'
+import { extendPropsWithContext } from '../../shared/component-helper'
+
+const variantConfig: {
+  [key: string]: {
+    delay: AriaLiveAllProps['delay']
+    showChildren: AriaLiveAllProps['showChildren']
+    atomic?: AriaLiveAllProps['atomic']
+  }
+} = {
+  text: {
+    delay: 1000,
+    atomic: true,
+    showChildren: false,
+  },
+  content: {
+    delay: 0,
+    atomic: false,
+    showChildren: true,
+  },
+}
+
+const priorityConfig: {
+  [key: string]: {
+    politeness: AriaLiveAllProps['politeness']
+  }
+} = {
+  low: {
+    politeness: 'polite',
+  },
+  high: {
+    politeness: 'assertive',
+  },
+}
+
+export default function useAriaLive(props: AriaLiveAllProps) {
+  const [announcement, setAnnouncement] = useState<React.ReactNode>('')
+
+  const {
+    disabled = false,
+    delay,
+    atomic,
+    politeness,
+    relevant,
+    className,
+    children,
+    showChildren,
+    variant, // eslint-disable-line
+    priority, // eslint-disable-line
+    ...rest
+  } = extendPropsWithContext(
+    props,
+    variantConfig[props.variant || 'text'],
+    priorityConfig[props.priority || 'low']
+  )
+
+  useEffect(() => {
+    if (delay) {
+      setAnnouncement('')
+
+      const timer = setTimeout(
+        () => {
+          setAnnouncement(disabled ? '' : children)
+        },
+        (process.env.NODE_ENV === 'test' ? 0 : delay) ?? 1000
+      )
+
+      return () => clearTimeout(timer)
+    }
+  }, [disabled, delay, children])
+
+  return {
+    'aria-live': !disabled ? politeness : 'off',
+    'aria-atomic': atomic,
+    'aria-relevant': relevant,
+    className: classnames(
+      'dnb-aria-live',
+      !showChildren && 'dnb-sr-only',
+      className
+    ),
+    children: delay ? announcement : children,
+    ...rest,
+  }
+}
diff --git a/packages/dnb-eufemia/src/components/index.ts b/packages/dnb-eufemia/src/components/index.ts
index cb0b9986356..167ecea1f17 100644
--- a/packages/dnb-eufemia/src/components/index.ts
+++ b/packages/dnb-eufemia/src/components/index.ts
@@ -12,6 +12,7 @@
 // import all the available components
 import Accordion from './accordion/Accordion'
 import Anchor from './anchor/Anchor'
+import AriaLive from './aria-live/AriaLive'
 import Autocomplete from './autocomplete/Autocomplete'
 import Avatar from './avatar/Avatar'
 import Badge from './badge/Badge'
@@ -66,6 +67,7 @@ import VisuallyHidden from './visually-hidden/VisuallyHidden'
 export {
   Accordion,
   Anchor,
+  AriaLive,
   Autocomplete,
   Avatar,
   Badge,
diff --git a/packages/dnb-eufemia/src/components/lib.ts b/packages/dnb-eufemia/src/components/lib.ts
index ef7842c7183..bfc5bda9799 100644
--- a/packages/dnb-eufemia/src/components/lib.ts
+++ b/packages/dnb-eufemia/src/components/lib.ts
@@ -12,6 +12,7 @@
 // import all the available components
 import Accordion from './accordion/Accordion'
 import Anchor from './anchor/Anchor'
+import AriaLive from './aria-live/AriaLive'
 import Autocomplete from './autocomplete/Autocomplete'
 import Avatar from './avatar/Avatar'
 import Badge from './badge/Badge'
@@ -66,6 +67,7 @@ import VisuallyHidden from './visually-hidden/VisuallyHidden'
 export {
   Accordion,
   Anchor,
+  AriaLive,
   Autocomplete,
   Avatar,
   Badge,
@@ -121,6 +123,7 @@ export const getComponents = () => {
   return {
     Accordion,
     Anchor,
+    AriaLive,
     Autocomplete,
     Avatar,
     Badge,
diff --git a/packages/dnb-eufemia/src/index.ts b/packages/dnb-eufemia/src/index.ts
index 9bbc138c258..afbc4444be3 100644
--- a/packages/dnb-eufemia/src/index.ts
+++ b/packages/dnb-eufemia/src/index.ts
@@ -39,6 +39,7 @@ import Tr from './elements/Tr'
 import Ul from './elements/Ul'
 import Accordion from './components/accordion/Accordion'
 import Anchor from './components/anchor/Anchor'
+import AriaLive from './components/aria-live/AriaLive'
 import Autocomplete from './components/autocomplete/Autocomplete'
 import Avatar from './components/avatar/Avatar'
 import Badge from './components/badge/Badge'
@@ -120,6 +121,7 @@ export {
   Ul,
   Accordion,
   Anchor,
+  AriaLive,
   Autocomplete,
   Avatar,
   Badge,