Live region for home page (#1007)

* Live region on home

* Live region: bulk actions

* Live region: ordered by info

* Makes the live region helper global

assets/js/app.js

@@ -116,6 +116,10 @@ window.addEventListener("lb:uncheck", (event) => {
   event.target.checked = false;
 });
 
+window.addEventListener("lb:set_text", (event) => {
+  event.target.textContent = event.detail.value;
+});
+
 window.addEventListener("lb:clipcopy", (event) => {
   if ("clipboard" in navigator) {
     const text = event.target.textContent;

lib/livebook_web/helpers.ex

@@ -389,4 +389,25 @@ defmodule LivebookWeb.Helpers do
   """
   def pluralize(1, singular, _plural), do: "1 #{singular}"
   def pluralize(count, _singular, plural), do: "#{count} #{plural}"
+
+  @doc """
+  Creates a live region with the given role.
+
+  ## Examples
+
+      <.live_region role="alert" />
+      <.live_region role="status" />
+  """
+  def live_region(assigns) do
+    ~H"""
+    <div class="sr-only" role={@role} id="live-region"></div>
+    """
+  end
+
+  @doc """
+  Sends a message to be read by the screen reader by changing the text content of the live region
+  """
+  def sr_message(js \\ %JS{}, message) do
+    JS.dispatch(js, "lb:set_text", to: "#live-region", detail: %{value: message})
+  end
 end

lib/livebook_web/live/home_live.ex

@@ -110,6 +110,7 @@ defmodule LivebookWeb.HomeLive do
               id="session-list"
               sessions={@sessions}/>
           </div>
+          <.live_region role="alert" />
         </div>
       </div>
     </div>

lib/livebook_web/live/home_live/session_list_component.ex

@@ -61,7 +61,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
                 <button class={"menu-item #{if order_by == @order_by, do: "text-gray-900", else: "text-gray-500"}"}
                   type="button"
                   role="menuitem"
-                  phx-click={JS.push("set_order", value: %{order_by: order_by}, target: @myself)}>
+                  phx-click={JS.push("set_order", value: %{order_by: order_by}, target: @myself) |> sr_message("ordered by #{order_by}")}>
                   <.remix_icon icon={order_by_icon(order_by)} />
                   <span class="font-medium"><%= order_by_label(order_by) %></span>
                 </button>
@@ -267,6 +267,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
     JS.remove_class("hidden", to: "[data-element='bulk-edit-member']")
     |> JS.add_class("hidden", to: "#toggle-edit")
     |> JS.dispatch("lb:session_list:on_selection_change")
+    |> sr_message("bulk actions available")
   end
 
   def toggle_edit(:off) do
@@ -274,6 +275,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
     |> JS.remove_class("hidden", to: "#toggle-edit")
     |> JS.dispatch("lb:uncheck", to: "[name='session_ids[]']")
     |> JS.dispatch("lb:session_list:on_selection_change")
+    |> sr_message("bulk actions canceled")
   end
 
   defp order_by_label("date"), do: "Date"
@@ -304,6 +306,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
   defp select_all() do
     JS.dispatch("lb:check", to: "[name='session_ids[]']")
     |> JS.dispatch("lb:session_list:on_selection_change")
+    |> sr_message("all sessions selected")
   end
 
   defp set_action(action) do