From 878952aac2907f8b788ef0eed2610dc234e0177f Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Wed, 2 Feb 2022 22:23:30 -0300
Subject: [PATCH 1/8] Accessibility improvements on home page

---
 lib/livebook_web/live/explore_helpers.ex                   | 2 +-
 lib/livebook_web/live/file_select_component.ex             | 7 ++++++-
 lib/livebook_web/live/home_live.ex                         | 2 +-
 .../live/home_live/import_content_component.ex             | 4 +++-
 .../live/home_live/import_file_upload_component.ex         | 4 ++--
 lib/livebook_web/live/home_live/import_url_component.ex    | 3 ++-
 lib/livebook_web/live/home_live/session_list_component.ex  | 5 +++--
 7 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/lib/livebook_web/live/explore_helpers.ex b/lib/livebook_web/live/explore_helpers.ex
index 93aabf5c2e4..c976709237d 100644
--- a/lib/livebook_web/live/explore_helpers.ex
+++ b/lib/livebook_web/live/explore_helpers.ex
@@ -11,7 +11,7 @@ defmodule LivebookWeb.ExploreHelpers do
     <div class="flex flex-col">
       <%= live_redirect to: Routes.explore_path(@socket, :notebook, @notebook_info.slug),
             class: "flex items-center justify-center p-6 border-2 border-gray-100 rounded-t-2xl h-[150px]" do %>
-        <img src={@notebook_info.details.cover_url} class="max-h-full max-w-[75%]" />
+        <img src={@notebook_info.details.cover_url} class="max-h-full max-w-[75%]" alt={"#{@notebook_info.title} logo"} />
       <% end %>
       <div class="px-6 py-4 bg-gray-100 rounded-b-2xl grow">
         <%= live_redirect @notebook_info.title,
diff --git a/lib/livebook_web/live/file_select_component.ex b/lib/livebook_web/live/file_select_component.ex
index 92cd0866b96..65478cfb1c9 100644
--- a/lib/livebook_web/live/file_select_component.ex
+++ b/lib/livebook_web/live/file_select_component.ex
@@ -77,6 +77,7 @@ defmodule LivebookWeb.FileSelectComponent do
             phx-target={@myself}>
             <input class="input"
               id="input-path"
+              aria-label="file path"
               phx-hook="FocusOnUpdate"
               type="text"
               name="path"
@@ -145,6 +146,7 @@ defmodule LivebookWeb.FileSelectComponent do
                 phx-target={@myself}>
                 <input
                   id="new_dir_input"
+                  aria-label="new directory"
                   type="text"
                   spellcheck="false"
                   autocomplete="off"
@@ -267,13 +269,14 @@ defmodule LivebookWeb.FileSelectComponent do
       <:toggle>
         <button class="w-full flex space-x-2 items-center p-2 rounded-lg hover:bg-gray-100 focus:ring-1 focus:ring-gray-400"
           data-toggle
+          aria-label={"path to #{if @file_info.name == "..", do: "parent directory", else: @file_info.name}"}
           phx-click="set_path"
           phx-value-path={@file_info.file.path}
           phx-target={@myself}>
           <span class="block">
             <.remix_icon icon={@icon} class={"text-xl align-middle #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-400")}"} />
           </span>
-          <span class={"flex font-medium overflow-hidden whitespace-nowrap #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-500")}"}>
+          <span id="file-info-path" class={"flex font-medium overflow-hidden whitespace-nowrap #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-500")}"}>
             <%= if @file_info.highlighted != "" do %>
               <span class={
                 "font-medium
@@ -292,6 +295,7 @@ defmodule LivebookWeb.FileSelectComponent do
         <%= if @file_info.editable do %>
           <button class="menu-item text-gray-500"
             role="menuitem"
+            aria-label="rename file"
             phx-click="rename_file"
             phx-target={@myself}
             phx-value-path={@file_info.file.path}>
@@ -300,6 +304,7 @@ defmodule LivebookWeb.FileSelectComponent do
           </button>
           <button class="menu-item text-red-600"
             role="menuitem"
+            aria-label="delete file"
             phx-click="delete_file"
             phx-target={@myself}
             phx-value-path={@file_info.file.path}>
diff --git a/lib/livebook_web/live/home_live.ex b/lib/livebook_web/live/home_live.ex
index 941f281c981..e58d534e954 100644
--- a/lib/livebook_web/live/home_live.ex
+++ b/lib/livebook_web/live/home_live.ex
@@ -41,7 +41,7 @@ defmodule LivebookWeb.HomeLive do
       <div class="grow px-6 py-8 overflow-y-auto">
         <div class="max-w-screen-lg w-full mx-auto px-4 pb-8 space-y-4">
           <div class="flex flex-col space-y-2 items-center pb-4 border-b border-gray-200
-                      sm:flex-row sm:space-y-0 sm:justify-between">
+                      sm:flex-row sm:space-y-0 sm:justify-between" role="heading" aria-level="1">
             <div class="text-2xl text-gray-800 font-semibold">
               <img src="/images/logo-with-text.png" class="h-[50px]" alt="Livebook" />
             </div>
diff --git a/lib/livebook_web/live/home_live/import_content_component.ex b/lib/livebook_web/live/home_live/import_content_component.ex
index 28aeb5a332d..9b914dc3134 100644
--- a/lib/livebook_web/live/home_live/import_content_component.ex
+++ b/lib/livebook_web/live/home_live/import_content_component.ex
@@ -10,10 +10,11 @@ defmodule LivebookWeb.HomeLive.ImportContentComponent do
   def render(assigns) do
     ~H"""
     <div class="flex-col space-y-5">
-      <p class="text-gray-700">
+      <p class="text-gray-700" id="import-from-content">
         Import notebook by directly pasting the <span class="font-semibold">live markdown</span> content.
       </p>
       <.form let={f} for={:data}
+        id="import-content"
         phx-submit="import"
         phx-change="validate"
         phx-target={@myself}
@@ -21,6 +22,7 @@ defmodule LivebookWeb.HomeLive.ImportContentComponent do
         <%= textarea f, :content, value: @content, class: "input resize-none",
               placeholder: "Notebook content",
               autofocus: true,
+              aria_labelledby: "import-from-content",
               spellcheck: "false",
               rows: 5 %>
         <button class="mt-5 button-base button-blue" type="submit" disabled={@content == ""}>
diff --git a/lib/livebook_web/live/home_live/import_file_upload_component.ex b/lib/livebook_web/live/home_live/import_file_upload_component.ex
index 4948c86a7ff..a9a570914d3 100644
--- a/lib/livebook_web/live/home_live/import_file_upload_component.ex
+++ b/lib/livebook_web/live/home_live/import_file_upload_component.ex
@@ -13,7 +13,7 @@ defmodule LivebookWeb.HomeLive.ImportFileUploadComponent do
   def render(assigns) do
     ~H"""
     <div class="flex-col space-y-5">
-      <p class="text-gray-700">
+      <p class="text-gray-700" id="import-from-file">
         Drag and drop a <code>.livemd</code> file below to import it.
       </p>
       <form id="upload-file-form"
@@ -24,7 +24,7 @@ defmodule LivebookWeb.HomeLive.ImportFileUploadComponent do
         phx-hook="DragAndDrop"
         class="flex flex-col items-start"
       >
-        <%= live_file_input @uploads.notebook, class: "hidden" %>
+        <%= live_file_input @uploads.notebook, class: "hidden", aria_labelledby: "import-from-file" %>
         <div data-dropzone class="flex flex-col justify-center items-center w-full rounded-xl border-2 border-dashed border-gray-400 h-48">
           <%= if @uploads.notebook.entries == [] do %>
             <span name="placeholder" class="font-medium text-gray-400">Drop your notebook here</span>
diff --git a/lib/livebook_web/live/home_live/import_url_component.ex b/lib/livebook_web/live/home_live/import_url_component.ex
index c7e2507d50f..c4112fde3f8 100644
--- a/lib/livebook_web/live/home_live/import_url_component.ex
+++ b/lib/livebook_web/live/home_live/import_url_component.ex
@@ -26,7 +26,7 @@ defmodule LivebookWeb.HomeLive.ImportUrlComponent do
           <%= @error_message %>
         </div>
       <% end %>
-      <p class="text-gray-700">
+      <p class="text-gray-700" id="import-from-url">
         Paste the URL to a .livemd file, to a GitHub file, or to a Gist to import it.
       </p>
       <.form let={f} for={:data}
@@ -37,6 +37,7 @@ defmodule LivebookWeb.HomeLive.ImportUrlComponent do
         <%= text_input f, :url, value: @url, class: "input",
               placeholder: "Notebook URL",
               autofocus: true,
+              aria_labelledby: "import-from-url",
               spellcheck: "false" %>
         <button class="mt-5 button-base button-blue"
           type="submit"
diff --git a/lib/livebook_web/live/home_live/session_list_component.ex b/lib/livebook_web/live/home_live/session_list_component.ex
index 9254bcd8fc2..025a798bf99 100644
--- a/lib/livebook_web/live/home_live/session_list_component.ex
+++ b/lib/livebook_web/live/home_live/session_list_component.ex
@@ -107,6 +107,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
           data-test-session-id={session.id}>
           <div id={"#{session.id}-checkbox"} phx-update="ignore">
             <input type="checkbox" name="session_ids[]" value={session.id}
+              aria-label={session.notebook_name}
               class="checkbox-base hidden mr-3"
               data-element="bulk-edit-member"
               phx-click={JS.dispatch("lb:session_list:on_selection_change")}>
@@ -201,10 +202,10 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
   defp edit_sessions(assigns) do
     ~H"""
     <div class="mx-4 mr-2 text-gray-600 flex flex-row gap-1">
-      <.menu id="edit-sessions">
+      <.menu id="edit-sessions" aria-label="bulk actions for sessions">
         <:toggle>
           <button id="toggle-edit" class="w-28 button-base button-outlined-gray px-4 pl-2 py-1"
-            phx-click={toggle_edit(:on)} type="button">
+            phx-click={toggle_edit(:on)} type="button" aria-label="toggle edit">
             <.remix_icon icon="list-check-2" class="text-lg leading-none align-middle ml-1" />
             <span>Edit</span>
           </button>

From a4874e722204c922fce00dbb3c2edd602c94d6f4 Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Thu, 3 Feb 2022 17:48:00 -0300
Subject: [PATCH 2/8] Unique ids for file info path buttons

---
 lib/livebook_web/live/file_select_component.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/livebook_web/live/file_select_component.ex b/lib/livebook_web/live/file_select_component.ex
index 65478cfb1c9..bb87a79433a 100644
--- a/lib/livebook_web/live/file_select_component.ex
+++ b/lib/livebook_web/live/file_select_component.ex
@@ -276,7 +276,7 @@ defmodule LivebookWeb.FileSelectComponent do
           <span class="block">
             <.remix_icon icon={@icon} class={"text-xl align-middle #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-400")}"} />
           </span>
-          <span id="file-info-path" class={"flex font-medium overflow-hidden whitespace-nowrap #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-500")}"}>
+          <span id={"file-info-path-#{@file_info.name}"} class={"flex font-medium overflow-hidden whitespace-nowrap #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-500")}"}>
             <%= if @file_info.highlighted != "" do %>
               <span class={
                 "font-medium

From a5c11dfb9ce20c17ec0d95f4d93f5ca502316d62 Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Thu, 3 Feb 2022 22:46:03 -0300
Subject: [PATCH 3/8] Improves navigation for screen readers in the session
 list

---
 lib/livebook_web/live/file_select_component.ex            | 2 +-
 lib/livebook_web/live/home_live/session_list_component.ex | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/livebook_web/live/file_select_component.ex b/lib/livebook_web/live/file_select_component.ex
index bb87a79433a..f25b6c40d4e 100644
--- a/lib/livebook_web/live/file_select_component.ex
+++ b/lib/livebook_web/live/file_select_component.ex
@@ -269,7 +269,7 @@ defmodule LivebookWeb.FileSelectComponent do
       <:toggle>
         <button class="w-full flex space-x-2 items-center p-2 rounded-lg hover:bg-gray-100 focus:ring-1 focus:ring-gray-400"
           data-toggle
-          aria-label={"path to #{if @file_info.name == "..", do: "parent directory", else: @file_info.name}"}
+          aria-label={"#{if @file_info.name == "..", do: "parent directory", else: @file_info.name}"}
           phx-click="set_path"
           phx-value-path={@file_info.file.path}
           phx-target={@myself}>
diff --git a/lib/livebook_web/live/home_live/session_list_component.ex b/lib/livebook_web/live/home_live/session_list_component.ex
index dc177e8f8a2..b0e6edbe95f 100644
--- a/lib/livebook_web/live/home_live/session_list_component.ex
+++ b/lib/livebook_web/live/home_live/session_list_component.ex
@@ -181,7 +181,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
     assigns = assign(assigns, free: free, used: used, total: total, percentage: percentage)
 
     ~H"""
-    <div class="pr-4">
+    <div class="pr-4" aria-label="memory information">
       <span class="tooltip top" data-tooltip={"#{format_bytes(@free)} available"}>
       <svg viewbox="-10 5 50 25" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
         <circle cx="16.91549431" cy="16.91549431" r="15.91549431"
@@ -201,8 +201,8 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
 
   defp edit_sessions(assigns) do
     ~H"""
-    <div class="mx-4 mr-2 text-gray-600 flex flex-row gap-1">
-      <.menu id="edit-sessions" aria-label="bulk actions for sessions">
+    <div class="mx-4 mr-2 text-gray-600 flex flex-row gap-1" aria-label="bulk actions for sessions">
+      <.menu id="edit-sessions">
         <:toggle>
           <button id="toggle-edit" class="w-28 button-base button-outlined-gray px-4 pl-2 py-1"
             phx-click={toggle_edit(:on)} type="button" aria-label="toggle edit">

From 1943738630feb63c2cb19cf965f2284bbc00b2d3 Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Fri, 4 Feb 2022 00:40:06 -0300
Subject: [PATCH 4/8] Landmarks navigation for screen readers

---
 lib/livebook_web/live/home_live.ex       | 10 +++++-----
 lib/livebook_web/live/sidebar_helpers.ex |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/livebook_web/live/home_live.ex b/lib/livebook_web/live/home_live.ex
index 76d8ff060e1..6e04381c1b5 100644
--- a/lib/livebook_web/live/home_live.ex
+++ b/lib/livebook_web/live/home_live.ex
@@ -41,11 +41,11 @@ defmodule LivebookWeb.HomeLive do
       <div class="grow px-6 py-8 overflow-y-auto">
         <div class="max-w-screen-lg w-full mx-auto px-4 pb-8 space-y-4">
           <div class="flex flex-col space-y-2 items-center pb-4 border-b border-gray-200
-                      sm:flex-row sm:space-y-0 sm:justify-between" role="heading" aria-level="1">
+                      sm:flex-row sm:space-y-0 sm:justify-between">
             <div class="text-2xl text-gray-800 font-semibold">
               <img src="/images/logo-with-text.png" class="h-[50px]" alt="Livebook" />
             </div>
-            <div class="flex space-x-2 pt-2">
+            <div class="flex space-x-2 pt-2" role="navigation" aria-label="New notebook">
               <%= live_patch "Import",
                     to: Routes.home_path(@socket, :import, "url"),
                     class: "button-base button-outlined-gray whitespace-nowrap" %>
@@ -55,7 +55,7 @@ defmodule LivebookWeb.HomeLive do
             </div>
           </div>
 
-          <div class="h-80">
+          <div class="h-80" role="region" aria-label="file system">
             <.live_component module={LivebookWeb.FileSelectComponent}
                 id="home-file-select"
                 file={@file}
@@ -85,7 +85,7 @@ defmodule LivebookWeb.HomeLive do
             </.live_component>
           </div>
 
-          <div class="py-12" data-element="explore-section">
+          <div class="py-12" data-element="explore-section" role="region" aria-label="Explore Section">
             <div class="mb-4 flex justify-between items-center">
               <h2 class="uppercase font-semibold text-gray-500">
                 Explore
@@ -104,7 +104,7 @@ defmodule LivebookWeb.HomeLive do
               <% end %>
             </div>
           </div>
-          <div class="py-12">
+          <div class="py-12" role="region" aria-label="Running sessions">
             <.live_component module={LivebookWeb.HomeLive.SessionListComponent}
               id="session-list"
               sessions={@sessions}/>
diff --git a/lib/livebook_web/live/sidebar_helpers.ex b/lib/livebook_web/live/sidebar_helpers.ex
index 3ba1df7ef53..ef7579a94d2 100644
--- a/lib/livebook_web/live/sidebar_helpers.ex
+++ b/lib/livebook_web/live/sidebar_helpers.ex
@@ -14,7 +14,7 @@ defmodule LivebookWeb.SidebarHelpers do
   """
   def sidebar(assigns) do
     ~H"""
-    <nav class="w-16 flex flex-col items-center space-y-4 px-3 py-7 bg-gray-900">
+    <nav class="w-16 flex flex-col items-center space-y-4 px-3 py-7 bg-gray-900" aria-label="sidebar">
       <%= render_slot(@inner_block) %>
     </nav>
     """

From 2cc0f570e82db0ac17dbb6909bc862260b80dd97 Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Fri, 4 Feb 2022 00:44:48 -0300
Subject: [PATCH 5/8] Headings navigation for screen readers

---
 lib/livebook_web/live/file_select_component.ex | 1 +
 lib/livebook_web/live/home_live.ex             | 1 +
 2 files changed, 2 insertions(+)

diff --git a/lib/livebook_web/live/file_select_component.ex b/lib/livebook_web/live/file_select_component.ex
index f25b6c40d4e..ab9a0a027db 100644
--- a/lib/livebook_web/live/file_select_component.ex
+++ b/lib/livebook_web/live/file_select_component.ex
@@ -62,6 +62,7 @@ defmodule LivebookWeb.FileSelectComponent do
   def render(assigns) do
     ~H"""
     <div class="h-full flex flex-col">
+      <h2 class="sr-only">File system</h2>
       <div class="flex space-x-3 items-center mb-4">
         <div class="grow flex space-x-1">
           <.file_system_menu_button
diff --git a/lib/livebook_web/live/home_live.ex b/lib/livebook_web/live/home_live.ex
index 6e04381c1b5..06522fa8f64 100644
--- a/lib/livebook_web/live/home_live.ex
+++ b/lib/livebook_web/live/home_live.ex
@@ -44,6 +44,7 @@ defmodule LivebookWeb.HomeLive do
                       sm:flex-row sm:space-y-0 sm:justify-between">
             <div class="text-2xl text-gray-800 font-semibold">
               <img src="/images/logo-with-text.png" class="h-[50px]" alt="Livebook" />
+              <h1 class="sr-only">Livebook</h1>
             </div>
             <div class="flex space-x-2 pt-2" role="navigation" aria-label="New notebook">
               <%= live_patch "Import",

From 130a626e822aa5942edd6ff09805ad05abb011c4 Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Fri, 4 Feb 2022 01:31:39 -0300
Subject: [PATCH 6/8] Group navigation - running sessions list

---
 .../live/home_live/session_list_component.ex             | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/lib/livebook_web/live/home_live/session_list_component.ex b/lib/livebook_web/live/home_live/session_list_component.ex
index b0e6edbe95f..1b943cebbfd 100644
--- a/lib/livebook_web/live/home_live/session_list_component.ex
+++ b/lib/livebook_web/live/home_live/session_list_component.ex
@@ -51,7 +51,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
           <.menu id="sessions-order-menu">
             <:toggle>
               <button class="w-28 button-base button-outlined-gray px-4 py-1 flex justify-between items-center"
-                type="button">
+                type="button" aria-label={"order by - Currently ordered by #{order_by_label(@order_by)}"}>
                 <span><%= order_by_label(@order_by) %></span>
                 <.remix_icon icon="arrow-down-s-line" class="text-lg leading-none align-middle ml-1" />
               </button>
@@ -101,7 +101,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
 
   defp session_list(assigns) do
     ~H"""
-    <div class="flex flex-col">
+    <div class="flex flex-col" role="group" aria-label="running sessions list">
       <%= for session <- @sessions do %>
         <div class="py-4 flex items-center border-b border-gray-300"
           data-test-session-id={session.id}>
@@ -181,7 +181,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
     assigns = assign(assigns, free: free, used: used, total: total, percentage: percentage)
 
     ~H"""
-    <div class="pr-4" aria-label="memory information">
+    <div class="pr-4" role="group" aria-label="memory information">
       <span class="tooltip top" data-tooltip={"#{format_bytes(@free)} available"}>
       <svg viewbox="-10 5 50 25" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
         <circle cx="16.91549431" cy="16.91549431" r="15.91549431"
@@ -192,6 +192,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
       <div class="hidden md:flex">
         <span class="px-2 py-1 text-sm text-gray-500 font-medium">
           <%= format_bytes(@used) %> / <%= format_bytes(@total) %>
+          <span class="sr-only"><%= @percentage %> used</span>
         </span>
       </div>
       </span>
@@ -201,7 +202,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
 
   defp edit_sessions(assigns) do
     ~H"""
-    <div class="mx-4 mr-2 text-gray-600 flex flex-row gap-1" aria-label="bulk actions for sessions">
+    <div class="mx-4 mr-2 text-gray-600 flex flex-row gap-1" role="group" aria-label="bulk actions for sessions">
       <.menu id="edit-sessions">
         <:toggle>
           <button id="toggle-edit" class="w-28 button-base button-outlined-gray px-4 pl-2 py-1"

From 7951c176166823a7930d2117a066aaa8e7669af9 Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Fri, 4 Feb 2022 02:15:34 -0300
Subject: [PATCH 7/8] Fix typo

---
 lib/livebook_web/live/home_live/session_list_component.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/livebook_web/live/home_live/session_list_component.ex b/lib/livebook_web/live/home_live/session_list_component.ex
index 1b943cebbfd..c451b389572 100644
--- a/lib/livebook_web/live/home_live/session_list_component.ex
+++ b/lib/livebook_web/live/home_live/session_list_component.ex
@@ -192,7 +192,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
       <div class="hidden md:flex">
         <span class="px-2 py-1 text-sm text-gray-500 font-medium">
           <%= format_bytes(@used) %> / <%= format_bytes(@total) %>
-          <span class="sr-only"><%= @percentage %> used</span>
+          <span class="sr-only"><%= @percentage %> percent used</span>
         </span>
       </div>
       </span>

From 8ecfea1cadf521268eaa217d12bc583089760bf1 Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Fri, 4 Feb 2022 13:00:58 -0300
Subject: [PATCH 8/8] Minor adjustments based on review suggestions

---
 lib/livebook_web/live/file_select_component.ex            | 2 +-
 lib/livebook_web/live/home_live.ex                        | 6 +++---
 lib/livebook_web/live/home_live/session_list_component.ex | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/livebook_web/live/file_select_component.ex b/lib/livebook_web/live/file_select_component.ex
index ab9a0a027db..2f3dc5d889a 100644
--- a/lib/livebook_web/live/file_select_component.ex
+++ b/lib/livebook_web/live/file_select_component.ex
@@ -277,7 +277,7 @@ defmodule LivebookWeb.FileSelectComponent do
           <span class="block">
             <.remix_icon icon={@icon} class={"text-xl align-middle #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-400")}"} />
           </span>
-          <span id={"file-info-path-#{@file_info.name}"} class={"flex font-medium overflow-hidden whitespace-nowrap #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-500")}"}>
+          <span class={"flex font-medium overflow-hidden whitespace-nowrap #{if(@file_info.is_running, do: "text-green-300", else: "text-gray-500")}"}>
             <%= if @file_info.highlighted != "" do %>
               <span class={
                 "font-medium
diff --git a/lib/livebook_web/live/home_live.ex b/lib/livebook_web/live/home_live.ex
index 06522fa8f64..226035544c3 100644
--- a/lib/livebook_web/live/home_live.ex
+++ b/lib/livebook_web/live/home_live.ex
@@ -46,7 +46,7 @@ defmodule LivebookWeb.HomeLive do
               <img src="/images/logo-with-text.png" class="h-[50px]" alt="Livebook" />
               <h1 class="sr-only">Livebook</h1>
             </div>
-            <div class="flex space-x-2 pt-2" role="navigation" aria-label="New notebook">
+            <div class="flex space-x-2 pt-2" role="navigation" aria-label="new notebook">
               <%= live_patch "Import",
                     to: Routes.home_path(@socket, :import, "url"),
                     class: "button-base button-outlined-gray whitespace-nowrap" %>
@@ -86,7 +86,7 @@ defmodule LivebookWeb.HomeLive do
             </.live_component>
           </div>
 
-          <div class="py-12" data-element="explore-section" role="region" aria-label="Explore Section">
+          <div class="py-12" data-element="explore-section" role="region" aria-label="explore section">
             <div class="mb-4 flex justify-between items-center">
               <h2 class="uppercase font-semibold text-gray-500">
                 Explore
@@ -105,7 +105,7 @@ defmodule LivebookWeb.HomeLive do
               <% end %>
             </div>
           </div>
-          <div class="py-12" role="region" aria-label="Running sessions">
+          <div class="py-12" role="region" aria-label="running sessions">
             <.live_component module={LivebookWeb.HomeLive.SessionListComponent}
               id="session-list"
               sessions={@sessions}/>
diff --git a/lib/livebook_web/live/home_live/session_list_component.ex b/lib/livebook_web/live/home_live/session_list_component.ex
index c451b389572..10cf03db814 100644
--- a/lib/livebook_web/live/home_live/session_list_component.ex
+++ b/lib/livebook_web/live/home_live/session_list_component.ex
@@ -51,7 +51,7 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
           <.menu id="sessions-order-menu">
             <:toggle>
               <button class="w-28 button-base button-outlined-gray px-4 py-1 flex justify-between items-center"
-                type="button" aria-label={"order by - Currently ordered by #{order_by_label(@order_by)}"}>
+                type="button" aria-label={"order by - currently ordered by #{order_by_label(@order_by)}"}>
                 <span><%= order_by_label(@order_by) %></span>
                 <.remix_icon icon="arrow-down-s-line" class="text-lg leading-none align-middle ml-1" />
               </button>