mirror of
https://github.com/fly-apps/live_beats.git
synced 2024-11-13 11:41:00 +00:00
Further sidebar accessibility improvements.
* Set `aria-controls` to the sidebar container. * Swap button focus as sidebar is revealed/hidden.
This commit is contained in:
parent
ad13a8c364
commit
ca311dd11d
2 changed files with 5 additions and 0 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue