Minor cleanup to make navigating by region easier.

* Make `<main>` the part of the page that actually changes when the route updates, thus making navigation to page content easier. * Add labelled region for persistent audio player.
fly-apps · Nov 22, 2021 · 5cf58b2 · 5cf58b2
1 parent d35554e
commit 5cf58b2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
@@ -9,7 +9,7 @@ defmodule LiveBeatsWeb.PlayerLive do
   def render(assigns) do
     ~H"""
     <!-- player -->
-    <div id="audio-player" phx-hook="AudioPlayer" class="w-full" >
+    <div id="audio-player" phx-hook="AudioPlayer" class="w-full" role="region" aria-label="Player" >
       <div phx-update="ignore">
         <audio></audio>
       </div>

diff --git a/lib/live_beats_web/templates/layout/live.html.heex b/lib/live_beats_web/templates/layout/live.html.heex
@@ -143,13 +143,13 @@
     </div>
   </div>
 
-  <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none">
-    <.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" />
+  <.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" />
 
-    <%= if @current_user do %>
-      <%= live_render(@socket, LiveBeatsWeb.PlayerLive, id: "player", session: %{}, sticky: true) %>
-    <% end %>
+  <%= if @current_user do %>
+    <%= live_render(@socket, LiveBeatsWeb.PlayerLive, id: "player", session: %{}, sticky: true) %>
+  <% end %>
 
+  <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none">
     <.flash flash={@flash} kind={:info}/>
     <.flash flash={@flash} kind={:error}/>
     <.connection_status>