mirrors/live_beats
1
0
Fork 0
mirror of https://github.com/fly-apps/live_beats.git synced 2024-06-20 22:30:35 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #15 from ndarilek/sidebar-a11y

Browse source 
Improve accessibility of mobile sidebar
This commit is contained in:
Chris McCord 2021-12-13 13:19:53 -05:00 committed by GitHub
parent 5b81181ea3 ca311dd11d
commit 7db38a70ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lib/live_beats_web/live/live_helpers.ex
View file

@ -253,6 +253,8 @@ 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")
|> JS.dispatch("js:exec", to: "#hide-mobile-sidebar", detail: %{call: "focus", args: []})
end
def hide_mobile_sidebar(js \\ %JS{}) do
@ -264,6 +266,8 @@ 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")
|> JS.dispatch("js:exec", to: "#show-mobile-sidebar", detail: %{call: "focus", args: []})
end
def show(js \\ %JS{}, selector) do

6
lib/live_beats_web/templates/layout/live.html.heex
View file

@ -7,6 +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>
@ -94,6 +97,9 @@
<!-- 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"
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>