Improves cell accessibility (#1009)

* 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>
This commit is contained in:
Cristine Guadelupe 2022-02-17 19:37:14 -03:00 committed by GitHub
parent 8055858381
commit b32b363ed1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 3 deletions

View file

@ -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

View file

@ -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">