mirror of
https://github.com/fly-apps/live_beats.git
synced 2024-11-25 01:10:59 +00:00
Merge pull request #15 from ndarilek/sidebar-a11y
Improve accessibility of mobile sidebar
This commit is contained in:
commit
7db38a70ab
2 changed files with 10 additions and 0 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue