From ca311dd11de56826d11b5ae58c4b224d663c452c Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Tue, 23 Nov 2021 11:41:07 -0600
Subject: [PATCH] Further sidebar accessibility improvements.

* Set `aria-controls` to the sidebar container.
* Swap button focus as sidebar is revealed/hidden.
---
 lib/live_beats_web/live/live_helpers.ex            | 2 ++
 lib/live_beats_web/templates/layout/live.html.heex | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex
index b7631ca..aca2884 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -254,6 +254,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
         {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"}
     )
     |> JS.hide(to: "#show-mobile-sidebar", transition: "fade-out")
+    |> JS.dispatch("js:exec", to: "#hide-mobile-sidebar", detail: %{call: "focus", args: []})
   end
 
   def hide_mobile_sidebar(js \\ %JS{}) do
@@ -266,6 +267,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
         {"transition ease-in-out duration-300 transform", "translate-x-0", "-translate-x-full"}
     )
     |> JS.show(to: "#show-mobile-sidebar", transition: "fade-in")
+    |> JS.dispatch("js:exec", to: "#show-mobile-sidebar", detail: %{call: "focus", args: []})
   end
 
   def show(js \\ %JS{}, selector) do
diff --git a/lib/live_beats_web/templates/layout/live.html.heex b/lib/live_beats_web/templates/layout/live.html.heex
index d0e9417..3a318bd 100644
--- a/lib/live_beats_web/templates/layout/live.html.heex
+++ b/lib/live_beats_web/templates/layout/live.html.heex
@@ -7,7 +7,9 @@
   <div id="mobile-sidebar" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white hidden min-h-screen">
     <div class="absolute top-0 right-0 -mr-12 pt-2">
       <button type="button"
+        id="hide-mobile-sidebar"
         aria-expanded="true"
+        aria-controls="mobile-sidebar"
         class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
         phx-click={hide_mobile_sidebar()}>
         <span class="sr-only">Close sidebar</span>
@@ -97,6 +99,7 @@
     <button type="button"
       id="show-mobile-sidebar"
       aria-expanded="false"
+      aria-controls="mobile-sidebar"
       class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500 lg:hidden"
       phx-click={show_mobile_sidebar()}>
       <span class="sr-only">Open sidebar</span>