mirror of
https://github.com/fly-apps/live_beats.git
synced 2024-11-21 23:50:59 +00:00
Merge pull request #14 from ndarilek/accessible-routing
Initial work on making routing more accessible
This commit is contained in:
commit
57c193e490
3 changed files with 22 additions and 1 deletions
|
@ -177,11 +177,30 @@ let liveSocket = new LiveSocket("/live", Socket, {
|
|||
params: {_csrf_token: csrfToken}
|
||||
})
|
||||
|
||||
let routeUpdated = () => {
|
||||
let target = document.querySelector("main h1") || document.querySelector("main")
|
||||
if (target) {
|
||||
let origTabIndex = target.getAttribute("tabindex")
|
||||
target.setAttribute("tabindex", "-1")
|
||||
target.focus()
|
||||
window.setTimeout(() => {
|
||||
if (origTabIndex) {
|
||||
target.setAttribute("tabindex", origTabIndex)
|
||||
} else {
|
||||
target.removeAttribute("tabindex")
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
// Show progress bar on live navigation and form submits
|
||||
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
|
||||
window.addEventListener("phx:page-loading-start", info => topbar.show())
|
||||
window.addEventListener("phx:page-loading-stop", info => topbar.hide())
|
||||
|
||||
// Accessible routing
|
||||
window.addEventListener("phx:page-loading-stop", () => window.requestAnimationFrame(routeUpdated))
|
||||
|
||||
window.addEventListener("js:exec", e => e.target[e.detail.call](...e.detail.args))
|
||||
|
||||
// connect if there are any LiveViews on the page
|
||||
|
|
|
@ -37,7 +37,7 @@ defmodule LiveBeatsWeb.LiveHelpers do
|
|||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-red-800">
|
||||
<p class="text-sm font-medium text-red-800" role="alert">
|
||||
<%= render_slot(@inner_block) %>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
@ -36,6 +36,7 @@ defmodule LiveBeatsWeb.LayoutView do
|
|||
<.link
|
||||
navigate={profile_path(@current_user)}
|
||||
class={"text-gray-700 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md #{if @active_tab == :profile, do: "bg-gray-200", else: "hover:bg-gray-50"}"}
|
||||
aria-current={if @active_tab == :profile, do: "true", else: "false"}
|
||||
>
|
||||
<.icon name={:music_note} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/>
|
||||
My Songs
|
||||
|
@ -44,6 +45,7 @@ defmodule LiveBeatsWeb.LayoutView do
|
|||
<.link
|
||||
navigate={Routes.settings_path(Endpoint, :edit)}
|
||||
class={"text-gray-700 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md #{if @active_tab == :settings, do: "bg-gray-200", else: "hover:bg-gray-50"}"}
|
||||
aria-current={if @active_tab == :settings, do: "true", else: "false"}
|
||||
>
|
||||
<.icon name={:adjustments} outlined class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"/>
|
||||
Settings
|
||||
|
|
Loading…
Reference in a new issue