feat(AriaLive): add new component

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 />

packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/Examples.tsx

@@ -0,0 +1,158 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import { Field, 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', 'medium', 'high']
+      const contents = {
+        default: 'This is a default announcement',
+        second: 'And a second one',
+        third: 'A third one',
+        fourth: 'And a fourth one',
+      }
+      const defaultData = {
+        enabled: false,
+        content: contents.default,
+        priority: 'low',
+      }
+
+      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
+                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>
+    {() => {
+      const priorities = ['low', 'medium', 'high']
+      const defaultData = {
+        enabled: false,
+        content: [<P key="one">Line 1</P>],
+        priority: 'low',
+      }
+
+      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" />
+              <Field.Selection
+                optionsLayout="horizontal"
+                label="Priority"
+                path="/priority"
+              >
+                {priorities.map((content) => {
+                  return (
+                    <Field.Option
+                      key={content}
+                      title={content}
+                      value={content}
+                    />
+                  )
+                })}
+              </Field.Selection>
+
+              <Form.ButtonRow>
+                <Button
+                  text="Add more content"
+                  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
+                    })
+                  }}
+                />
+              </Form.ButtonRow>
+
+              <Flex.Item>
+                Output:{' '}
+                <AriaLive
+                  disabled={!data.enabled}
+                  priority={data.priority}
+                  showChildren
+                >
+                  Message: {data.content}
+                </AriaLive>
+              </Flex.Item>
+            </Flex.Stack>
+          </Form.Handler>
+        )
+      }
+
+      return <AriaLiveExample />
+    }}
+  </ComponentBox>
+)

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 />

packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx

@@ -0,0 +1,24 @@
+---
+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.
+
+## Priority
+
+The `priority` prop in the `AriaLive` component is used to control the urgency of the announcement. It can be set to 'low', 'medium', or 'high'. This allows developers 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} />
+}
+```

packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/properties.mdx

@@ -0,0 +1,16 @@
+---
+showTabs: true
+---
+
+## Properties
+
+| Properties     | Types       | Description                                                                                                                             |
+| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `priority`     | `string`    | _(optional)_ Priority of the announcement. Can be `low`, `medium`, or `high`. Defaults to `low`.                                        |
+| `delay`        | `number`    | _(optional)_ Delay in milliseconds before the announcement is made. Defaults to `10`.                                                   |
+| `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.                                                                                         |

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

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 = false