From 5cf58b2b77843a653fc0a4a403ecfbe6b8a2245f Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Mon, 22 Nov 2021 13:18:06 -0600
Subject: [PATCH] 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.
---
 lib/live_beats_web/live/player_live.ex             |  2 +-
 lib/live_beats_web/templates/layout/live.html.heex | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
index f2e59b5..ef3d394 100644
--- 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
index f7cc7c7..3c55b4e 100644
--- 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>
 
+  <.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" />
+
+  <%= 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">
-    <.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" />
-
-    <%= if @current_user do %>
-      <%= live_render(@socket, LiveBeatsWeb.PlayerLive, id: "player", session: %{}, sticky: true) %>
-    <% end %>
-
     <.flash flash={@flash} kind={:info}/>
     <.flash flash={@flash} kind={:error}/>
     <.connection_status>