mirrors/live_beats
1
0
Fork 0
mirror of https://github.com/fly-apps/live_beats.git synced 2024-11-25 09:20:59 +00:00
Code Issues Projects Releases Wiki Activity

Further sidebar accessibility improvements.

Browse source 
* Set `aria-controls` to the sidebar container.
* Swap button focus as sidebar is revealed/hidden.
This commit is contained in:
Nolan Darilek 2021-11-23 11:41:07 -06:00
parent ad13a8c364
commit ca311dd11d
2 changed files with 5 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -254,6 +254,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
{"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"} {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"}
) )
|> JS.hide(to: "#show-mobile-sidebar", transition: "fade-out") |> JS.hide(to: "#show-mobile-sidebar", transition: "fade-out")
|> JS.dispatch("js:exec", to: "#hide-mobile-sidebar", detail: %{call: "focus", args: []})
end end
def hide_mobile_sidebar(js \\ %JS{}) do 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"} {"transition ease-in-out duration-300 transform", "translate-x-0", "-translate-x-full"}
) )
|> JS.show(to: "#show-mobile-sidebar", transition: "fade-in") |> JS.show(to: "#show-mobile-sidebar", transition: "fade-in")
|> JS.dispatch("js:exec", to: "#show-mobile-sidebar", detail: %{call: "focus", args: []})
end end
def show(js \\ %JS{}, selector) do def show(js \\ %JS{}, selector) do

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

@ -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 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"> <div class="absolute top-0 right-0 -mr-12 pt-2">
<button type="button" <button type="button"
id="hide-mobile-sidebar"
aria-expanded="true" 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" 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()}> phx-click={hide_mobile_sidebar()}>
<span class="sr-only">Close sidebar</span> <span class="sr-only">Close sidebar</span>
@ -97,6 +99,7 @@
<button type="button" <button type="button"
id="show-mobile-sidebar" id="show-mobile-sidebar"
aria-expanded="false" 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" 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()}> phx-click={show_mobile_sidebar()}>
<span class="sr-only">Open sidebar</span> <span class="sr-only">Open sidebar</span>