highcharter
highcharter copied to clipboard
jbkunst
Adding accessibility module doesn't render chart
Hi and thanks for the wonderful package!
I'm having trouble using the accessibility module. Whenever I add it using hc_add_dependency(), none of the series in the chart render. I've been trying to replicate some of @batpigandme charts using highcharter + accessibility that she blogged about.
For example, this simple chart renders correctly:
library(highcharter)
data <- data.frame(
fruit = c("apple", "banana", "orange", "pear"),
count = c(2, 3, 5, 4)
)
hc <- highchart() %>%
hc_title(text = "Fruits") %>%
hc_xAxis(categories = data$fruit) %>%
hc_add_series(data = data$count, type = "column")
hc
But if I try to add some accessibility features to this chart, this what I get:
hc %>%
hc_add_dependency(name = "modules/accessibility.js") %>%
hc_plotOptions(
accessibility = list(
enabled = TRUE,
keyboardNavigation = list(enabled = TRUE)
)
)
Session info
R version 4.1.2 (2021-11-01)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19044)
Matrix products: default
locale:
[1] LC_COLLATE=English_United States.1252 LC_CTYPE=English_United States.1252
[3] LC_MONETARY=English_United States.1252 LC_NUMERIC=C
[5] LC_TIME=English_United States.1252
attached base packages:
[1] stats graphics grDevices utils datasets methods base
other attached packages:
[1] highcharter_0.9.4
loaded via a namespace (and not attached):
[1] pillar_1.7.0 compiler_4.1.2 tools_4.1.2 xts_0.12.1
[5] digest_0.6.29 jsonlite_1.8.0 lubridate_1.8.0 lifecycle_1.0.1
[9] tibble_3.1.6 lattice_0.20-45 pkgconfig_2.0.3 rlang_1.0.2
[13] igraph_1.2.11 DBI_1.1.2 cli_3.2.0 yaml_2.3.5
[17] curl_4.3.2 fastmap_1.1.0 stringr_1.4.0 dplyr_1.0.8
[21] generics_0.1.2 vctrs_0.3.8 htmlwidgets_1.5.4 grid_4.1.2
[25] tidyselect_1.1.2 glue_1.6.2 data.table_1.14.2 R6_2.5.1
[29] fansi_1.0.2 tidyr_1.2.0 purrr_0.3.4 TTR_0.24.3
[33] magrittr_2.0.2 backports_1.4.1 ellipsis_0.3.2 htmltools_0.5.2
[37] rlist_0.4.6.2 assertthat_0.2.1 quantmod_0.4.18 utf8_1.2.2
[41] stringi_1.7.6 broom_0.7.12 crayon_1.5.0 zoo_1.8-9
Hey @mfherman, I actually ran into the same bug at one point while finishing up my slides, and ended up just using renv with an older version of highcharter so I could finish the talk (and then figured I'd troubleshoot later). (You can see the exact commit I built from in the renv lockfile for my slides, but obviously that's not an ideal solution https://github.com/batpigandme/highcharter-a11y-talk/blob/ce5d4522952a8ca2623a9037e33e8e1ca429c5ee/renv.lock#L393-L403).
@cderv dug into this with me a little at the time (commit causing the issue looked to be https://github.com/jbkunst/highcharter/commit/a8e62361c47fb5767e209da2b97b103b7bd7624f), but I plan on taking another look soon, too!
Yes there is an issue in the way hc_add_dependency() is adding the script accessibility.js in the <head> of the document. I believe before a8e62361c47fb5767e209da2b97b103b7bd7624f, the module was available as part of the default one and added differently in the <head>, in another path. It could be related to order in which scripts are loaded or from where accessibility.js is loaded.
By different path, I mean that accessibility.js was part of modules/ folder in highcharter htmldependencies. Using hc_add_dependency() is a trick to add a script as a new JS dep - it will create a new htmldependency and add this new one in <head> after main highcharter one. This creates some JS issues in browser console which prevent things from loading unfortunately.
Happy to share more in details about this if it helps
Thank you so much @batpigandme. I've got it working using the same version you used for your slides. As you say, not a long-term solution, but I'm glad it's working for now. Thanks also for the great presentation yesterday -- it inspired me to try implementing new accessibility features in my work!
@cderv: thanks for the additional details. Unfortunately, the R + JS + HTML knowledge it would take to fix this are beyond my technical abilities, but perhaps @batpigandme or others may be able to take a crack at it.
And for anyone else coming across this issue, to get the accessibility module working with highcharter, I installed a prior version using:
remotes::install_github("jbkunst/highcharter@8ff41366c8c411b497b5378d27be48617360f81f")
FWIW, I was also able to get it working in the most recent version of highcharter by un-commenting-out the accessibility module from the htmlwidgets list. The branch in my fork is module-testing, here https://github.com/batpigandme/highcharter/tree/module-testing
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. Feel free to reopen it if you find it necessary.
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}
@cderv It is—installing from #780 works, though, or, if you don’t mind using older versions of Highcharts, my olden timey branch works, too. 😜
Hello @batpigandme --
I installed your branch of highcharter to use the accessibility features on a cluster chart -- and it worked great. But for some reason, now my map won't render properly. And ideas why?
Hi @lindsayjorgenson, I'm sorry to say I don't—I haven't played with the map feature much, to be honest. I'll let you know if I come across anything.
@lindsayjorgenson I recommend installing from #780 as this works for my team across several products to produce highcharter maps without issue.
