From ff72e55c8ff8efdff44f34d65136c39e497378a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Wed, 10 Jan 2024 18:47:31 +0100
Subject: [PATCH 1/8] feat(AriaLive): add new component

---
 .../src/docs/EUFEMIA_CHANGELOG.mdx            |   7 +-
 .../src/docs/uilib/components/aria-live.mdx   |  15 ++
 .../uilib/components/aria-live/Examples.tsx   | 154 +++++++++++++++
 .../docs/uilib/components/aria-live/demos.mdx |  15 ++
 .../docs/uilib/components/aria-live/info.mdx  |  52 +++++
 .../uilib/components/aria-live/properties.mdx |  17 ++
 .../src/docs/uilib/intro/03-accessibility.mdx |   1 +
 .../uilib/usage/accessibility/checklist.mdx   |   1 +
 .../dnb-eufemia/src/components/AriaLive.ts    |  14 ++
 .../src/components/aria-live/AriaLive.tsx     |  11 ++
 .../aria-live/__tests__/AriaLive.test.tsx     | 180 ++++++++++++++++++
 .../aria-live/__tests__/useAriaLIve.test.ts   |  36 ++++
 .../src/components/aria-live/index.ts         |   8 +
 .../aria-live/stories/AriaLive.stories.tsx    | 147 ++++++++++++++
 .../src/components/aria-live/types.ts         |  52 +++++
 .../src/components/aria-live/useAriaLive.tsx  |  84 ++++++++
 packages/dnb-eufemia/src/components/index.ts  |   2 +
 packages/dnb-eufemia/src/components/lib.ts    |   3 +
 packages/dnb-eufemia/src/index.ts             |   2 +
 19 files changed, 799 insertions(+), 2 deletions(-)
 create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live.mdx
 create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/Examples.tsx
 create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/demos.mdx
 create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx
 create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/properties.mdx
 create mode 100644 packages/dnb-eufemia/src/components/AriaLive.ts
 create mode 100644 packages/dnb-eufemia/src/components/aria-live/AriaLive.tsx
 create mode 100644 packages/dnb-eufemia/src/components/aria-live/__tests__/AriaLive.test.tsx
 create mode 100644 packages/dnb-eufemia/src/components/aria-live/__tests__/useAriaLIve.test.ts
 create mode 100644 packages/dnb-eufemia/src/components/aria-live/index.ts
 create mode 100644 packages/dnb-eufemia/src/components/aria-live/stories/AriaLive.stories.tsx
 create mode 100644 packages/dnb-eufemia/src/components/aria-live/types.ts
 create mode 100644 packages/dnb-eufemia/src/components/aria-live/useAriaLive.tsx

diff --git a/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx b/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx
index 84b9a8813a3..900c7e014c2 100644
--- a/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx
+++ b/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx
@@ -1,8 +1,11 @@
+## January, 18. 2024
+
+- New component: [AriaLive](/uilib/components/aria-live)
+
 ## May, 31. 2023
 
 - [New major version 10](/uilib/about-the-lib/releases/eufemia/v10-info/)
-- New components released:
-  - [SkipContent](/uilib/components/skip-content)
+- New component: [SkipContent](/uilib/components/skip-content)
 - [GlobalError](/uilib/components/global-error) got new styles (without illustrations).
 - New [Icons](/icons/secondary):
   - `handshake`
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..13208a0181e
--- /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}
+                  showAnnouncement
+                >
+                  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..b0fda83cc93
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx
@@ -0,0 +1,52 @@
+---
+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.
+
+Use it to automatically inform users using a screen reader, about changes on the screen that they didn't initiate.
+
+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..4337890dff1
--- /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`. |
+| `showAnnouncement` | `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-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx
index b902129d26c..8548325cdaf 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx
@@ -38,6 +38,7 @@ Eufemia includes a range of tools to help you make better accessible application
 - [FieldBlock](!/uilib/extensions/forms/create-component/FieldBlock) handles `<fieldset>` and `<legend>`.
 - [VisuallyHidden](!/uilib/components/visually-hidden) hides text visually, while makes it available for screen readers. Its based on the helper HTML class `dnb-sr-only`.
 - [SkipContent](!/uilib/components/skip-content) similar to a skip link. It allows a user, while tabbing, to skip large parts of content, to reach quickly a save button etc.
+- [AriaLive](/uilib/components/aria-live) is a component that makes it easy to announce messages to screen readers.
 
 All form components includes a `label` property to bind automatically the FormLabel to the components (HTML element).
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/checklist.mdx b/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/checklist.mdx
index b2aeb14665b..369a1eb202c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/checklist.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/accessibility/checklist.mdx
@@ -14,6 +14,7 @@ description: 'Accessibility checklist to help you remember the most important ta
 - [ ] Do never expose a form element as `disabled` to the user. Use good UX instead.
 - [ ] Have a [Skip Link](/uilib/usage/accessibility/focus#skip-link) in place if the user has to tab many times to reach the main content.
 - [ ] Use the [SkipContent](/uilib/components/skip-content/) helper to let the user skip large parts of content, while using keyboard navigation.
+- [ ] Use the [AriaLive](/uilib/components/aria-live) component to automatically inform users using a screen reader, about changes on the screen that they didn't initiate.
 - [ ] Make good use of [`aria-label`](/uilib/usage/accessibility/screenreader#usage-of-aria-label-aria-labelledby-and-aria-describedby) and `aria-hidden`, e.g. of [decorative content](/uilib/usage/accessibility/icons#decorative-icons).
 - [ ] Make [images and illustrations](/uilib/usage/accessibility/screenreader#images-and-illustrations) accessible.
 - [ ] Have `aria-live` in place for dynamic content, like updates coming from the server.
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..6d43c0895ae
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/aria-live/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import AriaLive from './AriaLive'
+export default AriaLive
+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..1533474c026
--- /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}
+            showAnnouncement
+          >
+            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..e4631b28e40
--- /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
+   */
+  showAnnouncement?: 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..3618d64b2ab
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/aria-live/useAriaLive.tsx
@@ -0,0 +1,84 @@
+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']
+    showAnnouncement: AriaLiveAllProps['showAnnouncement']
+    atomic?: AriaLiveAllProps['atomic']
+  }
+} = {
+  text: {
+    delay: 1000,
+    atomic: true,
+    showAnnouncement: false,
+  },
+  content: {
+    delay: -1,
+    atomic: false,
+    showAnnouncement: 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,
+    showAnnouncement,
+    variant, // eslint-disable-line
+    priority, // eslint-disable-line
+    ...rest
+  } = extendPropsWithContext(
+    props,
+    variantConfig[props.variant || 'text'],
+    priorityConfig[props.priority || 'low']
+  )
+
+  useEffect(() => {
+    if (delay > -1) {
+      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',
+      !showAnnouncement && 'dnb-sr-only',
+      className
+    ),
+    children: delay > -1 ? 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,

From 22d3e9ef7a2a8b28f61c6ba9e5da9566409b695a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Wed, 17 Jan 2024 13:47:41 +0100
Subject: [PATCH 2/8] Update
 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx

Co-authored-by: Snorre Kim <snorre.kim@dnb.no>
---
 .../src/docs/uilib/components/aria-live/info.mdx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index b0fda83cc93..613fd0bda49 100644
--- 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
@@ -6,7 +6,7 @@ showTabs: true
 
 AriaLive is a React component and hook that helps make your web app more accessible by announcing dynamic changes to screen readers.
 
-Use it to automatically inform users using a screen reader, about changes on the screen that they didn't initiate.
+Use it to manually inform users using a screen reader, about changes on the screen that isn't normally covered by 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.
 

From d3f6596c0ccb248c1940152c9783d7907dfdf863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Wed, 17 Jan 2024 13:47:57 +0100
Subject: [PATCH 3/8] Update
 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx

Co-authored-by: Snorre Kim <snorre.kim@dnb.no>
---
 .../src/docs/uilib/components/aria-live/info.mdx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 613fd0bda49..d4b1c3acdfe 100644
--- 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
@@ -8,7 +8,7 @@ AriaLive is a React component and hook that helps make your web app more accessi
 
 Use it to manually inform users using a screen reader, about changes on the screen that isn't normally covered by 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.
+By default, the `AriaLive` component will announce changes to the screen reader in a polite manner. This means that the announcement will wait until the screen reader is idle. This is the recommended way to use the component.
 
 ## Usage
 

From f0d8a24cafd69d7ad30f32162d675502d7ceedf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Wed, 17 Jan 2024 13:48:16 +0100
Subject: [PATCH 4/8] Update
 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx

Co-authored-by: Snorre Kim <snorre.kim@dnb.no>
---
 .../src/docs/uilib/components/aria-live/info.mdx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index d4b1c3acdfe..2abebaf5bac 100644
--- 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
@@ -16,7 +16,7 @@ For text content:
 
 ```tsx
 import { AriaLive } from '@dnb/eufemia'
-render(<AriaLive>unvisible message to announce</AriaLive>)
+render(<AriaLive>invisible message to announce</AriaLive>)
 ```
 
 For content that is not visible, but should be announced on changes:

From 3694035b8c50a2d09f23b2bea16393c53356ccb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Wed, 17 Jan 2024 13:55:02 +0100
Subject: [PATCH 5/8] Update
 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx

Co-authored-by: Snorre Kim <snorre.kim@dnb.no>
---
 .../src/docs/uilib/components/aria-live/info.mdx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 2abebaf5bac..f400ccebe01 100644
--- 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
@@ -40,7 +40,7 @@ The `priority` prop in the `AriaLive` component is used to control the urgency o
 
 ## 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:
+The `useAriaLive` hook is a part of the `AriaLive` component. It can be used to make announcements in functional components. In this example `<section>` is turned into an ARIA live region with all the functionality of the `<AriaLive>` component:
 
 ```tsx
 import useAriaLive from '@dnb/eufemia/components/aria-live/useAriaLive'

From 8e71275796dc7789272da931a4e2c1b5e3ddf682 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Wed, 17 Jan 2024 13:56:07 +0100
Subject: [PATCH 6/8] Update
 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx

---
 .../src/docs/uilib/components/aria-live/info.mdx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index f400ccebe01..6cc2af49540 100644
--- 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
@@ -19,7 +19,7 @@ import { AriaLive } from '@dnb/eufemia'
 render(<AriaLive>invisible message to announce</AriaLive>)
 ```
 
-For content that is not visible, but should be announced on changes:
+For content that is visible, but where changes need to be announced:
 
 ```tsx
 import { AriaLive } from '@dnb/eufemia'

From e2fdeae45970f172df292d65eeb588e90b64e6b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Wed, 17 Jan 2024 13:56:20 +0100
Subject: [PATCH 7/8] Update
 packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx

Co-authored-by: Snorre Kim <snorre.kim@dnb.no>
---
 .../src/docs/uilib/components/aria-live/info.mdx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 6cc2af49540..f567934c012 100644
--- 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
@@ -4,7 +4,7 @@ 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.
+AriaLive is a React component and hook that helps make your web app more accessible by adding or defining an ARIA live region that announces dynamic changes to screen readers.
 
 Use it to manually inform users using a screen reader, about changes on the screen that isn't normally covered by screen readers.
 

From 95ededad09b0a95d42bed8ee86b00fabfa420746 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Wed, 17 Jan 2024 13:57:14 +0100
Subject: [PATCH 8/8] Update docs

---
 .../src/docs/uilib/components/aria-live/info.mdx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index f567934c012..0e5a8677c9c 100644
--- 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
@@ -12,7 +12,7 @@ By default, the `AriaLive` component will announce changes to the screen reader
 
 ## Usage
 
-For text content:
+For invisible text content:
 
 ```tsx
 import { AriaLive } from '@dnb/eufemia'