I got it working when using a class based selector as the condition, but not when using an attribute selector as the condition.
<.button phx-click={accessible_js_toggle(to: ".target")}>
# these two functions successfully add and remove the `aria-hidden="true"` attribute and `"invisible"` class to the targeted elements
def accessible_js_toggle_1(js \\ %JS{}, [to: selector]) do
js
|> JS.remove_attribute("aria-hidden", to: selector <> "[style*='display: none']")
|> JS.set_attribute({"aria-hidden", "true"}, to: selector <> ":not([style*='display: none'])")
|> JS.remove_class("invisible", to: selector <> "[style*='display: none']")
|> JS.add_class("invisible", to: selector <> ":not([style*='display: none'])")
|> JS.toggle(to: selector)
end
def accessible_js_toggle_2(js \\ %JS{}, [to: selector]) do
js
|> JS.remove_attribute("aria-hidden", to: selector <> ".invisible")
|> JS.set_attribute({"aria-hidden", "true"}, to: selector <> ":not(.invisible)")
|> JS.remove_class("invisible", to: selector <> ".invisible")
|> JS.add_class("invisible", to: selector <> ":not(.invisible)")
|> JS.toggle(to: selector)
end
# whereas this function that selects by attribute does not work while toggling
# if set is after remove, then it only gets set; if remove is after set, then it never gets set
def accessible_js_toggle_3(js \\ %JS{}, [to: selector]) do
js
|> JS.remove_attribute("aria-hidden", to: selector <> "[aria-hidden='true']")
|> JS.set_attribute({"aria-hidden", "true"}, to: selector <> ":not([aria-hidden='true'])")
|> JS.toggle(to: selector)
end
https://github.com/codeanpeace/live_cal/commit/7561dfce19ffc855478928dff0a6a1bb40b88085
