From ad13a8c3647d114bb5524c0530a3e69ee9a6bd77 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Tue, 23 Nov 2021 11:29:49 -0600
Subject: [PATCH] Partial implementation of ARIA disclosure pattern for
 sidebar.

* Hide/show buttons to reveal sidebar as appropriate.
* Hard-code `aria-expanded`, since by default only one button is exposed at a given time.
---
 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 b871a98..b7631ca 100644
--- a/lib/live_beats_web/live/live_helpers.ex
+++ b/lib/live_beats_web/live/live_helpers.ex
@@ -253,6 +253,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
       transition:
         {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"}
     )
+    |> JS.hide(to: "#show-mobile-sidebar", transition: "fade-out")
   end
 
   def hide_mobile_sidebar(js \\ %JS{}) do
@@ -264,6 +265,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
       transition:
         {"transition ease-in-out duration-300 transform", "translate-x-0", "-translate-x-full"}
     )
+    |> JS.show(to: "#show-mobile-sidebar", transition: "fade-in")
   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 d6c09ed..d0e9417 100644
--- a/lib/live_beats_web/templates/layout/live.html.heex
+++ b/lib/live_beats_web/templates/layout/live.html.heex
@@ -7,6 +7,7 @@
   <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"
+        aria-expanded="true"
         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>
@@ -94,6 +95,8 @@
   <!-- Search header -->
   <div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
     <button type="button"
+      id="show-mobile-sidebar"
+      aria-expanded="false"
       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>