@momentum-design/components 0.46.0 → 0.47.0

package/dist/react/screenreaderannouncer/index.d.ts

@@ -0,0 +1,34 @@
+import Component from '../../components/screenreaderannouncer';
+/**
+ * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.
+ *
+ * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.
+ *
+ * **Internal logic**
+ *
+ * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not
+ * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created
+ * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element
+ * is created in the DOM.
+ *
+ * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with
+ * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.
+ * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.
+ *
+ * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.
+ *
+ * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and
+ * all the announcement elements added are removed from the DOM and timeouts cleared.
+ *
+ * **Note**
+ * 1. The default delay of 150 miliseconds is used as we dynamically generate the
+ * aria-live region in the DOM and add the announcement text to it.
+ * 3. If no `identity` is provided, all the screen reader components will create and use only one
+ * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.
+ *
+ * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/
+ *
+ * @tagname mdc-screenreaderannouncer
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/screenreaderannouncer/index.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/screenreaderannouncer';
+import { TAG_NAME } from '../../components/screenreaderannouncer/screenreaderannouncer.constants';
+/**
+ * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.
+ *
+ * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.
+ *
+ * **Internal logic**
+ *
+ * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not
+ * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created
+ * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element
+ * is created in the DOM.
+ *
+ * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with
+ * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.
+ * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.
+ *
+ * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.
+ *
+ * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and
+ * all the announcement elements added are removed from the DOM and timeouts cleared.
+ *
+ * **Note**
+ * 1. The default delay of 150 miliseconds is used as we dynamically generate the
+ * aria-live region in the DOM and add the announcement text to it.
+ * 3. If no `identity` is provided, all the screen reader components will create and use only one
+ * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.
+ *
+ * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/
+ *
+ * @tagname mdc-screenreaderannouncer
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'ScreenreaderAnnouncer',
+});
+export default reactWrapper;

package/package.json

@@ -31,6 +31,7 @@
     "@floating-ui/dom": "^1.6.12",
     "@lit/context": "^1.1.2",
     "@lit/react": "^1.0.5",
+    "@momentum-design/brand-visuals": "*",
     "@momentum-design/fonts": "*",
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*",
@@ -38,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.46.0"
+  "version": "0.47.0"
 }