Render toast as aria-live region on page load (bigskysoftware#3112)

* Render toast as aria-live region on page load

This tells the screen reader to announce updates that happen inside the
`span#toast` element.

* Update code sample in example text

* Use <output> element to announce form action

www/content/examples/bulk-update.md

@@ -10,7 +10,7 @@ values in the form submission (`POST` request):
 ```html
 <form id="checked-contacts"
       hx-post="/users"
-      hx-swap="outerHTML settle:3s"
+      hx-swap="innerHTML settle:3s"
       hx-target="#toast">
     <table>
       <thead>
@@ -36,7 +36,11 @@ values in the form submission (`POST` request):
 
 The server will bulk-update the statuses based on the values of the checkboxes.
 We respond with a small toast message about the update to inform the user, and
-use ARIA to politely announce the update for accessibility.
+use an `<output>` element to politely announce the update for accessibility. Note
+that the `<output>` element is appropriate for announcing the result of an action
+in a specific form, but if you need to announce general-purpose messages that are
+not connected to a form it would make sense to use an ARIA live region, eg
+`<p id="toast" aria-live="polite"></p>`.
 
 ```css
 #toast.htmx-settling {
@@ -139,7 +143,7 @@ You can see a working example of this code below.
         }
       }
 
-      return `<span id="toast" aria-live="polite">Activated ${activated} and deactivated ${deactivated} users</span>`;
+      return `Activated ${activated} and deactivated ${deactivated} users`;
     });
 
     // templates
@@ -148,7 +152,7 @@ You can see a working example of this code below.
                <form
                 id="checked-contacts"
                 hx-post="/users"
-                hx-swap="outerHTML settle:3s"
+                hx-swap="innerHTML settle:3s"
                 hx-target="#toast"
               >
                 <table>
@@ -164,7 +168,7 @@ You can see a working example of this code below.
                   </tbody>
                 </table>
                 <input type="submit" value="Bulk Update" class="btn primary">
-                <span id="toast"></span>
+                <output id="toast"></output>
               </form>
               <br>`;
     }