From b32b363ed1ab98d6d751e26ae9795576ffb2d37e Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Thu, 17 Feb 2022 19:37:14 -0300
Subject: [PATCH] Improves cell accessibility (#1009)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Reads the output after a cell has been evaluated

* Creates SR landmarks when errors happen

* fixes formatting

* Reads a clearer message when a runtime restart is required

* Update lib/livebook_web/live/session_live/cell_component.ex

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
---
 lib/livebook_web/live/output.ex                      | 6 +++---
 lib/livebook_web/live/session_live/cell_component.ex | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/livebook_web/live/output.ex b/lib/livebook_web/live/output.ex
index 31b1763bc..93057b7fc 100644
--- a/lib/livebook_web/live/output.ex
+++ b/lib/livebook_web/live/output.ex
@@ -94,7 +94,7 @@ defmodule LivebookWeb.Output do
     assigns = %{formatted: formatted, is_standalone: Livebook.Runtime.standalone?(runtime)}
 
     ~H"""
-    <div class="flex flex-col space-y-4">
+    <div class="flex flex-col space-y-4" role="complementary" aria-label="runtime restart required">
       <%= render_error(@formatted) %>
       <%= if @is_standalone do %>
         <div>
@@ -142,7 +142,7 @@ defmodule LivebookWeb.Output do
     assigns = %{message: message}
 
     ~H"""
-    <div class="whitespace-pre-wrap font-editor text-gray-500"><%= ansi_string_to_html(@message) %></div>
+    <div class="whitespace-pre-wrap font-editor text-gray-500" role="complementary" aria-label="error"><%= ansi_string_to_html(@message) %></div>
     """
   end
 
@@ -150,7 +150,7 @@ defmodule LivebookWeb.Output do
     assigns = %{message: message}
 
     ~H"""
-    <div class="whitespace-pre-wrap font-editor text-red-600"><%= @message %></div>
+    <div class="whitespace-pre-wrap font-editor text-red-600" role="complementary" aria-label="error message"><%= @message %></div>
     """
   end
 end
diff --git a/lib/livebook_web/live/session_live/cell_component.ex b/lib/livebook_web/live/session_live/cell_component.ex
index 9194027d0..341de0831 100644
--- a/lib/livebook_web/live/session_live/cell_component.ex
+++ b/lib/livebook_web/live/session_live/cell_component.ex
@@ -137,6 +137,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     <.cell_body>
       <.editor cell_view={@cell_view} />
       <div class="flex flex-col"
+        aria-live="polite"
         data-element="outputs-container"
         id={"outputs-#{@cell_view.id}-#{@cell_view.outputs_batch_number}"}
         phx-update="append">