@react-aria/live-announcer 3.0.6 → 3.1.0

package/dist/main.js

@@ -1,7 +1,3 @@
-var $9snhK$react = require("react");
-var $9snhK$reactdom = require("react-dom");
-var $9snhK$reactariavisuallyhidden = require("@react-aria/visually-hidden");
-
 function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
     if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
@@ -18,9 +14,6 @@ function $parcel$exportWildcard(dest, source) {
 
   return dest;
 }
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
@@ -29,98 +22,77 @@ var $97cebfa4133ebec3$exports = {};
 $parcel$export($97cebfa4133ebec3$exports, "announce", () => $97cebfa4133ebec3$export$a9b970dcc4ae71a9);
 $parcel$export($97cebfa4133ebec3$exports, "clearAnnouncer", () => $97cebfa4133ebec3$export$d10ae4f68404609a);
 $parcel$export($97cebfa4133ebec3$exports, "destroyAnnouncer", () => $97cebfa4133ebec3$export$d8686216b8b81b2f);
-
-
-
 /* Inspired by https://github.com/AlmeroSteyn/react-aria-live */ const $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY = 7000;
-let $97cebfa4133ebec3$var$liveRegionAnnouncer = /*#__PURE__*/ ($parcel$interopDefault($9snhK$react)).createRef();
-let $97cebfa4133ebec3$var$node = null;
-let $97cebfa4133ebec3$var$messageId = 0;
+let $97cebfa4133ebec3$var$liveAnnouncer = null;
 function $97cebfa4133ebec3$export$a9b970dcc4ae71a9(message, assertiveness = 'assertive', timeout = $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY) {
-    $97cebfa4133ebec3$var$ensureInstance((announcer)=>announcer.announce(message, assertiveness, timeout)
-    );
+    if (!$97cebfa4133ebec3$var$liveAnnouncer) $97cebfa4133ebec3$var$liveAnnouncer = new $97cebfa4133ebec3$var$LiveAnnouncer();
+    $97cebfa4133ebec3$var$liveAnnouncer.announce(message, assertiveness, timeout);
 }
 function $97cebfa4133ebec3$export$d10ae4f68404609a(assertiveness) {
-    $97cebfa4133ebec3$var$ensureInstance((announcer)=>announcer.clear(assertiveness)
-    );
+    if ($97cebfa4133ebec3$var$liveAnnouncer) $97cebfa4133ebec3$var$liveAnnouncer.clear(assertiveness);
 }
 function $97cebfa4133ebec3$export$d8686216b8b81b2f() {
-    if ($97cebfa4133ebec3$var$liveRegionAnnouncer.current) {
-        ($parcel$interopDefault($9snhK$reactdom)).unmountComponentAtNode($97cebfa4133ebec3$var$node);
-        document.body.removeChild($97cebfa4133ebec3$var$node);
-        $97cebfa4133ebec3$var$node = null;
+    if ($97cebfa4133ebec3$var$liveAnnouncer) {
+        $97cebfa4133ebec3$var$liveAnnouncer.destroy();
+        $97cebfa4133ebec3$var$liveAnnouncer = null;
     }
 }
-/**
- * Ensures we only have one instance of the announcer so that we don't have elements competing.
- */ function $97cebfa4133ebec3$var$ensureInstance(callback) {
-    if (!$97cebfa4133ebec3$var$liveRegionAnnouncer.current) {
-        $97cebfa4133ebec3$var$node = document.createElement('div');
-        $97cebfa4133ebec3$var$node.dataset.liveAnnouncer = 'true';
-        document.body.prepend($97cebfa4133ebec3$var$node);
-        ($parcel$interopDefault($9snhK$reactdom)).render(/*#__PURE__*/ ($parcel$interopDefault($9snhK$react)).createElement($97cebfa4133ebec3$var$LiveRegionAnnouncer, {
-            ref: $97cebfa4133ebec3$var$liveRegionAnnouncer
-        }), $97cebfa4133ebec3$var$node, ()=>callback($97cebfa4133ebec3$var$liveRegionAnnouncer.current)
-        );
-    } else callback($97cebfa4133ebec3$var$liveRegionAnnouncer.current);
-}
-const $97cebfa4133ebec3$var$LiveRegionAnnouncer = /*#__PURE__*/ ($parcel$interopDefault($9snhK$react)).forwardRef((_, ref)=>{
-    let [assertiveMessages, setAssertiveMessages] = $9snhK$react.useState([]);
-    let [politeMessages, setPoliteMessages] = $9snhK$react.useState([]);
-    let clear = (assertiveness)=>{
-        if (!assertiveness || assertiveness === 'assertive') setAssertiveMessages([]);
-        if (!assertiveness || assertiveness === 'polite') setPoliteMessages([]);
-    };
-    let $97cebfa4133ebec3$export$a9b970dcc4ae71a9 = (message1, assertiveness = 'assertive', timeout = $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY)=>{
-        let id = $97cebfa4133ebec3$var$messageId++;
-        if (assertiveness === 'assertive') setAssertiveMessages((messages)=>[
-                ...messages,
-                {
-                    id: id,
-                    text: message1
-                }
-            ]
-        );
-        else setPoliteMessages((messages)=>[
-                ...messages,
-                {
-                    id: id,
-                    text: message1
-                }
-            ]
-        );
-        if (message1 !== '') setTimeout(()=>{
-            if (assertiveness === 'assertive') setAssertiveMessages((messages)=>messages.filter((message)=>message.id !== id
-                )
-            );
-            else setPoliteMessages((messages)=>messages.filter((message)=>message.id !== id
-                )
-            );
+// LiveAnnouncer is implemented using vanilla DOM, not React. That's because as of React 18
+// ReactDOM.render is deprecated, and the replacement, ReactDOM.createRoot is moved into a
+// subpath import `react-dom/client`. That makes it hard for us to support multiple React versions.
+// As a global API, we can't use portals without introducing a breaking API change. LiveAnnouncer
+// is simple enough to implement without React, so that's what we do here.
+// See this discussion for more details: https://github.com/reactwg/react-18/discussions/125#discussioncomment-2382638
+class $97cebfa4133ebec3$var$LiveAnnouncer {
+    createLog(ariaLive) {
+        let node = document.createElement('div');
+        node.setAttribute('role', 'log');
+        node.setAttribute('aria-live', ariaLive);
+        node.setAttribute('aria-relevant', 'additions');
+        return node;
+    }
+    destroy() {
+        if (!this.node) return;
+        document.body.removeChild(this.node);
+        this.node = null;
+    }
+    announce(message, assertiveness = 'assertive', timeout = $97cebfa4133ebec3$var$LIVEREGION_TIMEOUT_DELAY) {
+        if (!this.node) return;
+        let node = document.createElement('div');
+        node.textContent = message;
+        if (assertiveness === 'assertive') this.assertiveLog.appendChild(node);
+        else this.politeLog.appendChild(node);
+        if (message !== '') setTimeout(()=>{
+            node.remove();
         }, timeout);
-    };
-    $9snhK$react.useImperativeHandle(ref, ()=>({
-            announce: $97cebfa4133ebec3$export$a9b970dcc4ae71a9,
-            clear: clear
-        })
-    );
-    return(/*#__PURE__*/ ($parcel$interopDefault($9snhK$react)).createElement($9snhK$react.Fragment, null, /*#__PURE__*/ ($parcel$interopDefault($9snhK$react)).createElement($97cebfa4133ebec3$var$MessageBlock, {
-        "aria-live": "assertive"
-    }, assertiveMessages.map((message)=>/*#__PURE__*/ ($parcel$interopDefault($9snhK$react)).createElement("div", {
-            key: message.id
-        }, message.text)
-    )), /*#__PURE__*/ ($parcel$interopDefault($9snhK$react)).createElement($97cebfa4133ebec3$var$MessageBlock, {
-        "aria-live": "polite"
-    }, politeMessages.map((message)=>/*#__PURE__*/ ($parcel$interopDefault($9snhK$react)).createElement("div", {
-            key: message.id
-        }, message.text)
-    ))));
-});
-function $97cebfa4133ebec3$var$MessageBlock({ children: children , 'aria-live': ariaLive  }) {
-    return(/*#__PURE__*/ ($parcel$interopDefault($9snhK$react)).createElement($9snhK$reactariavisuallyhidden.VisuallyHidden, {
-        role: "log",
-        "aria-live": ariaLive,
-        "aria-relevant": "additions"
-    }, children));
+    }
+    clear(assertiveness) {
+        if (!this.node) return;
+        if (!assertiveness || assertiveness === 'assertive') this.assertiveLog.innerHTML = '';
+        if (!assertiveness || assertiveness === 'polite') this.politeLog.innerHTML = '';
+    }
+    constructor(){
+        this.node = document.createElement('div');
+        this.node.dataset.liveAnnouncer = 'true';
+        // copied from VisuallyHidden
+        Object.assign(this.node.style, {
+            border: 0,
+            clip: 'rect(0 0 0 0)',
+            clipPath: 'inset(50%)',
+            height: 1,
+            margin: '0 -1px -1px 0',
+            overflow: 'hidden',
+            padding: 0,
+            position: 'absolute',
+            width: 1,
+            whiteSpace: 'nowrap'
+        });
+        this.assertiveLog = this.createLog('assertive');
+        this.node.appendChild(this.assertiveLog);
+        this.politeLog = this.createLog('polite');
+        this.node.appendChild(this.politeLog);
+        document.body.prepend(this.node);
+    }
 }
 
 

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/live-announcer/src/index.ts","packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './LiveAnnouncer';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {Fragment, ReactNode, RefObject, useImperativeHandle, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {VisuallyHidden} from '@react-aria/visually-hidden';\n\ntype Assertiveness = 'assertive' | 'polite';\ninterface Announcer {\n  announce(message: string, assertiveness: Assertiveness, timeout: number): void,\n  clear(assertiveness: Assertiveness): void\n}\n\n/* Inspired by https://github.com/AlmeroSteyn/react-aria-live */\nconst LIVEREGION_TIMEOUT_DELAY = 7000;\n\nlet liveRegionAnnouncer = React.createRef<Announcer>();\nlet node: HTMLElement = null;\nlet messageId = 0;\n\n/**\n * Announces the message using screen reader technology.\n */\nexport function announce(\n  message: string,\n  assertiveness: Assertiveness = 'assertive',\n  timeout = LIVEREGION_TIMEOUT_DELAY\n) {\n  ensureInstance(announcer => announcer.announce(message, assertiveness, timeout));\n}\n\n/**\n * Stops all queued announcements.\n */\nexport function clearAnnouncer(assertiveness: Assertiveness) {\n  ensureInstance(announcer => announcer.clear(assertiveness));\n}\n\n/**\n * Removes the announcer from the DOM.\n */\nexport function destroyAnnouncer() {\n  if (liveRegionAnnouncer.current) {\n    ReactDOM.unmountComponentAtNode(node);\n    document.body.removeChild(node);\n    node = null;\n  }\n}\n\n/**\n * Ensures we only have one instance of the announcer so that we don't have elements competing.\n */\nfunction ensureInstance(callback: (announcer: Announcer) => void) {\n  if (!liveRegionAnnouncer.current) {\n    node = document.createElement('div');\n    node.dataset.liveAnnouncer = 'true';\n    document.body.prepend(node);\n    ReactDOM.render(\n      <LiveRegionAnnouncer ref={liveRegionAnnouncer} />,\n      node,\n      () => callback(liveRegionAnnouncer.current)\n    );\n  } else {\n    callback(liveRegionAnnouncer.current);\n  }\n}\n\nconst LiveRegionAnnouncer = React.forwardRef((_, ref: RefObject<Announcer>) => {\n  let [assertiveMessages, setAssertiveMessages] = useState([]);\n  let [politeMessages, setPoliteMessages] = useState([]);\n\n  let clear = (assertiveness: Assertiveness) => {\n    if (!assertiveness || assertiveness === 'assertive') {\n      setAssertiveMessages([]);\n    }\n\n    if (!assertiveness || assertiveness === 'polite') {\n      setPoliteMessages([]);\n    }\n  };\n\n  let announce = (message: string, assertiveness = 'assertive', timeout = LIVEREGION_TIMEOUT_DELAY) => {\n    let id = messageId++;\n\n    if (assertiveness === 'assertive') {\n      setAssertiveMessages(messages => [...messages, {id, text: message}]);\n    } else {\n      setPoliteMessages(messages => [...messages, {id, text: message}]);\n    }\n\n    if (message !== '') {\n      setTimeout(() => {\n        if (assertiveness === 'assertive') {\n          setAssertiveMessages(messages => messages.filter(message => message.id !== id));\n        } else {\n          setPoliteMessages(messages => messages.filter(message => message.id !== id));\n        }\n      }, timeout);\n    }\n  };\n\n  useImperativeHandle(ref, () => ({\n    announce,\n    clear\n  }));\n\n  return (\n    <Fragment>\n      <MessageBlock aria-live=\"assertive\">\n        {assertiveMessages.map(message => <div key={message.id}>{message.text}</div>)}\n      </MessageBlock>\n      <MessageBlock aria-live=\"polite\">\n        {politeMessages.map(message => <div key={message.id}>{message.text}</div>)}\n      </MessageBlock>\n    </Fragment>\n  );\n});\n\ninterface MessageBlockProps {\n   children: ReactNode,\n   'aria-live': Assertiveness\n }\n\nfunction MessageBlock({children, 'aria-live': ariaLive}: MessageBlockProps) {\n  return (\n    <VisuallyHidden\n      role=\"log\"\n      aria-live={ariaLive}\n      aria-relevant=\"additions\">\n      {children}\n    </VisuallyHidden>\n  );\n}\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/live-announcer/src/index.ts","packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './LiveAnnouncer';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\ntype Assertiveness = 'assertive' | 'polite';\n\n/* Inspired by https://github.com/AlmeroSteyn/react-aria-live */\nconst LIVEREGION_TIMEOUT_DELAY = 7000;\n\nlet liveAnnouncer: LiveAnnouncer = null;\n\n/**\n * Announces the message using screen reader technology.\n */\nexport function announce(\n  message: string,\n  assertiveness: Assertiveness = 'assertive',\n  timeout = LIVEREGION_TIMEOUT_DELAY\n) {\n  if (!liveAnnouncer) {\n    liveAnnouncer = new LiveAnnouncer();\n  }\n\n  liveAnnouncer.announce(message, assertiveness, timeout);\n}\n\n/**\n * Stops all queued announcements.\n */\nexport function clearAnnouncer(assertiveness: Assertiveness) {\n  if (liveAnnouncer) {\n    liveAnnouncer.clear(assertiveness);\n  }\n}\n\n/**\n * Removes the announcer from the DOM.\n */\nexport function destroyAnnouncer() {\n  if (liveAnnouncer) {\n    liveAnnouncer.destroy();\n    liveAnnouncer = null;\n  }\n}\n\n// LiveAnnouncer is implemented using vanilla DOM, not React. That's because as of React 18\n// ReactDOM.render is deprecated, and the replacement, ReactDOM.createRoot is moved into a\n// subpath import `react-dom/client`. That makes it hard for us to support multiple React versions.\n// As a global API, we can't use portals without introducing a breaking API change. LiveAnnouncer\n// is simple enough to implement without React, so that's what we do here.\n// See this discussion for more details: https://github.com/reactwg/react-18/discussions/125#discussioncomment-2382638\nclass LiveAnnouncer {\n  node: HTMLElement;\n  assertiveLog: HTMLElement;\n  politeLog: HTMLElement;\n\n  constructor() {\n    this.node = document.createElement('div');\n    this.node.dataset.liveAnnouncer = 'true';\n    // copied from VisuallyHidden\n    Object.assign(this.node.style, {\n      border: 0,\n      clip: 'rect(0 0 0 0)',\n      clipPath: 'inset(50%)',\n      height: 1,\n      margin: '0 -1px -1px 0',\n      overflow: 'hidden',\n      padding: 0,\n      position: 'absolute',\n      width: 1,\n      whiteSpace: 'nowrap'\n    });\n\n    this.assertiveLog = this.createLog('assertive');\n    this.node.appendChild(this.assertiveLog);\n\n    this.politeLog = this.createLog('polite');\n    this.node.appendChild(this.politeLog);\n\n    document.body.prepend(this.node);\n  }\n\n  createLog(ariaLive: string) {\n    let node = document.createElement('div');\n    node.setAttribute('role', 'log');\n    node.setAttribute('aria-live', ariaLive);\n    node.setAttribute('aria-relevant', 'additions');\n    return node;\n  }\n\n  destroy() {\n    if (!this.node) {\n      return;\n    }\n\n    document.body.removeChild(this.node);\n    this.node = null;\n  }\n\n  announce(message: string, assertiveness = 'assertive', timeout = LIVEREGION_TIMEOUT_DELAY) {\n    if (!this.node) {\n      return;\n    }\n\n    let node = document.createElement('div');\n    node.textContent = message;\n\n    if (assertiveness === 'assertive') {\n      this.assertiveLog.appendChild(node);\n    } else {\n      this.politeLog.appendChild(node);\n    }\n\n    if (message !== '') {\n      setTimeout(() => {\n        node.remove();\n      }, timeout);\n    }\n  }\n\n  clear(assertiveness: Assertiveness) {\n    if (!this.node) {\n      return;\n    }\n\n    if (!assertiveness || assertiveness === 'assertive') {\n      this.assertiveLog.innerHTML = '';\n    }\n\n    if (!assertiveness || assertiveness === 'polite') {\n      this.politeLog.innerHTML = '';\n    }\n  }\n}\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,7 +1,3 @@
-import $9Q8De$react, {useState as $9Q8De$useState, useImperativeHandle as $9Q8De$useImperativeHandle, Fragment as $9Q8De$Fragment} from "react";
-import $9Q8De$reactdom from "react-dom";
-import {VisuallyHidden as $9Q8De$VisuallyHidden} from "@react-aria/visually-hidden";
-
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
@@ -10,98 +6,77 @@ var $319e236875307eab$exports = {};
 $parcel$export($319e236875307eab$exports, "announce", () => $319e236875307eab$export$a9b970dcc4ae71a9);
 $parcel$export($319e236875307eab$exports, "clearAnnouncer", () => $319e236875307eab$export$d10ae4f68404609a);
 $parcel$export($319e236875307eab$exports, "destroyAnnouncer", () => $319e236875307eab$export$d8686216b8b81b2f);
-
-
-
 /* Inspired by https://github.com/AlmeroSteyn/react-aria-live */ const $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY = 7000;
-let $319e236875307eab$var$liveRegionAnnouncer = /*#__PURE__*/ $9Q8De$react.createRef();
-let $319e236875307eab$var$node = null;
-let $319e236875307eab$var$messageId = 0;
+let $319e236875307eab$var$liveAnnouncer = null;
 function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
-    $319e236875307eab$var$ensureInstance((announcer)=>announcer.announce(message, assertiveness, timeout)
-    );
+    if (!$319e236875307eab$var$liveAnnouncer) $319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer();
+    $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
 }
 function $319e236875307eab$export$d10ae4f68404609a(assertiveness) {
-    $319e236875307eab$var$ensureInstance((announcer)=>announcer.clear(assertiveness)
-    );
+    if ($319e236875307eab$var$liveAnnouncer) $319e236875307eab$var$liveAnnouncer.clear(assertiveness);
 }
 function $319e236875307eab$export$d8686216b8b81b2f() {
-    if ($319e236875307eab$var$liveRegionAnnouncer.current) {
-        $9Q8De$reactdom.unmountComponentAtNode($319e236875307eab$var$node);
-        document.body.removeChild($319e236875307eab$var$node);
-        $319e236875307eab$var$node = null;
+    if ($319e236875307eab$var$liveAnnouncer) {
+        $319e236875307eab$var$liveAnnouncer.destroy();
+        $319e236875307eab$var$liveAnnouncer = null;
     }
 }
-/**
- * Ensures we only have one instance of the announcer so that we don't have elements competing.
- */ function $319e236875307eab$var$ensureInstance(callback) {
-    if (!$319e236875307eab$var$liveRegionAnnouncer.current) {
-        $319e236875307eab$var$node = document.createElement('div');
-        $319e236875307eab$var$node.dataset.liveAnnouncer = 'true';
-        document.body.prepend($319e236875307eab$var$node);
-        $9Q8De$reactdom.render(/*#__PURE__*/ $9Q8De$react.createElement($319e236875307eab$var$LiveRegionAnnouncer, {
-            ref: $319e236875307eab$var$liveRegionAnnouncer
-        }), $319e236875307eab$var$node, ()=>callback($319e236875307eab$var$liveRegionAnnouncer.current)
-        );
-    } else callback($319e236875307eab$var$liveRegionAnnouncer.current);
-}
-const $319e236875307eab$var$LiveRegionAnnouncer = /*#__PURE__*/ $9Q8De$react.forwardRef((_, ref)=>{
-    let [assertiveMessages, setAssertiveMessages] = $9Q8De$useState([]);
-    let [politeMessages, setPoliteMessages] = $9Q8De$useState([]);
-    let clear = (assertiveness)=>{
-        if (!assertiveness || assertiveness === 'assertive') setAssertiveMessages([]);
-        if (!assertiveness || assertiveness === 'polite') setPoliteMessages([]);
-    };
-    let $319e236875307eab$export$a9b970dcc4ae71a9 = (message1, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY)=>{
-        let id = $319e236875307eab$var$messageId++;
-        if (assertiveness === 'assertive') setAssertiveMessages((messages)=>[
-                ...messages,
-                {
-                    id: id,
-                    text: message1
-                }
-            ]
-        );
-        else setPoliteMessages((messages)=>[
-                ...messages,
-                {
-                    id: id,
-                    text: message1
-                }
-            ]
-        );
-        if (message1 !== '') setTimeout(()=>{
-            if (assertiveness === 'assertive') setAssertiveMessages((messages)=>messages.filter((message)=>message.id !== id
-                )
-            );
-            else setPoliteMessages((messages)=>messages.filter((message)=>message.id !== id
-                )
-            );
+// LiveAnnouncer is implemented using vanilla DOM, not React. That's because as of React 18
+// ReactDOM.render is deprecated, and the replacement, ReactDOM.createRoot is moved into a
+// subpath import `react-dom/client`. That makes it hard for us to support multiple React versions.
+// As a global API, we can't use portals without introducing a breaking API change. LiveAnnouncer
+// is simple enough to implement without React, so that's what we do here.
+// See this discussion for more details: https://github.com/reactwg/react-18/discussions/125#discussioncomment-2382638
+class $319e236875307eab$var$LiveAnnouncer {
+    createLog(ariaLive) {
+        let node = document.createElement('div');
+        node.setAttribute('role', 'log');
+        node.setAttribute('aria-live', ariaLive);
+        node.setAttribute('aria-relevant', 'additions');
+        return node;
+    }
+    destroy() {
+        if (!this.node) return;
+        document.body.removeChild(this.node);
+        this.node = null;
+    }
+    announce(message, assertiveness = 'assertive', timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
+        if (!this.node) return;
+        let node = document.createElement('div');
+        node.textContent = message;
+        if (assertiveness === 'assertive') this.assertiveLog.appendChild(node);
+        else this.politeLog.appendChild(node);
+        if (message !== '') setTimeout(()=>{
+            node.remove();
         }, timeout);
-    };
-    $9Q8De$useImperativeHandle(ref, ()=>({
-            announce: $319e236875307eab$export$a9b970dcc4ae71a9,
-            clear: clear
-        })
-    );
-    return(/*#__PURE__*/ $9Q8De$react.createElement($9Q8De$Fragment, null, /*#__PURE__*/ $9Q8De$react.createElement($319e236875307eab$var$MessageBlock, {
-        "aria-live": "assertive"
-    }, assertiveMessages.map((message)=>/*#__PURE__*/ $9Q8De$react.createElement("div", {
-            key: message.id
-        }, message.text)
-    )), /*#__PURE__*/ $9Q8De$react.createElement($319e236875307eab$var$MessageBlock, {
-        "aria-live": "polite"
-    }, politeMessages.map((message)=>/*#__PURE__*/ $9Q8De$react.createElement("div", {
-            key: message.id
-        }, message.text)
-    ))));
-});
-function $319e236875307eab$var$MessageBlock({ children: children , 'aria-live': ariaLive  }) {
-    return(/*#__PURE__*/ $9Q8De$react.createElement($9Q8De$VisuallyHidden, {
-        role: "log",
-        "aria-live": ariaLive,
-        "aria-relevant": "additions"
-    }, children));
+    }
+    clear(assertiveness) {
+        if (!this.node) return;
+        if (!assertiveness || assertiveness === 'assertive') this.assertiveLog.innerHTML = '';
+        if (!assertiveness || assertiveness === 'polite') this.politeLog.innerHTML = '';
+    }
+    constructor(){
+        this.node = document.createElement('div');
+        this.node.dataset.liveAnnouncer = 'true';
+        // copied from VisuallyHidden
+        Object.assign(this.node.style, {
+            border: 0,
+            clip: 'rect(0 0 0 0)',
+            clipPath: 'inset(50%)',
+            height: 1,
+            margin: '0 -1px -1px 0',
+            overflow: 'hidden',
+            padding: 0,
+            position: 'absolute',
+            width: 1,
+            whiteSpace: 'nowrap'
+        });
+        this.assertiveLog = this.createLog('assertive');
+        this.node.appendChild(this.assertiveLog);
+        this.politeLog = this.createLog('polite');
+        this.node.appendChild(this.politeLog);
+        document.body.prepend(this.node);
+    }
 }
 
 

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/live-announcer/src/index.ts","packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './LiveAnnouncer';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {Fragment, ReactNode, RefObject, useImperativeHandle, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {VisuallyHidden} from '@react-aria/visually-hidden';\n\ntype Assertiveness = 'assertive' | 'polite';\ninterface Announcer {\n  announce(message: string, assertiveness: Assertiveness, timeout: number): void,\n  clear(assertiveness: Assertiveness): void\n}\n\n/* Inspired by https://github.com/AlmeroSteyn/react-aria-live */\nconst LIVEREGION_TIMEOUT_DELAY = 7000;\n\nlet liveRegionAnnouncer = React.createRef<Announcer>();\nlet node: HTMLElement = null;\nlet messageId = 0;\n\n/**\n * Announces the message using screen reader technology.\n */\nexport function announce(\n  message: string,\n  assertiveness: Assertiveness = 'assertive',\n  timeout = LIVEREGION_TIMEOUT_DELAY\n) {\n  ensureInstance(announcer => announcer.announce(message, assertiveness, timeout));\n}\n\n/**\n * Stops all queued announcements.\n */\nexport function clearAnnouncer(assertiveness: Assertiveness) {\n  ensureInstance(announcer => announcer.clear(assertiveness));\n}\n\n/**\n * Removes the announcer from the DOM.\n */\nexport function destroyAnnouncer() {\n  if (liveRegionAnnouncer.current) {\n    ReactDOM.unmountComponentAtNode(node);\n    document.body.removeChild(node);\n    node = null;\n  }\n}\n\n/**\n * Ensures we only have one instance of the announcer so that we don't have elements competing.\n */\nfunction ensureInstance(callback: (announcer: Announcer) => void) {\n  if (!liveRegionAnnouncer.current) {\n    node = document.createElement('div');\n    node.dataset.liveAnnouncer = 'true';\n    document.body.prepend(node);\n    ReactDOM.render(\n      <LiveRegionAnnouncer ref={liveRegionAnnouncer} />,\n      node,\n      () => callback(liveRegionAnnouncer.current)\n    );\n  } else {\n    callback(liveRegionAnnouncer.current);\n  }\n}\n\nconst LiveRegionAnnouncer = React.forwardRef((_, ref: RefObject<Announcer>) => {\n  let [assertiveMessages, setAssertiveMessages] = useState([]);\n  let [politeMessages, setPoliteMessages] = useState([]);\n\n  let clear = (assertiveness: Assertiveness) => {\n    if (!assertiveness || assertiveness === 'assertive') {\n      setAssertiveMessages([]);\n    }\n\n    if (!assertiveness || assertiveness === 'polite') {\n      setPoliteMessages([]);\n    }\n  };\n\n  let announce = (message: string, assertiveness = 'assertive', timeout = LIVEREGION_TIMEOUT_DELAY) => {\n    let id = messageId++;\n\n    if (assertiveness === 'assertive') {\n      setAssertiveMessages(messages => [...messages, {id, text: message}]);\n    } else {\n      setPoliteMessages(messages => [...messages, {id, text: message}]);\n    }\n\n    if (message !== '') {\n      setTimeout(() => {\n        if (assertiveness === 'assertive') {\n          setAssertiveMessages(messages => messages.filter(message => message.id !== id));\n        } else {\n          setPoliteMessages(messages => messages.filter(message => message.id !== id));\n        }\n      }, timeout);\n    }\n  };\n\n  useImperativeHandle(ref, () => ({\n    announce,\n    clear\n  }));\n\n  return (\n    <Fragment>\n      <MessageBlock aria-live=\"assertive\">\n        {assertiveMessages.map(message => <div key={message.id}>{message.text}</div>)}\n      </MessageBlock>\n      <MessageBlock aria-live=\"polite\">\n        {politeMessages.map(message => <div key={message.id}>{message.text}</div>)}\n      </MessageBlock>\n    </Fragment>\n  );\n});\n\ninterface MessageBlockProps {\n   children: ReactNode,\n   'aria-live': Assertiveness\n }\n\nfunction MessageBlock({children, 'aria-live': ariaLive}: MessageBlockProps) {\n  return (\n    <VisuallyHidden\n      role=\"log\"\n      aria-live={ariaLive}\n      aria-relevant=\"additions\">\n      {children}\n    </VisuallyHidden>\n  );\n}\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/live-announcer/src/index.ts","packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './LiveAnnouncer';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\ntype Assertiveness = 'assertive' | 'polite';\n\n/* Inspired by https://github.com/AlmeroSteyn/react-aria-live */\nconst LIVEREGION_TIMEOUT_DELAY = 7000;\n\nlet liveAnnouncer: LiveAnnouncer = null;\n\n/**\n * Announces the message using screen reader technology.\n */\nexport function announce(\n  message: string,\n  assertiveness: Assertiveness = 'assertive',\n  timeout = LIVEREGION_TIMEOUT_DELAY\n) {\n  if (!liveAnnouncer) {\n    liveAnnouncer = new LiveAnnouncer();\n  }\n\n  liveAnnouncer.announce(message, assertiveness, timeout);\n}\n\n/**\n * Stops all queued announcements.\n */\nexport function clearAnnouncer(assertiveness: Assertiveness) {\n  if (liveAnnouncer) {\n    liveAnnouncer.clear(assertiveness);\n  }\n}\n\n/**\n * Removes the announcer from the DOM.\n */\nexport function destroyAnnouncer() {\n  if (liveAnnouncer) {\n    liveAnnouncer.destroy();\n    liveAnnouncer = null;\n  }\n}\n\n// LiveAnnouncer is implemented using vanilla DOM, not React. That's because as of React 18\n// ReactDOM.render is deprecated, and the replacement, ReactDOM.createRoot is moved into a\n// subpath import `react-dom/client`. That makes it hard for us to support multiple React versions.\n// As a global API, we can't use portals without introducing a breaking API change. LiveAnnouncer\n// is simple enough to implement without React, so that's what we do here.\n// See this discussion for more details: https://github.com/reactwg/react-18/discussions/125#discussioncomment-2382638\nclass LiveAnnouncer {\n  node: HTMLElement;\n  assertiveLog: HTMLElement;\n  politeLog: HTMLElement;\n\n  constructor() {\n    this.node = document.createElement('div');\n    this.node.dataset.liveAnnouncer = 'true';\n    // copied from VisuallyHidden\n    Object.assign(this.node.style, {\n      border: 0,\n      clip: 'rect(0 0 0 0)',\n      clipPath: 'inset(50%)',\n      height: 1,\n      margin: '0 -1px -1px 0',\n      overflow: 'hidden',\n      padding: 0,\n      position: 'absolute',\n      width: 1,\n      whiteSpace: 'nowrap'\n    });\n\n    this.assertiveLog = this.createLog('assertive');\n    this.node.appendChild(this.assertiveLog);\n\n    this.politeLog = this.createLog('polite');\n    this.node.appendChild(this.politeLog);\n\n    document.body.prepend(this.node);\n  }\n\n  createLog(ariaLive: string) {\n    let node = document.createElement('div');\n    node.setAttribute('role', 'log');\n    node.setAttribute('aria-live', ariaLive);\n    node.setAttribute('aria-relevant', 'additions');\n    return node;\n  }\n\n  destroy() {\n    if (!this.node) {\n      return;\n    }\n\n    document.body.removeChild(this.node);\n    this.node = null;\n  }\n\n  announce(message: string, assertiveness = 'assertive', timeout = LIVEREGION_TIMEOUT_DELAY) {\n    if (!this.node) {\n      return;\n    }\n\n    let node = document.createElement('div');\n    node.textContent = message;\n\n    if (assertiveness === 'assertive') {\n      this.assertiveLog.appendChild(node);\n    } else {\n      this.politeLog.appendChild(node);\n    }\n\n    if (message !== '') {\n      setTimeout(() => {\n        node.remove();\n      }, timeout);\n    }\n  }\n\n  clear(assertiveness: Assertiveness) {\n    if (!this.node) {\n      return;\n    }\n\n    if (!assertiveness || assertiveness === 'assertive') {\n      this.assertiveLog.innerHTML = '';\n    }\n\n    if (!assertiveness || assertiveness === 'polite') {\n      this.politeLog.innerHTML = '';\n    }\n  }\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"AAgBA,qBAAqB,WAAW,GAAG,QAAQ,CAAC;AAa5C;;GAEG;AACH,yBACE,OAAO,EAAE,MAAM,EACf,aAAa,GAAE,aAA2B,EAC1C,OAAO,SAA2B,QAGnC;AAED;;GAEG;AACH,+BAA+B,aAAa,EAAE,aAAa,QAE1D;AAED;;GAEG;AACH,yCAMC","sources":["packages/@react-aria/live-announcer/src/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx","packages/@react-aria/live-announcer/src/packages/@react-aria/live-announcer/src/index.ts","packages/@react-aria/live-announcer/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './LiveAnnouncer';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"AAYA,qBAAqB,WAAW,GAAG,QAAQ,CAAC;AAO5C;;GAEG;AACH,yBACE,OAAO,EAAE,MAAM,EACf,aAAa,GAAE,aAA2B,EAC1C,OAAO,SAA2B,QAOnC;AAED;;GAEG;AACH,+BAA+B,aAAa,EAAE,aAAa,QAI1D;AAED;;GAEG;AACH,yCAKC","sources":["packages/@react-aria/live-announcer/src/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx","packages/@react-aria/live-announcer/src/packages/@react-aria/live-announcer/src/index.ts","packages/@react-aria/live-announcer/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './LiveAnnouncer';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/live-announcer",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -17,16 +17,10 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-aria/utils": "^3.12.0",
-    "@react-aria/visually-hidden": "^3.2.8"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1"
+    "@babel/runtime": "^7.6.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
+  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
 }

package/src/LiveAnnouncer.tsx

@@ -10,22 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {Fragment, ReactNode, RefObject, useImperativeHandle, useState} from 'react';
-import ReactDOM from 'react-dom';
-import {VisuallyHidden} from '@react-aria/visually-hidden';
-
 type Assertiveness = 'assertive' | 'polite';
-interface Announcer {
-  announce(message: string, assertiveness: Assertiveness, timeout: number): void,
-  clear(assertiveness: Assertiveness): void
-}
 
 /* Inspired by https://github.com/AlmeroSteyn/react-aria-live */
 const LIVEREGION_TIMEOUT_DELAY = 7000;
 
-let liveRegionAnnouncer = React.createRef<Announcer>();
-let node: HTMLElement = null;
-let messageId = 0;
+let liveAnnouncer: LiveAnnouncer = null;
 
 /**
  * Announces the message using screen reader technology.
@@ -35,108 +25,118 @@ export function announce(
   assertiveness: Assertiveness = 'assertive',
   timeout = LIVEREGION_TIMEOUT_DELAY
 ) {
-  ensureInstance(announcer => announcer.announce(message, assertiveness, timeout));
+  if (!liveAnnouncer) {
+    liveAnnouncer = new LiveAnnouncer();
+  }
+
+  liveAnnouncer.announce(message, assertiveness, timeout);
 }
 
 /**
  * Stops all queued announcements.
  */
 export function clearAnnouncer(assertiveness: Assertiveness) {
-  ensureInstance(announcer => announcer.clear(assertiveness));
+  if (liveAnnouncer) {
+    liveAnnouncer.clear(assertiveness);
+  }
 }
 
 /**
  * Removes the announcer from the DOM.
  */
 export function destroyAnnouncer() {
-  if (liveRegionAnnouncer.current) {
-    ReactDOM.unmountComponentAtNode(node);
-    document.body.removeChild(node);
-    node = null;
+  if (liveAnnouncer) {
+    liveAnnouncer.destroy();
+    liveAnnouncer = null;
   }
 }
 
-/**
- * Ensures we only have one instance of the announcer so that we don't have elements competing.
- */
-function ensureInstance(callback: (announcer: Announcer) => void) {
-  if (!liveRegionAnnouncer.current) {
-    node = document.createElement('div');
-    node.dataset.liveAnnouncer = 'true';
-    document.body.prepend(node);
-    ReactDOM.render(
-      <LiveRegionAnnouncer ref={liveRegionAnnouncer} />,
-      node,
-      () => callback(liveRegionAnnouncer.current)
-    );
-  } else {
-    callback(liveRegionAnnouncer.current);
+// LiveAnnouncer is implemented using vanilla DOM, not React. That's because as of React 18
+// ReactDOM.render is deprecated, and the replacement, ReactDOM.createRoot is moved into a
+// subpath import `react-dom/client`. That makes it hard for us to support multiple React versions.
+// As a global API, we can't use portals without introducing a breaking API change. LiveAnnouncer
+// is simple enough to implement without React, so that's what we do here.
+// See this discussion for more details: https://github.com/reactwg/react-18/discussions/125#discussioncomment-2382638
+class LiveAnnouncer {
+  node: HTMLElement;
+  assertiveLog: HTMLElement;
+  politeLog: HTMLElement;
+
+  constructor() {
+    this.node = document.createElement('div');
+    this.node.dataset.liveAnnouncer = 'true';
+    // copied from VisuallyHidden
+    Object.assign(this.node.style, {
+      border: 0,
+      clip: 'rect(0 0 0 0)',
+      clipPath: 'inset(50%)',
+      height: 1,
+      margin: '0 -1px -1px 0',
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      width: 1,
+      whiteSpace: 'nowrap'
+    });
+
+    this.assertiveLog = this.createLog('assertive');
+    this.node.appendChild(this.assertiveLog);
+
+    this.politeLog = this.createLog('polite');
+    this.node.appendChild(this.politeLog);
+
+    document.body.prepend(this.node);
   }
-}
 
-const LiveRegionAnnouncer = React.forwardRef((_, ref: RefObject<Announcer>) => {
-  let [assertiveMessages, setAssertiveMessages] = useState([]);
-  let [politeMessages, setPoliteMessages] = useState([]);
+  createLog(ariaLive: string) {
+    let node = document.createElement('div');
+    node.setAttribute('role', 'log');
+    node.setAttribute('aria-live', ariaLive);
+    node.setAttribute('aria-relevant', 'additions');
+    return node;
+  }
 
-  let clear = (assertiveness: Assertiveness) => {
-    if (!assertiveness || assertiveness === 'assertive') {
-      setAssertiveMessages([]);
+  destroy() {
+    if (!this.node) {
+      return;
     }
 
-    if (!assertiveness || assertiveness === 'polite') {
-      setPoliteMessages([]);
+    document.body.removeChild(this.node);
+    this.node = null;
+  }
+
+  announce(message: string, assertiveness = 'assertive', timeout = LIVEREGION_TIMEOUT_DELAY) {
+    if (!this.node) {
+      return;
     }
-  };
 
-  let announce = (message: string, assertiveness = 'assertive', timeout = LIVEREGION_TIMEOUT_DELAY) => {
-    let id = messageId++;
+    let node = document.createElement('div');
+    node.textContent = message;
 
     if (assertiveness === 'assertive') {
-      setAssertiveMessages(messages => [...messages, {id, text: message}]);
+      this.assertiveLog.appendChild(node);
     } else {
-      setPoliteMessages(messages => [...messages, {id, text: message}]);
+      this.politeLog.appendChild(node);
     }
 
     if (message !== '') {
       setTimeout(() => {
-        if (assertiveness === 'assertive') {
-          setAssertiveMessages(messages => messages.filter(message => message.id !== id));
-        } else {
-          setPoliteMessages(messages => messages.filter(message => message.id !== id));
-        }
+        node.remove();
       }, timeout);
     }
-  };
-
-  useImperativeHandle(ref, () => ({
-    announce,
-    clear
-  }));
-
-  return (
-    <Fragment>
-      <MessageBlock aria-live="assertive">
-        {assertiveMessages.map(message => <div key={message.id}>{message.text}</div>)}
-      </MessageBlock>
-      <MessageBlock aria-live="polite">
-        {politeMessages.map(message => <div key={message.id}>{message.text}</div>)}
-      </MessageBlock>
-    </Fragment>
-  );
-});
-
-interface MessageBlockProps {
-   children: ReactNode,
-   'aria-live': Assertiveness
- }
-
-function MessageBlock({children, 'aria-live': ariaLive}: MessageBlockProps) {
-  return (
-    <VisuallyHidden
-      role="log"
-      aria-live={ariaLive}
-      aria-relevant="additions">
-      {children}
-    </VisuallyHidden>
-  );
+  }
+
+  clear(assertiveness: Assertiveness) {
+    if (!this.node) {
+      return;
+    }
+
+    if (!assertiveness || assertiveness === 'assertive') {
+      this.assertiveLog.innerHTML = '';
+    }
+
+    if (!assertiveness || assertiveness === 'polite') {
+      this.politeLog.innerHTML = '';
+    }
+  }
 }